import { Dialog, Picker, Popup, Toast, Uploader, UploaderValueItem, hooks } from 'react-vant';
import './index.less'
import React, { useRef, useState } from "react";
import downArrow from './../../assets/images/downArrow.png'
import api from '~/api';
export const InviteBusiness: React.FC = (props: any) => {
  let imgList: UploaderValueItem[] = []
  const [careerVisible, setCareerVisible] = useState(false)
  const [sexVisible, setSexVisible] = useState(false)
  const [projectVisible, setProjectVisible] = useState(false)
  const [businessForm, updateBusinessForm] = hooks.useSetState({
    career: 0,
    careerName: '',
    sexName: '',
    document: '',
    name: '',
    phone: '',
    project: 0,
    projectName: '',
    reason: '',
    sex: 0,
    wechar: ''
  })
  const submitBusinessForm = () => {
    if (!businessForm.name) {
      Toast({
        type: 'fail',
        message: "请填写名字"
      })
      return

    }
    if (!businessForm.sex) {
      Toast({
        type: 'fail',
        message: "请填写性别"
      })
      return


    }
    if (!businessForm.career) {
      Toast({
        type: 'fail',
        message: "请填写职业"
      })
      return

    }
    if (imgList.length == 0) {
      console.log(imgList)
      Toast({
        type: 'fail',
        message: "请上传图片"
      })
      return
    }
    if (!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(businessForm.phone)) {
      Toast({
        type: 'fail',
        message: "请填写正确电话号码"
      })
      return

    }
    if (!businessForm.wechar) {
      Toast({
        type: 'fail',
        message: "请填写微信号"
      })
      return

    }
    if (!businessForm.project) {
      Toast({
        type: 'fail',
        message: "请填写代理项目"
      })
      return

    }
    if (!businessForm.reason) {
      Toast({
        type: 'fail',
        message: "请填写缘由"
      })
      return

    }
 
    Dialog.confirm({
      title: '提交',
      message: '是否提交你的表单',
    }).then(async () => {

      if (imgList.length > 0) {
        let data1 = new FormData()
        data1.append('coverFiles', imgList[0].file as File)
        data1.append('businessType', '招商文件')
        let res1
        try {
          res1 = await api.openApiFileInfoFileUp(data1)
        }
        catch (e) {
          Toast('图片上传失败')
        }

        api.openApiAentInfo({ ...businessForm, document: res1?.data.data }).then(res => {
          if (res.data.code == 200) {
            Toast.success({
              message: '上传成功'
            })
          }

        })
      }

    })



  }

  return (
    <div className="bg">
      <div className="form">
        <div className="content">
          <div className="field">
            <div className="left">姓名</div>
            <div className='right'> <input value={businessForm.name} onChange={val => updateBusinessForm({ name: val.target.value })} placeholder="请填写姓名" type="text" /></div>

          </div>
          <div onClick={() => setSexVisible(true)} className="field">

            <div className="left">性别</div>
            <div className='right'>
              <input readOnly={true} value={businessForm.sexName} placeholder="请选择性别" type="text" />
              <img src={downArrow}></img>
            </div>

          </div>
          <div onClick={() => setCareerVisible(true)} className="field">
            <div className="left">职业</div>
            <div className='right'>  <input readOnly={true} value={businessForm.careerName} placeholder="请选择职业" type="text" /> <img src={downArrow}></img></div>

          </div>
          <div className='upload' style={{ 'background': 'transparent' }} >
            <Uploader
              upload-text="上传图片"
              maxCount={1}
              accept='*'
              value={imgList}
              onChange={v => { imgList = v, console.log(imgList) }
              }
            />
            <div style={{ color: '#adb4bf' }}>
              请上传身份证或驾照或营业执照等 身份证明
            </div>
          </div>
          <div className="field">
            <div className="left">手机</div>
            <div className='right'>
              <input onChange={(val) => updateBusinessForm({
                phone: val.target.value

              })} value={businessForm.phone} placeholder="请填写手机" type="text" />
            </div>

          </div>
          <div className="field">
            <div className="left">微信</div>
            <div className='right'>
              <input onChange={(val) => updateBusinessForm({
                wechar: val.target.value

              })} value={businessForm.wechar} placeholder="请填写微信号" type="text" />
            </div>

          </div>
          <div onClick={() => { setProjectVisible(true) }} className="field">
            <div className="left">代理项目</div>
            <div className='right'>
              <input readOnly value={businessForm.projectName} placeholder="请选择代理项目" type="text" />
              <img src={downArrow}></img>
            </div>

          </div>
          <div style={{

            'borderRadius': '2.5vw',
            'padding': '1.5vw'
          }} className="field">
            <textarea value={businessForm.reason} onChange={val => updateBusinessForm({
              reason: val.target.value
            })} style={{ 'background': 'transparent', outline: 'none', 'border': 'none', height: '50vw', width: '100%' }} placeholder='请写出你的加盟缘由'></textarea>
          </div>
        </div>
        <div className='submit'>
          <div onClick={() => submitBusinessForm()} className='button1'>提交</div>
        </div>
      </div>
      <Popup position='bottom' visible={projectVisible} onClose={() => setProjectVisible(false)}>
        <Picker
          title='代理项目'
          onCancel={() => setProjectVisible(false)}
          onConfirm={(val: string, item: string, index: number | undefined) => {
            setProjectVisible(false)
            updateBusinessForm({
              project: index === undefined ? 0 : (index + 1),
              projectName: val
            })
            return val
          }}

          columns={[
            '软件代理', '书籍代理', '软件+书籍', '软件开发'

          ]}
        />
      </Popup>
      <Popup position='bottom' visible={careerVisible} onClose={() => setCareerVisible(false)}>
        <Picker
          title='职业'
          onCancel={() => setCareerVisible(false)}
          onConfirm={(val: string, item: string, index: number | undefined) => {
            setCareerVisible(false)
            updateBusinessForm({
              career: index === undefined ? 0 : (index + 1),
              careerName: val
            })
            return val
          }}

          columns={[
            '教练', '驾校', '自媒体', '相关从业者'

          ]}
        />
      </Popup>
      <Popup position='bottom' visible={sexVisible} onClose={() => setSexVisible(false)}>
        <Picker
          title='性别'
          onCancel={() => setSexVisible(false)}
          onConfirm={(val: string, item: string, index: number | undefined) => {
            setSexVisible(false)
            updateBusinessForm({
              sex: index === undefined ? 0 : (index + 1),
              sexName: val
            })
            return val
          }}

          columns={[
            '男', '女'

          ]}
        />
      </Popup>
    </div>
  )

}