import Taro, { Component } from '@tarojs/taro'
import { ROLE_CODE } from '@constants/user'
import { connect } from '@tarojs/redux'
import './index.scss'
import * as actions from '@actions/user'
import { queryUserInfo } from '@services/user'
@connect(
  state => ({ ...state.user }), { ...actions })
export default class personDetail extends Component {
  state = {
    userName: '用户名',
    phone: '电话号码',
    manType: '经纪人类型',
    user: {}
  }
  config = {
    navigationBarTitleText: '个人资料',
  }
  componentWillMount() {
    this.loadUserInfo()
  }
  loadUserInfo() {
    queryUserInfo().then(user => {
      this.setState({
        user: user
      })
    })
  }
  getRoleName(type) {
    switch (type) {
      case ROLE_CODE['CONSULTANT']:
        return '置业顾问'
      case ROLE_CODE['ESTATE_AGENT']:
        return '独立经纪人'
      case ROLE_CODE['CHANNEL_AGENT']:
        return '渠道经纪人'
      default:
        return '普通用户'
    }
  }

  goEdit(parm, a) {
    const pram = parm + '|' + a
    Taro.navigateTo({
      url: `/pages/person/personDetail/editDetail/index?pram=` + pram
    })
  }

  render() {
    const { userName, phone, manType } = this.state
    const { user } = this.state

    return (
      <View className='list'>
        <View className='col_box'>
          <Text>头像</Text>
          <View className='col_right'>
            <Image className="info__headimg" src={user.avatar} />
          </View>
        </View>
        <View className='col_box' onClick={this.goEdit.bind(this)}>
          <Text>{userName}</Text>
          <View className='col_right'>
            <Text>{user.name ? user.name : user.nickname}</Text>
            <Image src={require('@assets/person/arrow2.png')} mode="widthFix"></Image>
          </View>
        </View>
        <View className='col_box' onClick={this.goEdit.bind(this)}>
          <Text>{phone}</Text>
          <View className='col_right'>
            <Text>{user.tel ? user.tel : user.phone}</Text>
            <Image src={require('@assets/person/arrow2.png')} mode="widthFix"></Image>
          </View>
        </View>
        {
          (user.personType == ROLE_CODE['CHANNEL_AGENT'] || user.personType == ROLE_CODE['ESTATE_AGENT']) &&

          <View className='col_box' onClick={this.goEdit.bind(this)}>
            <Text>{manType}</Text>
            <View className='col_right'>
              <Text>{this.getRoleName(user.personType)}</Text>
              <Image src={require('@assets/person/arrow2.png')} mode="widthFix"></Image>
            </View>
          </View>
        }
      </View>
    )
  }
}
