import Taro, { Component } from '@tarojs/taro'
import './index.scss'

import { registerAgent } from '@services/agent'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/user'
import getUserPhone from '@utils/getUserPhone'
import { ROLE_CODE } from '@constants/user'
import { queryUserInfo } from '@services/user'
const bannerImg = 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/images/index/banner.jpg'
@connect(state => state.user, { ...actions })
export default class Index extends Component {
  config = {
    navigationBarTitleText: '成为经纪人'
  }
  state = {
    selector: ['独立经纪人', '渠道经纪人'],
    selectorChecked: '独立经纪人',
    recommendAgentCode: '',//推荐码
    channelCode: '',//渠道码
    isChannel: false,
    user: {}
  }
  componentDidMount () {
    this.loadUserInfo()


  }
  putMessage () {
    const { recommendAgentCode, channelCode } = this.state
    const payload = {
      recommendAgentCode: recommendAgentCode,
      channelCode: channelCode
    }
    if (payload.channelCode)
      registerAgent(payload).then(res => {
        // debugger
        this.props.dispatchUpdateUserInfoNew(res.personId)
        Taro.navigateTo({
          url: '/pages/agent/index'
        })
      })
    else {
      console.log('11111')
      Taro.showToast({
        title: '请输入渠道码'
      })
    }
  }

  // onChange = e => {
  //   this.setState({
  //     selectorChecked: this.state.selector[e.detail.value]
  //   }, () => {
  //     const { selectorChecked } = this.state
  //     if (selectorChecked == '渠道经纪人') {
  //       this.setState({
  //         isChannel: true
  //       })
  //     } else {
  //       this.setState({
  //         isChannel: false,
  //         channelCode: ''
  //       })
  //     }

  //   })
  // }
  bindInfo (e) {
    console.log(e.currentTarget.dataset.id)
    switch (e.currentTarget.dataset.id) {
      case 'recommendAgentCode':
        this.setState({
          recommendAgentCode: e.detail.value
        })
        break;
      case 'channelCode':
        this.setState({
          channelCode: e.detail.value
        })
        break;
      default:
        break;
    }
  }
  getPhoneNumber (e) {
    getUserPhone(e, (phoneNumber) => {
      if (phoneNumber) {
        this.putMessage()
      } else {
        Taro.showToast({
          title: '授权电话失败',
          icon: 'none'
        })
      }
    })
  }
  loadUserInfo () {
    queryUserInfo().then(user => {
      this.setState({
        user,
        phone: user.phone
      }, () => {
        if (user.personType == ROLE_CODE['DRIFT'] || user.personType == ROLE_CODE['CUSTOMER']) {
          const router = Taro.getStorageSync('router')
          const code = this.$router.params.agentCode || router.query.agentCode || ''
          this.setState({
            recommendAgentCode: code
          }, () => {
            console.log('recommendAgentCode' + this.state.recommendAgentCode)
          })
        } else {
          Taro.switchTab({
            url: '/pages/person/index'
          })
        }
      })
    })
  }
  render () {
    const { isChannel, recommendAgentCode } = this.state
    const { userInfo: { person: { phone } } } = this.props
    return (
      <View className='page'>
        <Image src={bannerImg} className='banner' mode='aspectFill'></Image>
        <View className='become_agent'>
          {/* <View className='agent_type'>
            <Text className='agent_title'>经纪人类型</Text>
            <Picker mode='selector' className='selector' range={this.state.selector} onChange={this.onChange}>
              <View className='picker'>
                {this.state.selectorChecked}
              </View>
            </Picker>
          </View> */}
          <Input type='number' className='channel_code' placeholder='渠道验证码 (必填)' onInput={this.bindInfo.bind(this)} data-id='channelCode'></Input>

          <Input type='number' className='input_code' value={recommendAgentCode} placeholder='输入推荐码 (选填)' onInput={this.bindInfo.bind(this)} data-id='recommendAgentCode'></Input>
          {
            phone ? (
              <Button onClick={this.putMessage} className='become_btn'>立即成为经纪人</Button>
            ) : (
                <Button open-type="getPhoneNumber" onGetphonenumber={this.getPhoneNumber} className='become_btn'>立即成为经纪人</Button>
              )
          }
        </View>

      </View>
    )
  }
}
