import React, { useCallback, useRef, useState } from 'react'
import styles from './index.module.scss'
import TopCom from '@/components/TopCom'
import { Button, Form, FormInstance, Input } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { MessageFu } from '@/utils/message'
import { A8_APIcodeSave } from '@/store/action/all'
import history from '@/utils/history'
function A81codeAuth() {
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null)

  // useEffect(() => {
  //   FormBoxRef.current?.setFieldsValue({
  //     name: '王大锤',
  //     phone: '18702025091',
  //     unit: '阿三大苏打'
  //   })
  // }, [])

  // 邀请码
  const [code, setCode] = useState('')

  // 没有通过校验
  const onFinishFailed = useCallback(() => {}, [])

  //  通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      if (code.length !== 6) return MessageFu.warning('请输入6个字符邀请码!')

      const obj = {
        ...values,
        code
      }
      const res = await A8_APIcodeSave(obj)
      if (res.code === 0) {
        MessageFu.success('已完成认证!')
        history.push('/')
      }
    },
    [code]
  )

  return (
    <div className={styles.A81codeAuth}>
      <TopCom txt='邀请码认证' />
      <div className='A81main'>
        <div className='A81Center'>
          <Form
            ref={FormBoxRef}
            name='basic'
            // labelCol={{ span: 3 }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete='off'
            scrollToFirstError
          >
            {/* 第一个卡片 */}
            <div className='A81lKa A81lKa0'>
              <div className='A81tit'>
                <span>* </span>邀请码
              </div>
              <div className='A81lKa0Right'>
                <Input
                  placeholder='请输入6个字符邀请码'
                  maxLength={6}
                  value={code}
                  onChange={e => setCode(e.target.value.trim())}
                />
              </div>
            </div>

            {/* 第二个卡片 */}
            <div className='A81lKa'>
              <div className='A81tit'>负责人信息</div>

              <Form.Item
                label='负责人姓名'
                name='name'
                rules={[{ required: true, message: '请输入负责人姓名!' }]}
                getValueFromEvent={e => e.target.value.trim()}
              >
                <Input placeholder='请输入内容' maxLength={6} />
              </Form.Item>

              <Form.Item
                label='联系方式'
                name='phone'
                rules={[
                  { required: true, message: '请输入联系方式!' }
                  // {
                  //   pattern: /^1[3-9][0-9]{9}$/,
                  //   message: '请输入正确格式的手机号!'
                  // }
                ]}
              >
                <Input placeholder='请输入联系方式' maxLength={30} />
              </Form.Item>

              <Form.Item
                className='A81Text'
                label='单位名称'
                name='unit'
                rules={[{ required: true, message: '请输入单位名称!' }]}
                // getValueFromEvent={e => e.target.value.trim()}
              >
                <TextArea placeholder='请输入内容，不超过50个字' maxLength={50} />
              </Form.Item>
            </div>

            <Button className='A81btn' type='primary' htmlType='submit'>
              提交
            </Button>
          </Form>
        </div>
      </div>
    </div>
  )
}

const MemoA81codeAuth = React.memo(A81codeAuth)

export default MemoA81codeAuth
