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

import { useState } from 'react'
import { Button, Form, Input, message, Modal } from "antd"
import BelongPeople from '../../../../components/BelongPeople/BelongPeople.tsx'
export default function EditThree(props: any) {
  const [form] = Form.useForm();
  const height = window.innerHeight - 350;
  const handleSubmit = () => {

    form.submit();
    props.setEditProcess(4);

  };
  const onFinish = (values: any) => {
    console.log('Success:', values);
    props.setEditProcess(4);
  };
  const [belongPeopleInfo, setBelongPeopleInfo] = useState({
    authorName: '',
    authorType: '',
    authorIdCardType: '',
    authorIdCard: '',
    authorCrcAccount: 0,
    authorId: '',
    authorProvinceCity: '',
    authorCrcAccountPassword: '',
    authorCrcAccountUsername: ''
  })
  const [belongModal, setBelongModal] = useState(false)
  const setValue = (value: string) => {
    form.setFieldsValue({
      projOwnerName: value
    })
  }
  return (
    <div className='editOneTwo'>
      <div className='topLine'></div>
      <div className='' style={{
        height: height,
        // background: 'pink'
        padding: '50px 50px',
        boxSizing: 'border-box',
      }}>
        <Form form={form} onFinish={onFinish}
          onFinishFailed={(errorInfo) => {
            errorInfo.errorFields.forEach((field) => {
              if (field.errors.length > 0) {
                // 显示每条错误信息
                message.error(field.errors[0]);
              }
            });
          }}
        >

          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            width: '900px',
          }}>

            <div className='appInfoFormInput' style={{
              // background: 'pink',
              position: 'relative',
            }}>
              <div className='FormInputTitle'>产权所属者<span style={{ color: 'red', }}>*</span>：</div>
              <Form.Item name="projOwnerName" label="" rules={[{ required: true, message: '请选择/创建知识产权所属者' },

              ]}>
                <Input
                  style={{
                    width: '300px',
                    height: '42px',
                  }} placeholder="请选择/创建知识产权所属者" />
              </Form.Item>
              <div style={{
                display: belongPeopleInfo.authorId ? 'none' : 'unset',
                position: 'absolute',
                width: '300px',
                height: '42px',
                top: '0',
                right: '0',
                // background: 'skyblue',
                textAlign: 'right',
                lineHeight: '42px',
                cursor: 'pointer',
                paddingRight: '10px',
                color: '#1F79FF',

              }}
                onClick={() => {
                  setBelongModal(true)
                }}
              >
                选择
              </div>
              <div style={{
                display: belongPeopleInfo.authorId ? 'unset' : 'none',
                position: 'absolute',
                width: '300px',
                height: '42px',
                top: '0',
                right: '0',
                // background: 'skyblue',
                textAlign: 'right',
                lineHeight: '42px',
                paddingRight: '10px',
                color: '#1F79FF',

              }}

              >
                <span
                  style={{
                    cursor: 'pointer',

                  }}
                  onClick={() => {
                    setValue('')
                    setBelongPeopleInfo({
                      authorName: '',
                      authorType: '',
                      authorIdCardType: '',
                      authorIdCard: '',
                      authorCrcAccount: 0,
                      authorId: '',
                      authorProvinceCity: '',
                      authorCrcAccountUsername: '',
                      authorCrcAccountPassword: '',
                    })
                  }}> 取消</span>
              </div>
            </div>


          </div>

        </Form>

      </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={belongModal}
        width={1200}

        footer={null}
        onCancel={() => {
          setBelongModal(false)

        }}>

        <BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}></BelongPeople>
      </Modal>
    </div>
  )
}