import Taro, { Component } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import './index.scss'
import * as actions from '@actions/user'
import { queryUserInfo } from '@services/user'
import { editAgent, becomeChannel } from '@services/agent'

@connect(
  state => ({ ...state.user }), { ...actions })

export default class editDetail extends Component {
  state = {
    message: '',
    selector: ['独立经纪人', '渠道经纪人'],
    selectorChecked: '独立经纪人',
    recommendAgentCode: '',
    recommendAgentCode: '',
    isChannel: false,
    isAgent: false,
    name: '',
    phone: '',
    channelCode: '',
    personType: '',
    user: {}
  }
  config = {
    navigationBarTitleText: '个人资料',
  }

  componentWillMount() {
    this.loadUserInfo()
  }
  loadUserInfo() {
    queryUserInfo().then(user => {
      this.setState({
        user: user,
        name: user.name ? user.name : user.nickname,
        phone: user.tel ? user.tel : user.phone,
      }, () => {
        console.log(this.state.phone)
        if (user.personType == 'estate agent') {
          this.setState({
            selectorChecked: '独立经纪人',
            personType: 'estate agent',
            isAgent: true
          })
        } else if (user.personType == 'channel agent') {
          this.setState({
            selectorChecked: '渠道经纪人',
            personType: 'channel agent',
            isAgent: true
          })
        } else {
          this.setState({
            isAgent: false
          })
        }
      })
    })
  }
  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value]
    }, () => {
      const { selectorChecked } = this.state
      if (selectorChecked == '渠道经纪人') {
        this.setState({
          isChannel: true,
          personType: 'channel agent'
        })
      } else {
        this.setState({
          isChannel: false,
          personType: 'estate agent'
        })
      }

    })
  }
  clickEditAgent() {

    const { user: { avatar, phone, name, personType } } = this.state
    // const { channelCode,name,phone,personType } =  this.state
    if (this.state.name == '') {
      this.Alert('请输入用户名')
      return;
    }
    if (this.state.phone == '') {
      this.Alert('请输入电话号码')
      return;
    }
    if (!(/^1[3|4|5|7|8|9][0-9]\d{4,8}$/.test(this.state.phone)) || this.state.phone.length != 11) {
      this.Alert('请输入正确的手机号码');
      return false;
    }
    if (this.state.personType == 'channel agent') {
      if (this.state.channelCode == '') {
        this.Alert('请输入渠道码')
        return;
      }
    }

    if (this.state.personType == 'channel agent' || this.state.personType == 'estate agent') {
      becomeChannel({
        personType: this.state.personType,//经纪人类型
        channelCode: this.state.channelCode//渠道码
      }).then((data) => {
        const playload = {
          name: this.state.name,
          avatar: avatar,
          phone: this.state.phone
        }
        editAgent(playload).then(res => {
          Taro.switchTab({
            url: '/pages/person/index'
          })
        })

      })
    } else {
      const playload = {
        name: this.state.name,
        avatar: avatar,
        phone: this.state.phone
      }
      editAgent(playload).then(res => {
        Taro.switchTab({
          url: '/pages/person/index'
        })
      })
    }
  }
  Alert(content, title) {
    title = title ? title : "温馨提示";
    content = content.toString();
    Taro.showModal({
      title: title,
      content: content,
      confirmColor: '#4f93ce',
      showCancel: false,
    })
  }
  BindInfo(e) {
    console.log(e.currentTarget.dataset.id)
    switch (e.currentTarget.dataset.id) {
      case 'name':
        this.setState({
          name: e.detail.value
        })
        break;
      case 'phone':
        this.setState({
          phone: e.detail.value
        })
        break;
      case 'channelCode':
        this.setState({
          channelCode: e.detail.value
        })
        break;
      default:
        break;
    }
  }
  render() {
    // const { userInfo: { person } } = this.props
    const { user } = this.state
    const { isAgent } = this.state
    return (
      <View className='list'>
        <View className='col_box'>
          <View className='edit edit-name'>用户名</View>
          <Input type='text' className='edit' value={user.name ? user.name : user.nickname} onInput={this.BindInfo.bind(this)} data-id='name' />
        </View>
        <View className='col_box'>
          <View className='edit edit-phone'>电话号码</View>
          <Input type='text' className='edit' value={user.tel ? user.tel : user.phone} data-id='phone' onInput={this.BindInfo.bind(this)} />
        </View>
        {
          isAgent && (<View className='col_box'>
            <View className='edit edit-phone'>经纪人类型</View>
            <Picker mode='selector' className='edit' className='selector' range={this.state.selector} onChange={this.onChange}>
              <View className='picker'>
                {this.state.selectorChecked}
              </View>
            </Picker>
          </View>)
        }
        {
          (isChannel && user.personType == 'estate agent') && (<View className='col_box'>
            <Input type='text' placeholder='请输入渠道码' className='channelCode' data-id='channelCode' onInput={this.BindInfo.bind(this)} />
          </View>)
        }
        <View className='comfire' onClick={this.clickEditAgent}>保存</View>
      </View>
    )
  }
}