import Taro, { Component } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/user'
import dayjs from 'dayjs'
import './index.scss'

@connect(state => ({...state.user }), { ...actions })
export default class myGuest extends Component {
  state = {
    guest:[],
    reportGuest:[],
    isChoose:true
  }
  config = {
    navigationBarTitleText: '我的客户',
  }

  componentDidShow() {
    this.loadGuest()
    this.loadReport()
  }

  loadGuest() {
    Taro.showLoading()
    this.props.dispatchCustomerInfo().then(res => {
      this.setState({
        guest:res.records
      })
      Taro.hideLoading()
    })
  }

  loadReport() {
    Taro.showLoading()
    this.props.dispatchMyReport().then(res => {
      this.setState({
        reportGuest:res.records
      })
      Taro.hideLoading()
    })
  }

  onChange(id){
    if(id==1){
      this.setState({
        isChoose:true,
      })
    }else{
      this.setState({
        isChoose:false,
      })
    }
  }

  goEdit(customerId){
    Taro.navigateTo({
      url: `/pages/person/myGuest/editGuest/index?customerId=`+customerId
    })
  }

  calling(tel) {
    wx.makePhoneCall({
      phoneNumber: tel
    })
  }

  renderGuest() {
    const {guest}=this.state
    return (
      <View className="list__wrap">
        {
          guest.map(item => (
             guest.length === 0 ? '' : (
                <View className="col" key={item.goodsId}>
                  <View className="col_top">
                    <View className="col_top_left">
                      <Image className='head_img' src={item.picture}></Image>
                      <View className="col_message_box">
                        <View className="col_name_box">
                          <View className="col_name">{item.name}</View>
                          <Image className='sex' src={item.sex==1?require('@assets/person/guest/man.png'):require('@assets/person/guest/women.png')} mode='widthFix'></Image>
                        </View>
                        <View onClick={this.calling.bind(this,item.phone)} className="col_name_box">
                          <View className="col_name">{item.phone}</View>
                          <Image className='phone' src={require('@assets/person/guest/tel.png')} mode='widthFix'></Image>
                        </View>
                      </View>
                    </View>
                    <View className="col_top_right" onClick={this.goEdit.bind(this,item.customerId)}>编辑</View>
                  </View>
                  <View className="col_bottom">
                    <View className="col_name">{item.time}</View>
                    <View className="col_name">{item.type}</View>
                  </View>
                </View>
             )
          ))
        }
      </View>
    )
  }

  renderReport() {
    const {reportGuest}=this.state
    return (
      <View className="list__wrap">
        {
          reportGuest.map(item => (
             reportGuest.length === 0 ? '' : (
                <View className="col" key={item.goodsId}>
                  <View className="col_top">
                    <View className="col_top_left">
                      <View className="col_message_box">
                        <View className="col_name_box">
                          <View className="col_name">{item.name}</View>
                          <Image className='sex' src={item.sex==1?require('@assets/person/guest/man.png'):require('@assets/person/guest/women.png')} mode='widthFix'></Image>
                        </View>
                        <View onClick={this.calling.bind(this,item.phone)} className="col_name_box">
                          <View className="col_name">{item.phone}</View>
                          <Image className='phone' src={require('@assets/person/guest/tel.png')} mode='widthFix'></Image>
                        </View>
                      </View>
                    </View>
                    <View className="col_top_right" onClick={this.goEdit.bind(this,item.customerId)}>编辑</View>
                  </View>
                  <View className="col_bottom1">
                      <View className="col_name">备注信息:{item.describe ? item.describe :'暂无'}</View>
                  </View>
                  <View className="col_bottom1">
                    <View className="col_name">预约到访时间:{dayjs(item.createDate).format('YYYY-MM-DD HH:mm:ss')}</View>
                  </View>
                </View>
             )
          ))
        }
      </View>
    )
  }

  render() {
    const isChoose=this.state.isChoose
    return (
      <View className='content1'>
          <View className='content_top'>
              <View className={isChoose?'content_title1':'content_title2'} onClick={this.onChange.bind(this,1)}>
                  <Image className="icon" src={isChoose?require('@assets/person/guest/guest2.png'):require('@assets/person/guest/guest1.png')}  mode="widthFix"/>
                  <View className={isChoose?'title1':'title2'}>我的客户</View>
              </View>
              <View className={isChoose?'content_title2':'content_title1'} onClick={this.onChange.bind(this,2)}>
                  <Image className="icon" src={isChoose?require('@assets/person/guest/report1.png'):require('@assets/person/guest/report2.png')}  mode="widthFix"/>
                  <View className={isChoose?'title2':'title1'}>报备客户</View>
              </View>
          </View>
          <View className='content_bottom'>
            <ScrollView
              scrollY
              scroll-with-animation
              enable-back-to-top
              className="list"
              style={{
                height: '60vh'
              }}>

              {isChoose&&this.renderGuest()}
              {!isChoose&&this.renderReport()}

            </ScrollView>
          </View>
      </View>
    )
  }
}
