import { useState, useEffect } from 'react'
import { ScrollView, Input, Picker } from '@tarojs/components'
import { fetch } from '@/utils/request'
import { API_SAVE_CUSTOMER_INFO } from '@/constants/api'
import Taro from '@tarojs/taro'
import './index.scss'

export default function EditUserDetailBasicInfo (props) {
  const { Data = {}, close = () => { }, CustomerId = null } = props

  const [FormData, setFormData] = useState({ ...Data })
  const [Sex, setSex] = useState(Data?.sex - 0 === 1 ? '男' : '女')
  const [Age, setAge] = useState(Data?.age || null)
  const [HouseholdIncome, setHouseholdIncome] = useState(Data?.householdIncome || null)
  const [EstimatedPurchaseTime, setEstimatedPurchaseTime] = useState(Data?.estimatedPurchaseTime || null)

  const [SexList] = useState(['男', '女'])
  const [AgeRange] = useState(['18-25', '26-30', '30-35', '36-45', '46-50', '50-60', '60以上'])
  const [IncomeRange] = useState(['10万以下', '10-15万', '15-20万', '20-30万', '30-50万', '50-75万', '75-100万', '100万以上'])
  const [BuyTimeRange] = useState(['1月以内', '1至3月', '半年以内', '一年以内', '一年以上'])
  const [CanSubmit, setCanSubmit] = useState(false)

  useEffect(() => {
    if (CanSubmit) {
      setCanSubmit(false)
      ToSubmit()
    }
  }, [CanSubmit])

  const ToSubmit = () => {
    let params = { ...FormData, customerId: CustomerId }
    let url = Data.customerId ? `${API_SAVE_CUSTOMER_INFO}/${Data.customerId}` : API_SAVE_CUSTOMER_INFO
    fetch({ url, method: Data.customerId ? 'put' : 'post', payload: params }).then(() => {
      Taro.showToast({ title: '修改成功', icon: 'none', duration: 2000 })
      close()
    }).catch(() => {
      setCanSubmit(false)
    })
  }

  const PickerChange = (key, e) => {
    let resData = FormData
    if (key === 'age') {
      resData[key] = AgeRange[e.detail.value]
      setAge(AgeRange[e.detail.value])
    } else if (key === 'householdIncome') {
      resData[key] = IncomeRange[e.detail.value]
      setHouseholdIncome(IncomeRange[e.detail.value])
    } else if (key === 'estimatedPurchaseTime') {
      resData[key] = BuyTimeRange[e.detail.value]
      setEstimatedPurchaseTime(BuyTimeRange[e.detail.value])
    } else if (key === 'sex') {
      resData[key] = SexList[e.detail.value] === '男' ? 1 : 2
      setSex(SexList[e.detail.value])
    }
    setFormData(resData)
  }

  const InputChange = (key, e) => {
    let resData = FormData
    resData[key] = e.detail.value
    setFormData(resData)
  }

  const Submit = () => {
    if (!CanSubmit) {
      setCanSubmit(true)
    }
  }

  return (
    <view className='components EditUserDetailBasicInfo'>
      <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='请输入姓名' value={FormData.name} onInput={InputChange.bind(this, 'name')}></Input>
            </view>
          </view>

          {/* <text>昵称</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入昵称' value={FormData.nickname} onInput={InputChange.bind(this, 'nickname')}></Input>
            </view>
          </view> */}

          <text>手机号码</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入手机号码' value={FormData.phone} onInput={InputChange.bind(this, 'phone')}></Input>
            </view>
          </view>

          <text>性别</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker onChange={PickerChange.bind(this, 'sex')} value={null} range={SexList}>
                <text>{Sex || '请选择'}</text>
              </Picker>
            </view>
            <text className='iconfont icon-jiantoudown'></text>
          </view>

          <text>家庭住址</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入家庭住址' value={FormData.homeAddress} onInput={InputChange.bind(this, 'homeAddress')}></Input>
            </view>
          </view>

          <text>工作地址</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入工作地址' value={FormData.firmAddress} onInput={InputChange.bind(this, 'firmAddress')}></Input>
            </view>
          </view>

          <text>年龄段</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker onChange={PickerChange.bind(this, 'age')} value={null} range={AgeRange}>
                <text>{Age || '请选择'}</text>
              </Picker>
            </view>
            <text className='iconfont icon-jiantoudown'></text>
          </view>

          <text>职业</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入职业' value={FormData.career} onInput={InputChange.bind(this, 'career')}></Input>
            </view>
          </view>

          <text>家庭年收入范围</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker onChange={PickerChange.bind(this, 'householdIncome')} value={null} range={IncomeRange}>
                <text>{HouseholdIncome || '请选择'}</text>
              </Picker>
            </view>
            <text className='iconfont icon-jiantoudown'></text>
          </view>

          <text>家庭成员数</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入家庭成员数' value={FormData.familyNumber} onInput={InputChange.bind(this, 'familyNumber')}></Input>
            </view>
          </view>

          <text>已有房产数</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入已有房产数' value={FormData.houseNumber} onInput={InputChange.bind(this, 'houseNumber')}></Input>
            </view>
          </view>

          <text>已有车辆数</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入已有车辆数' value={FormData.carNumber} onInput={InputChange.bind(this, 'carNumber')}></Input>
            </view>
          </view>

          <text>预计购房时间</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker onChange={PickerChange.bind(this, 'estimatedPurchaseTime')} value={null} range={BuyTimeRange}>
                <text>{EstimatedPurchaseTime || '请选择'}</text>
              </Picker>
            </view>
            <text className='iconfont icon-jiantoudown'></text>
          </view>

          <text>客户咨询重点</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input value={FormData.consultation} placeholder='请填写  如：地段、交通、社区配套、户型、价格等' onInput={InputChange.bind(this, 'consultation')}></Input>
            </view>
          </view>

          <text>购房动机</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input value={FormData.motivation} placeholder='请填写 如结婚、养老、二孩、改善、学区、投资等' onInput={InputChange.bind(this, 'motivation')}></Input>
            </view>
          </view>

          <text>客户抗性分析</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input value={FormData.resistanceAnalysis} placeholder='请填写  如：地段、交通、社区配套、户型、价格等' onInput={InputChange.bind(this, 'resistanceAnalysis')}></Input>
            </view>
          </view>

          <text>客户对项目认可点</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input value={FormData.approval} placeholder='请填写  如：地段、交通、社区配套、户型、价格等' onInput={InputChange.bind(this, 'approval')}></Input>
            </view>
          </view>

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

          <view className='Btn'>
            <text onClick={Submit}>提交</text>
          </view>

        </view>
      </ScrollView>
    </view>
  )
}
