import Taro, { Component } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import { customerGet, customerEdit } from '@services/report'
import { getItemList } from '@services/item'
import './index.scss'

export default class editGuest extends Component {
  state = {
    TaCustomer: {},
    wuye: ['自住', '投资'],
    wuyeChoose: '自住',
    projectType: ['高层', '别墅', '公寓'],
    projectChoose: '高层',
    projectStates: ['报备', '认筹', '签约', '到访', '无效'],
    projectState: '报备',
    priceRanges: ['0-10000元/㎡', '10000-20000元/㎡', '20000-30000元/㎡', '30000-50000元/㎡', '50000-70000元/㎡', '70000-100000元/㎡', , '100000元/㎡以上'],
    clickFlag: false,
    floorList: ''
  }
  config = {
    navigationBarTitleText: '客户详情',
  }

  componentDidShow() {
    const { customerId, from } = this.$router.params
    this.setState({
      customerId: customerId
    }, function () {
      this.loadGuest(customerId)
      this.loadProject()
    })
  }

  loadGuest(customerId) {
    Taro.showLoading()
    customerGet(customerId).then(res => {
      this.setState({
        TaCustomer: res
      })
      Taro.hideLoading()
    })
  }

  onChangeWuYe = e => {
    let newArr = this.state.TaCustomer
    newArr.realtyManageType = e.detail.value
    this.setState({
      TaCustomer: newArr
    })
  }

  onChangeProjectType = e => {
    this.setState({
      projectChoose: this.state.projectType[e.detail.value]
    })
  }

  onChangePrice = e => {
    let newArr = this.state.TaCustomer
    newArr.priceRange = e.detail.value
    this.setState({
      TaCustomer: newArr
    })
  }

  onChangeProjectState = e => {
    this.setState({
      projectState: this.state.projectStates[e.detail.value]
    })
  }

  changeDescript = e => {
    let newArr = this.state.TaCustomer
    newArr.describe = e.detail.value
    this.setState({
      TaCustomer: newArr
    })
  }

  cancel() {
    Taro.navigateBack({
      delta: -1
    })
  }

  comfire() {
    const that = this
    const { TaCustomer } = this.state
    const payload = TaCustomer
    customerEdit(payload).then(res => {
      Taro.showToast({
        title: '提交成功',
        duration: 1000,
        icon: 'success',
        complete: function () {
          that.cancel()
        }
      })
    })
  }

  gotoHomePage() {
    if (this.state.clickFlag) {
      return
    } else {
      this.setstate({ clickFlag: true })
    }
    Taro.switchTab({
      url: '/pages/person/myGuest/index'
    })
  }
  loadProject() {
    getItemList().then(res => {
      this.setState({
        floorList: res
      })
    })
  }
  getName(dict, id, data) {
    dict = dict.records || []
    if (data == 'intention') {
      return (dict.filter(({ intention: target }) => id === target)[0] || {}).buildingName
    } else {
      return (dict.filter(({ buildingId: target }) => id === target)[0] || {}).buildingName
    }

  }
  getStatus(status) {
    if (status == '1') {
      return '报备'
    }
    else if (status == '2') {
      return '到访'
    }
    else if (status == '3') {
      return '认筹'
    }
    else if (status == '4') {
      return '签约'
    }
    else {
      return ''
    }

  }
  render() {
    const { TaCustomer, floorList } = this.state
    return (
      <View className='content'>
        <Image src={TaCustomer.picture} className='head_img'></Image>
        <View className='name_box'>
          <Text>{TaCustomer.name}</Text>
          <Image src={TaCustomer.sex == 1 ? require('@assets/person/guest/man.png') : require('@assets/person/guest/women.png')} className='sex' mode='widthFix'></Image>
        </View>
        <View className='line_box'>
          <View className='line'></View>
          <View className='xinxi'>详细信息</View>
          <View className='line'></View>
        </View>
        <View className='col_box'>
          <Text className='star'>*</Text>
          <Text className='col_name1'>意向项目:</Text>
          <Input disabled className='col_message' value={TaCustomer.buildingId ? this.getName(floorList, TaCustomer.buildingId, 'buildingId') : '暂无'} />
        </View>
        <View className='col_box'>
          <Text className='star'>*</Text>
          <Text className='col_name1'>客户姓名:</Text>
          <Input disabled className='col_message' value={TaCustomer.name} />
        </View>
        <View className='col_box'>
          <Text className='star'>*</Text>
          <Text className='col_name1'>客户电话:</Text>
          <Input disabled className='col_message' value={TaCustomer.phone || TaCustomer.tel} />
        </View>
        <View className='col_box'>
          <Text className='col_name2'>物业类型:</Text>
          <Picker className='col_message' mode='selector' range={this.state.wuye} onChange={this.onChangeWuYe}>
            <View className='picker'>
              {this.state.wuye[parseInt(TaCustomer.realtyManageType)]}
            </View>
          </Picker>
        </View>
        <View className='col_box'>
          <Text className='col_name2'>项目类型:</Text>
          <Picker className='col_message' mode='selector' range={this.state.projectType} onChange={this.onChangeProjectType}>
            <View className='picker'>
              {this.state.projectChoose}
            </View>
          </Picker>
        </View>
        <View className='col_box'>
          <Text className='col_name2'>价格区间:</Text>
          <Picker className='col_message' mode='selector' range={this.state.priceRanges} onChange={this.onChangePrice}>
            <View className='picker'>
              {this.state.priceRanges[parseInt(TaCustomer.priceRange)]}
            </View>
          </Picker>
        </View>
        <View className='col_box'>
          <Text className='col_name2'>客户描述:</Text>
          <Textarea onInput={this.changeDescript} className='textar' value={TaCustomer.describe} autoFocus />
        </View>
        <View className='col_box'>
          <Text className='col_name3'>状态:</Text>
          <Text className='col_message'>{this.getStatus(TaCustomer.status)}</Text>
          {/* <Picker disabled className='col_message' mode='selector' range={this.state.projectStates} onChange={this.onChangeProjectState}>
                <View className='picker'>
                  {this.state.projectStates[TaCustomer.verifyStatus]}
                </View>
              </Picker> */}
        </View>
        <View className='btn_box'>
          <View onClick={this.comfire} className='comfire'>提交</View>
          <View onClick={this.cancel} className='cancel'>取消</View>
        </View>
      </View>
    )
  }
}
