import Taro, { Component } from '@tarojs/taro';
import './index.scss'
import buildImg from '@assets/agent/build.png'
import phoneImg from '@assets/agent/Iphone.png'
import { clientProgress } from '@services/client'
import { getItemList } from '@services/item'
import { getCardList } from '@services/card'
import { savePoint, updatePoint } from '@services/common'
// import { zhuge } from '@utils/zhuge-wx-mpvue.min'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '客户进度'
  }
  // console.log(this.$router.params)//链接参数
  state = {
    processData: [{
      icon: 'waiting',
      color: 'rgba(0,0,0,0.1)',
      state: 1
    },
    {
      icon: 'waiting',
      color: 'rgba(0,0,0,0.1)',
      state: 2
    },
    {
      icon: 'waiting',
      color: 'rgba(0,0,0,0.1)',
      state: 3
    },
    {
      icon: 'waiting',
      color: 'rgba(0,0,0,0.1)',
      state: 4
    }],
    detail: {},
    floorList: '',//楼盘信息
    adviserList: '',//置业顾问信息
    floor: '',
    adviser: '',
    adviserPhone: '',
    phone: '',
    recordId:null
  }
  componentWillMount() {
    // this.setPeocessIcon()

    this.loadList()
    savePoint({
      event: 'progress',
      eventType: 'agent',
      propertyName: '客户进度',
      data:'{}'
    }).then(res => {
      this.setState({
        recordId:res.recordId
      })
      console.log('客户进度')
    })
  }
  componentWillUnmount(){
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }
  loadList() {
    var that = this;
    //获取楼盘列表
    getItemList().then(res => {
      that.setState({
        floorList: res
      })
    })
    // 获取置业顾问列表
    const params = {
      pageNumber: 1,
      pageSize: 50
    }
    getCardList(params).then(res => {
      that.setState({
        adviserList: res.records
      }, () => {
        that.getClientData()
      })
    })
  }
  getName(dict, id, data) {
    dict = dict.records || []
    var that = this;
    if (data == 'floor') {
      return  (dict.filter(({ buildingId: target }) => id === target)[0] || {}).buildingName
      
    } else {
      var adviserName = (dict.filter(({ id: target }) => id === target)[0] || {}).name
      var phone = (dict.filter(({ id: target }) => id === target)[0] || {}).phone
      var photo = (dict.filter(({ id: target }) => id === target)[0] || {}).photo
      that.setState({
        adviser: adviserName,
        adviserPhone: phone,
        photo: photo
      })
    }

  }
  getClientData() {
    var that = this;
    console.log('customerId:' + this.$router.params.customerId)
    let { customerId = '4c6077cd39dd2a4b3caa10a7539c0a94' } = this.$router.params
    clientProgress(customerId).then(res => {
      console.log(res)
      that.getName(that.state.floorList, parseInt(res.intention), 'floor')
      that.getName(that.state.adviserList, res.realtyConsultant, 'adviser')
      // that.getName(that.state.adviserList, 'b6ca865fb4b1cd1b159f415a8b3ea774')//测试

      var index = res.status//记录状态为1的最后的位置
      //进度条的状态
      var processArr = this.state.processData
      for (var i = 0; i < processArr.length; i++) {
        var item = processArr[i]
        console.log('item' + item)
        if (item.state == index) {
          processArr[i].icon = 'success'
          processArr[i].color = 'rgba(255,0,0,1)'
        } else {
          processArr[i].icon = 'waiting'
          processArr[i].color = 'rgba(0,0,0,0.1)'
        }
      }

      // App.zhuge.track('查看客户详情', {
      //   '客户id': res.customerId,
      //   '客户姓名': res.name,
      //   '推荐进度': res.status,
      //   '意向楼盘': that.state.floor,
      //   '客户电话': res.phone,
      //   '接待顾问姓名': res.consultants.name,
      //   '接待顾问电话': res.consultants.phone,
      // })
      that.setState({
        processData: processArr,
        detail: res
      })
    })
  }

  render() {
    const { detail,floorList} = this.state
    return (
      <View className='client__progress'>
        <View className='client__infor'>
          <View className='clieng__name'>{detail.name}</View>
          <View className='clieng__build'><Image mode="aspectFill" className='build__img' src={buildImg}></Image>意向楼盘：{detail.intention || '暂无'}</View>
          <View className='clieng__phone'><Image mode="aspectFill" className='phone__img' src={phoneImg}></Image>{detail.phone || '暂无'}</View>
          {/* <Image className='client__img' src={headImg}></Image> */}
        </View>
        <View className='progress__infor'>
          <View className='recommended__progress'>推荐进度</View>
          <View className='recommended__step'>
            <View className='step'>
              {
                this.state.processData.map((item, index) => {
                  return (
                    <View className='step_tip' key={index}>
                      <Icon type={item.icon} size="20" color={item.color} />
                      <Text className={index === 3 ? 'strip hide' : 'strip'}></Text>
                    </View>
                  )
                })
              }
            </View>
            <View className='step__txt'>
              <View className='txt'>{item.reportRecommendStatus == 1 ? '报备' : '推荐'}<View className='tip'></View></View>
              <View className='txt'>到访<View className='tip'></View></View>
              <View className='txt'>认购<View className='tip'></View></View>
              <View className='txt'>签约<View className='tip'></View></View>
            </View>
          </View>
          <View className='reception__consultant'>接待顾问</View>
          <View className='consultant__info'>
            {/* <Image className='consultant__img' src={photo} mode="widthFix"></Image> */}
            <View className='infor consultant__name'>姓名：{detail.consultants.name}</View>
            <View className='infor consultant__tel'>手机号码：{detail.consultants.phone}</View>
          </View>
          <View className='remarks'>客户说明</View>
          <View className='remarks__txt'>
            {detail.describe ? detail.describe : '暂无说明'}
          </View>
        </View>
      </View>
    );
  }
}