import React, { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Button, Form, Input, InputNumber, Radio, Space, message } from 'tdesign-react'

const { FormItem } = Form

export default function SubmitForm() {

  const navigate = useNavigate()

  const medicalHistoryOptions = [
    {
      value: '1-3个月',
      label: '1-3个月'
    },
    {
      value: '半年以内',
      label: '半年以内'
    },
    {
      value: '半年-1年',
      label: '半年-1年'
    },
    {
      value: '1年以上',
      label: '1年以上'
    },
    {
      value: '无',
      label: '无'
    }
  ]

  const participatedOptions = [
    {
      value: '心理咨询',
      label: '心理咨询'
    },
    {
      value: '心理测量',
      label: '心理测量'
    },
    {
      value: '无',
      label: '无'
    }
  ]

  const rules = {
    name: [{ required: true }],
    sex: [{ required: true }],
    age: [{ required: true }],
    career: [{ required: true }],
    address: [{ required: true }],
    illness: [{ required: true }],
    medical_history: [{ required: true }],
    participated: [{ required: true }],
  }

  const { type } = useParams()

  useEffect(() => {
    console.log('type', type)
  }, [type])

  const onReset = () => {

  }

  const onSubmit = (context) => {
    console.log('context', context)
    if (context.validateResult === true) {
      navigate(type === 'measurement' ? '/talking_m' : '/talking_c', { replace: true })
    }
  }

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      paddingTop: '40px'
    }}>
      <Form resetType='empty' colon onReset={onReset} onSubmit={onSubmit} rules={rules}>
        <FormItem label="姓名" name="name">
          <Input placeholder="请输入姓名" />
        </FormItem>
        <FormItem label="性别" name="sex">
          <Radio.Group>
            <Radio value='男'>男</Radio>
            <Radio value='女'>女</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem label="年龄" name="age">
          <InputNumber max={150} min={0} placeholder='请输入年龄' />
        </FormItem>
        <FormItem label="职业" name="career">
          <Input placeholder="请输入职业" />
        </FormItem>
        <FormItem label="居住地" name="address">
          <Input placeholder="请输入居住地" />
        </FormItem>
        <FormItem label="躯体疾病" name="illness">
          <Input placeholder="请输入躯体疾病" />
        </FormItem>
        <FormItem label="病史长度" name="medical_history">
          <Radio.Group options={medicalHistoryOptions} allowUncheck />
        </FormItem>
        <FormItem label="以前接受过" name="participated">
          <Radio.Group options={participatedOptions} allowUncheck />
        </FormItem>
        <FormItem style={{ marginLeft: 100 }}>
          <Button theme="primary" type="submit" style={{ marginRight: 10 }}>
            提交
          </Button>
          <Button theme="default" variant="base" type="reset">
            重置
          </Button>
        </FormItem>
      </Form>
    </div>
  )
}
