import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { Image, Block } from '@tarojs/components'
import { formatDate } from '@/utils/chatDate'
import { fetch } from '@/utils/request'
import { API_INVALID } from '@/constants/api'
import './index.scss'

export default function ResidentListItem (props) {
  const { data = {} } = props

  const [Status, setStatus] = useState(null)

  useEffect(() => {
    setStatus(data.status)
  }, [])

  const ToUnVisable = () => {
    Taro.showModal({
      title: '提示',
      content: '是否确定更改为无效？',
      success (res) {
        if (res.confirm) {
          fetch({ url: API_INVALID, method: 'put', payload: { type: data.type, id: data.id } }).then(() => {
            Taro.showToast({ title: '审核成功', icon: 'none', duration: 2000 })
            setStatus(3)
          })
        }
      }
    })
  }
  return (
    <view className='components ResidentListItem'>
      <view className='flex-h'>
        <text>客户姓名：</text>
        <view className='flex-item'>
          <text>{data.name}</text>
        </view>
        {/* {
          data.customerStatus - 0 === 1 &&
          <text className='Status'>已报备</text>
        } */}
        {
          data.customerStatus - 0 === 1 && Status - 0 !== 3 &&
          <text className='Status' onClick={() => { Taro.navigateTo({ url: `/subpackages/pages/marketing/sureVisit/index?id=${data.id}` }) }}>到访确认</text>
        }
      </view>
      <view className='flex-h'>
        <text>手机号码：</text>
        <view className='flex-item'>
          <text>{data.phone}</text>
        </view>
        {
          data.customerStatus - 0 === 1 &&
          <Block>
            <Image mode='heightFix' src={require('@/assets/mine-icon29.png')}></Image>
            <text className='Type'>报备</text>
          </Block>
        }
        {
          data.customerStatus - 0 === 2 &&
          <Block>
            <Image mode='heightFix' src={require('@/assets/mine-icon30.png')}></Image>
            <text className='Type'>到访</text>
          </Block>
        }
        {
          data.customerStatus - 0 === 3 &&
          <Block>
            <Image mode='heightFix' src={require('@/assets/mine-icon33.png')}></Image>
            <text className='Type'>认筹</text>
          </Block>
        }
        {
          data.customerStatus - 0 === 4 &&
          <Block>
            <Image mode='heightFix' src={require('@/assets/mine-icon32.png')}></Image>
            <text className='Type'>签约</text>
          </Block>
        }
        {
          data.customerStatus - 0 === 5 &&
          <Block>
            <Image mode='heightFix' src={require('@/assets/mine-icon31.png')}></Image>
            <text className='Type'>结佣</text>
          </Block>
        }
        {/* <Image mode='heightFix' src={require('@/assets/mine-icon27.png')}></Image> */}
      </view>
      <view className='flex-h'>
        <text>报备经纪：</text>
        <view className='flex-item'>
          <text>{data.recommendPersonName}  {data.recommendPersonPhone}（{data.type === 'customer' ? '客户' : data.consultant ? '置业顾问' : data.channelName || '经纪人'}）</text>
        </view>
      </view>
      <view className='flex-h'>
        <text>报备时间：</text>
        <view className='flex-item'>
          <text>{formatDate(data.createDate, 'yyyy/M/d')}</text>
        </view>
      </view>
      <view className='Opt'>
        {
          !(data.type === 'report' && data.channelStatus - 0 === 3) &&
          <text className='active' onClick={() => { Taro.navigateTo({ url: `/subpackages/pages/marketing/changeVisit/index?id=${data.id}&name=${data.name}&buildingId=${data.buildingId}&type=${data.type}&channelId=${data.channelId}` }) }}>更新交易</text>
        }
        {
          data.type === 'report' && data.channelStatus - 0 === 1 && Status - 0 !== 3 &&
          <text onClick={ToUnVisable}>无效</text>
        }
        {
          data.type === 'report' && Status - 0 === 3 &&
          <text>无效</text>
        }
      </view>
    </view>
  )
}
