system-copyright-react/src/route/TrademarkMall/components/EditThree/EditThree.tsx

import { useState } from 'react'
import { Button, Form, Input, message, Modal, Radio } from "antd"
import {
  PlusOutlined
} from '@ant-design/icons';
import './edit-three.css'
export default function EditThree(props: any) {
  // const [form] = Form.useForm();
  const [formA] = Form.useForm<any>(); // 
  const onFinishA = (values:any) => {
    console.log(values);
    
  }
  const height = window.innerHeight - 350;
  const [addPeopleModal, setAddPeopleModal] = useState(false)

  const [applicantType, setApplicantType] = useState('1') //申请人类型
  const applicantTypeChange = (e: any) => {
    setApplicantType(e.target.value)
  }
  const [qualifications, setQualifications] = useState('1') //资质类型
  const qualificationsChange = (e: any) => {
    setQualifications(e.target.value)
  }
  const handleSubmit = () => {
    // form.submit();
    props.setEditProcess(4);

  };

  return (
    <div className='editOneTwo'>
      <div className='topLine'></div>
      <div className='' style={{
        height: height,
        // background: 'pink'
        padding: '50px 50px',
        boxSizing: 'border-box',
      }}>
        <div>
          <div className='editFormItem'>
            <div className='editFormItemTitle'>
              选择申请人<span className='redTitle' >*</span>：
            </div>
            <div style={{
              // background:'pink',
              position: 'relative'
            }}>
              <Input style={{
                width: 300,
                height: 46,
                background: '#FFF',
                // color: 'black'
              }}
                placeholder="选择申请人"></Input>
              <div style={{
                position: 'absolute',
                width: 290,
                height: '46px',
                top: '0',
                right: '0',
                // background: 'skyblue',
                // textAlign: 'right',
                // lineHeight: '42px',
                cursor: 'pointer',
                paddingRight: '10px',
                color: '#1F79FF',
              }}>

              </div>
            </div>
          </div>
          <div className='addPeopleBox' onClick={() => {
            setAddPeopleModal(true)
          }}>
            <div style={{
              fontSize: 30,

            }}><PlusOutlined /></div>
            <div style={{
              // fontSize:16
              marginTop: 10
            }}

            >添加新申请人</div>
          </div>
        </div>

      </div>
      <div className='topLine'></div>
      <div style={{
        marginTop: '8px',
        display: 'flex',
        justifyContent: 'flex-end',
      }}>
        <Button
          style={{
            width: '100px',
            height: '40px',
            borderRadius: '5px',
          }}
          onClick={() => {
            props.setEditProcess(2)
          }}
        >上一步</Button>
        <Button
          type='primary'
          style={{
            width: '100px',
            height: '40px',
            borderRadius: '5px',
            marginLeft: '10px',
          }}
          onClick={() => {
            handleSubmit()
          }}
        >下一步</Button>
      </div>
      <Modal title="新建申请人"
        destroyOnClose
        centered
        open={addPeopleModal}
        width={1000}
        footer={null}
        onCancel={() => {
          setAddPeopleModal(false)

        }}>
        <div>
          <div className='addPeopleTitle'>申请人信息</div>
          <div className='addPeopleItem' style={{
          }}>
            <div className='addPeopleItemTitle'>
              申请人类型<span className='redTitle'>*</span>：
            </div>
            <div style={{
              marginLeft: '2px',
            }}>
              <Radio.Group
                onChange={applicantTypeChange} value={applicantType}
              >
                <Radio value="1">个人个体工商户</Radio>
                <Radio value="2">企业</Radio>
              </Radio.Group>
            </div>
          </div>
          <div className='redTips'>
            营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业)
          </div>
          <div className='redTips'>
            申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人
          </div>
          <div style={{
            display: applicantType == '1' ? 'unset' : 'none'
          }}>
            <div className='addPeopleItem' style={{
            }}>
              <div className='addPeopleItemTitle'>
                资质类型<span className='redTitle'>*</span>：
              </div>
              <div style={{
                marginLeft: '2px',
              }}>
                <Radio.Group
                  onChange={qualificationsChange} value={qualifications}
                >
                  <Radio value="1">个人</Radio>
                  <Radio value="2">体工商户</Radio>
                </Radio.Group>
              </div>
            </div>
            <Form
              name="FormA"
              form={formA}
              onFinish={onFinishA}
              onFinishFailed={(errorInfo) => {
                // console.log(errorInfo)
                // message.error('请填写完整的信息!')
                errorInfo.errorFields.forEach((field) => {
                  if (field.errors.length > 0) {
                    // 显示每条错误信息
                    message.error(field.errors[0]);
                  }
                });
              }}
              initialValues={{ softWare: '' }}
              style={{ marginTop: 20 }}
            >
              <div className='editFormItem'>
                <div className='editFormItemTitle'>
                  商标名称<span className='redTitle' >*</span>：
                </div>

                <div style={{
                  // background:'pink',
                  position: 'relative',
                }}>
                  <Form.Item
                    name="trademarkName"
                    rules={[{ required: true, message: '请输入商标名称' }]}
                  >
                    <Input style={{
                      width: 600,
                      height: 46,
                      background: '#FFF',
                      color: 'black'
                    }}
                      placeholder="商标名称"
                    >
                    </Input>

                  </Form.Item>


                </div>


              </div>




            </Form>
          </div>
        </div>
      </Modal>
    </div>
  )
}