import Taro, { Component } from '@tarojs/taro'
import { View,Input,Button,Text,Image } from '@tarojs/components'
import URL from '../../serviceAPI.config'

import './login.scss'



class Login extends Component {
  config = {
    navigationBarTitleText: '登入'
  }
  constructor(){
      this.state={
          username:'',
          password:'',
        backgroundImage: 'background-image:url(' + URL.Base + '/Public/images/bg3.jpg);'
      }
  }

  loginApi() {
    Taro.request({
      url: URL.Base+'user-login',
      method: 'POST',
      dataType: 'json',
      data: {
        username: this.state.username,
        password: this.state.password,
 
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        console.log('res',res)
        if(res.data.err_code===0){
          Taro.showToast({
            title: res.data.msg,
            icon: 'success',
            duration: 1000
          })
          setTimeout(() => {
            Taro.switchTab({
              url: '/pages/home/home'
            })
          }, 1000);
          
        }else{
          Taro.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
        }

      })

  }
 
  usernameHandler(e){
    let value=e.detail.value
    this.setState({username:value})
  }
  passwordHandler(e){
    let value=e.detail.value
    this.setState({password:value})
  }
  loginHandler(){
    this.loginApi()
  }
  componentDidMount() {
    
  }
 
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className='login'>
      <View className='background' style={this.state.backgroundImage}></View>
      <View className='logo'>
            <View className='image-wrapper'>
            <View>
            <Image style='width: 250px;height: 80px;background: #fff;' src={URL.Base +'/Public/images/com-logo.png'} />
            </View>
          <View className='title'>全屋定制商城</View>
            </View>
            
      </View>
      <View className='login-wrapper'>
      <View className='title'>用户登入</View>
        <View className='bgtopWrap'>
          <View className='loginWrap'>
            <View className='username'>
              <Input type='text' focus={true} name='username' maxLength='11' placeholder='请输入用户名/手机号' value={this.state.username} onInput={this.usernameHandler} />
            </View>
            <View className='password'>
              <Input type='password' name='password'  placeholder='请输入密码' value={this.state.password} onInput={this.passwordHandler} />
            </View>
            <Text className='register'>
            立即注册
            </Text>
            <Button className='button button-orange'  onClick={this.loginHandler}>登录</Button>
          </View>
        </View>

      </View>
       
      </View>
    )
  }
}

export default Login