import { useState, useEffect } from 'react'
import withLayout from '@/layout'
import { ScrollView, Input, Image, Block } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import { fetch } from '@/utils/request'
import { API_REPORT_CUETOMER, API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from '@/constants/api'
import { ROLE_CODE } from '@/constants/user'
import Taro from '@tarojs/taro'
import Picker from '@/components/Picker'
import BuildingPicker from './components/BuildingPicker'
import ConsultantPicker from './components/ConsultantPicker'
import getSubmitor from './getSubmitor'
import './index.scss'

const defaultSpecialImage = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg'

const sexDicts = [
  { name: '男', id: '1' },
  { name: '女', id: '2' },
]

export default withLayout((props) => {
  const { router, person } = props
  const { personId, personType } = person
  const { buildingId : originBuiding } = router.params

  const [loading, setLoading] = useState(false)
  const [buildingId, setBuildingId] = useState(null)
  const [CardId, setCardId] = useState(null)
  const [SexId, setSexId] = useState(null)
  const [FormData, setFormData] = useState({
    name: '', // 姓名
    phone: '', // 电话
    sex: '', // 性别
    intention: '', // 意向楼盘
    realtyConsultant: '', // 置业顾问
    remark: '', // 描述
  })

  const postSubmit = getSubmitor(person)

  useEffect(() => {
    console.log('------originBuiding------>', originBuiding)
    if(originBuiding) {
      setBuildingId(originBuiding)
    }
  }, [originBuiding])

  const preSubmit = (payload) => {
    if (payload.name === '') {
      Taro.showToast({ title: '请填写客户姓名', icon: 'none' })
      return false
    }
    if (SexId === null) {
      Taro.showToast({ title: '请选择客户性别', icon: 'none' })
      return false
    }
    if (payload.phone === '') {
      Taro.showToast({ title: '请填写客户电话', icon: 'none' })
      return false
    }
    if (!(/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(payload.phone)) || payload.phone.length != 11) {
      Taro.showToast({ title: '请填写正确的客户电话', icon: 'none' })
      return false
    }
    if (buildingId === null && personType !== ROLE_CODE.CONSULTANT && personType !== ROLE_CODE.CUSTOMER) {
      Taro.showToast({ title: '请选择客户的意向楼盘', icon: 'none' })
      return false
    }
    return true
  }

  const onSubmit = () => {
    const payload = personType === ROLE_CODE.CONSULTANT ?
      {
        name: FormData.name, // 姓名
        phone: FormData.phone, // 电话
        sex: SexId, // 性别
        describe: FormData.describe, // 描述
      } :
      {
        ...FormData,
        sex: SexId,
        buildingId,
        realtyConsultant: CardId
      };
    
    if (!preSubmit(payload)) {
      return;
    }

    setLoading(true)
    postSubmit(payload).then(() => {
      setLoading(false)
      Taro.showToast({ title: '操作成功', icon: 'none' })
      
      const t = setTimeout(() => {
        Taro.navigateBack({ delta: 1 })
        clearTimeout(t)
      }, 1500)
    }).catch((err) => {
      console.error(err)
      setLoading(false)
    })
  }

  const FormInput = (e) => {
    let Data = { ...FormData }
    Data[e.currentTarget.dataset.type] = e.detail.value
    setFormData(Data)
  }

  const BuildingChange = (e) => {
    setBuildingId(e)
  }

  return (
    <view className='Page addCustomer'>

      <ScrollView scroll-y refresher-enabled={false} refresher-background='#fff'>
        <view className='PageContent'>

          <text>客户姓名</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入客户真实姓名' data-type='name' onInput={FormInput.bind(this)}></Input>
            </view>
          </view>

          <text>客户电话</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入手机号' data-type='phone' onInput={FormInput.bind(this)}></Input>
            </view>
          </view>

          <text>性别</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker kv={['name', 'id']} dicts={sexDicts} onChange={setSexId} value={SexId} />
            </view>
            {/* <text className='iconfont icon-jiantoudown'></text> */}
          </view>

          {
            personType !== ROLE_CODE.CONSULTANT &&
            <Block>
              <text>意向楼盘</text>
              <view className='FormLine flex-h'>
                <view className='flex-item'>
                  <BuildingPicker change={BuildingChange} value={buildingId} type={personType} />
                </view>
              </view>

              <text>内场接待（选填）</text>
              <view className='FormLine flex-h'>
                <view className='flex-item'>
                  <ConsultantPicker onChange={setCardId} value={CardId} buildingId={buildingId} />
                </view>
                {/* <Image mode='heightFix' src={defaultSpecialImage}></Image>
                <text>选择</text> */}
              </view>

              <text>备注</text>
              <view className='FormLine flex-h'>
                <view className='flex-item'>
                  <Input placeholder='补充说明（选填）' data-type='remark' onInput={FormInput.bind(this)}></Input>
                </view>
              </view>
            </Block>
          }

          <view className='Btn'>
            <button loading={loading} onClick={onSubmit}>提交</button>
          </view>

        </view>
      </ScrollView>

    </view>
  )
})
