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);'
    }
  }
  //用户信息姓名和电话号码接口
  setUserInfoToStorage() {
    Taro.request({
      url: URL.ShopWxStore,
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
      }
    })
      .then(res => {
        if (res.data.err_msg === 'success') {
          Taro.setStorageSync('user_identity', { username: res.data.otherData.userName, userphone: res.data.otherData.userPhone })

        } else {
          Taro.showToast({
            title: res.data.err_msg,
            icon: 'none',
            duration: 1500
          })
        }
      })
  }
  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 => {
        if (res.data.err_code === 0) {

          Taro.showToast({
            title: res.data.err_msg && '登入成功',
            icon: 'success',
            duration: 1000
          })
          Taro.setStorageSync('session_id', res.data.session_id)
          Taro.setStorageSync('shopInfo', res.data.shop_info)
          Taro.setStorageSync('userInfo', res.data.user_info)
          this.setUserInfoToStorage()

          setTimeout(() => {
            // Taro.navigateBack({
            //   delta: 1
            // })
            Taro.switchTab({
              url:'/pages/home/home'
            })
          }, 1000);

        } else {
          Taro.showToast({
            title: res.data.err_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 className='image-inner-wrapper'>
              <Image style='width: 240px;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