import { useState, useEffect } from 'react'
import { Button, Form, Input, message, Modal, Radio, Upload, Image, Spin, Cascader, Table } from "antd"
import type { TableColumnsType } from 'antd';
import { uploadImageUrl, showImage } from '../../../../request/request'
import { addTrademarkApplicant, trademarkApplicantList, deleteTrademarkApplicant, trademarkApplicantDetails, updateTrademarkApplicant, submitTrademarkApplicant } from '../../../../request/api'
import {
  PlusOutlined
} from '@ant-design/icons';
import './edit-three.css'
import personCard from '../../../../static/editThree/personCard.png'
import personLicense from '../../../../static/editThree/personLicense.png'
import individualLicense from '../../../../static/editThree/individualLicense.png'
import { getCityList } from '../../../../request/api'
interface Option {
  value?: string | number | null;
  label: React.ReactNode;
  children?: Option[];
  isLeaf?: boolean;
  // id: string;
  // pId: string;
}
import useMessage from "antd/es/message/useMessage";
// interface DataType {
//   key: React.Key;
//   name: string;
//   age: number;
//   address: string;
//   trademarkUserId: string;
// }
const { Search } = Input;
export default function EditThree(props: any) {
  // 申请人信息

  // const [applicantData, setApplicantData] = useState({
  //   name: '',
  //   trademarkUserId: '',
  // })
  // 获取联系人详情
  const getContactDetails = async (trademarkUserId: string) => {
    try {
      const res: any = await trademarkApplicantDetails(trademarkUserId)
      console.log(res);
      if (res.type == '1') {
        setApplicantType('1')
        setQualifications(res.subType)
        setPersonalIdCard([
          {
            uid: res.identityPhoto,
            name: res.identityPhoto,
            status: 'done',
            url: showImage(res.identityPhoto, false)
          }
        ])
        setPersonalLicense([
          {
            uid: res.businessLicense,
            name: res.businessLicense,
            status: 'done',
            url: showImage(res.businessLicense, false)
          }
        ])
        // console.log(res.rangeAddress.split(',')[0]);
        const rangeAddressArray = res.rangeAddress.split(',');
        // 检查省份 ID 是否存在
        if (rangeAddressArray.length > 0) {
          const provinceId = rangeAddressArray[0];
          const provinceOption = areaArray.find(option => option.value === provinceId);
          if (provinceOption) {
            // 加载该省份下的城市
            loadCityList([provinceOption]);
          }
        }
        // getLoadProvinces(res.rangeAddress.split(',')[0])
        // 给formA表单赋值
        formA.setFieldsValue({
          identityPhoto: res.identityPhoto,
          identity: res.identity,
          businessLicense: res.businessLicense,
          businessLicenseIdcard: res.businessLicenseIdcard,
          name: res.name,
          rangeAddress: res.rangeAddress.split(','),
          address: res.address,
          contactName: res.contactName,
          contactPhone: res.contactPhone,
          contactEmail: res.contactEmail,
          contactAddress: res.contactAddress,
          contactEmailCode: res.contactEmailCode,
        })

      }
      if (res.type == '2') {
        setApplicantType('2')
        setEnterpriseLicense([
          {
            uid: res.businessLicense,
            name: res.businessLicense,
            status: 'done',
            url: showImage(res.businessLicense, false)
          }
        ])
        const rangeAddressArray = res.rangeAddress.split(',');
        // 检查省份 ID 是否存在
        if (rangeAddressArray.length > 0) {
          const provinceId = rangeAddressArray[0];
          const provinceOption = areaArray.find(option => option.value === provinceId);
          if (provinceOption) {
            // 加载该省份下的城市
            loadCityList([provinceOption]);
          }
        }
        formB.setFieldsValue({
          // identityPhoto: res.identityPhoto,
          // identity: res.identity,
          businessLicense: res.businessLicense,
          name: res.name,
          businessLicenseIdcard: res.businessLicenseIdcard,
          rangeAddress: res.rangeAddress.split(','),
          address: res.address,
          contactName: res.contactName,
          contactPhone: res.contactPhone,
          contactEmail: res.contactEmail,
          contactAddress: res.contactAddress,
          contactEmailCode: res.contactEmailCode,
        })

      }
    } catch (error: any) {
      // setAddLoading(false)
      if (error.response) {
        const data = error.response.data;
        messageApi.open({
          type: 'error',
          content: data.msg ? data.msg : `${data.path}(${data.status})`,
        });
      } else {
        console.error(error)
      }
    } finally {
      // setAddLoading(false)
    }
  }
  const [trademarkUserId, setTrademarkUserId] = useState('')
  const [selectPeopleModal, setSelectPeopleModal] = useState(false)
  const [selectedRowKey, setSelectedRowKey] = useState('');
  // 临时选择的申请人信息
  const [nowSelectPeopleData, setNowSelectPeopleData] = useState({
    trademarkUserId: '',
    name: '',
  });
  // 确定选择的申请人信息
  const [confirmSelectPeopleData, setConfirmSelectPeopleData] = useState({
    trademarkUserId: '',
    name: '',
  });
  useEffect(() => {
    if (props.editThreeData.trademarkUserId) {
      setConfirmSelectPeopleData({
        trademarkUserId: props.editThreeData.trademarkUserId,
        name: props.editThreeData.name,
      })

    }
  }, [props.editThreeData])
  const [disabled, setDisabled] = useState(false)
  const [showBtn, setShowBtn] = useState(true)
  const columns: TableColumnsType<any> = [
    // title: '名称',
    // dataIndex: 'invoiceName',
    // align: 'center',
    // width: 180
    {
      title: '序号',
      align: 'center',
      dataIndex: 'trademarkUserId',
      render: (_text, _record, index) => (page - 1) * 5 + index + 1, // 显示序号，从1开始
    },
    {
      title: '申请人',
      align: 'center',

      dataIndex: 'name',
      // render: (text: string) => <a>{text}</a>,
    },
    // {
    //   title: '证件号',
    //   align: 'center',

    //   dataIndex: 'identity',
    //   // render: (text: string) => <a>{text}</a>,
    // },

    {
      title: '申请人类型',
      dataIndex: 'type',
      align: 'center',
      render: (text: string) => <span>{text == '1' ? '个人/个体工商户' : '企业'}</span>,
    },
    {
      title: '联系人',
      dataIndex: 'contactName',
      align: 'center',

    },
    {
      title: '联系人电话',
      dataIndex: 'contactPhone',
      align: 'center',

    },
    {

      title: '操作',
      align: 'center',
      dataIndex: 'operation',
      render: (text: string, record: any) => {
        return (
          <div className="ant-table-cell-operations">
            <Button type="link" onClick={() => {
              // setApplicantData({
              //   name: record.name,
              //   trademarkUserId: record.key as string,
              // })
              setTrademarkUserId(record.trademarkUserId)
              setDisabled(false)
              setAddPeopleModal(true)
              setShowBtn(true)
              getContactDetails(record.trademarkUserId)
            }}>编辑</Button>
            <Button type="link" onClick={() => {
              setDisabled(true)
              setAddPeopleModal(true)
              setTrademarkUserId(record.trademarkUserId)
              getContactDetails(record.trademarkUserId)
              setShowBtn(false)
            }}>查看</Button>
            <Button type="link" onClick={() => {
              setTrademarkUserId(record.trademarkUserId)
              setDeleteModal(true)
            }}>删除</Button>
          </div>
        )
      }
    }
  ];
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [listLoading, setListLoading] = useState(false);
  const [nowSearchKeyWords, setNowSearchKeyWords] = useState('');
  const [searchKeyWords, setSearchKeyWords] = useState('');
  const [tableData, setTableData] = useState<any>([])
  // 获取申请人列表
  const getTrademarkApplicantList = async (page: number) => {
    try {
      setListLoading(true);
      const res: any = await trademarkApplicantList({
        page,
        rows: 5,
        keywords: searchKeyWords
      })

      if (res.rows.length <= 0 && page > 1) {
        setPage(page - 1)
        getTrademarkApplicantList(page - 1)
      } else {
        setTableData(res.rows)
        setTotal(res.total)
        setListLoading(false);
      }

    } catch (error: any) {
      setListLoading(false)
      if (error.response) {
        const data = error.response.data;
        messageApi.open({
          type: 'error',
          content: data.msg ? data.msg : `${data.path}(${data.status})`,
        });
      } else {
        console.error(error)
      }
    } finally {
      setListLoading(false)
    }
  }
  useEffect(() => {
    getTrademarkApplicantList(1)
    setPage(1)
  }, [searchKeyWords])

  // 加载省份数据
  const getLoadProvinces = async (cityId: string) => {
    try {
      // 假设传入空字符串获取省份列表
      const res: any = await getCityList(cityId);
      const provinces = res.map((province: any) => ({
        value: province.areaId,
        label: province.areaName,
        children: [], // 标记有子节点
        isLeaf: false,
      }));
      setAreaArray(provinces);
    } catch (error: any) {
      if (error.response) {
        const data = error.response.data;
        messageApi.open({
          type: 'error',
          content: data.msg ? data.msg : `${data.path}(${data.status})`,
        });
      } else {
        console.error(error);
      }
    }
  }
  useEffect(() => {
    getLoadProvinces('0')
  }, []);

  const [messageApi, contextHolder] = useMessage();
  // 省市
  const [areaArray, setAreaArray] = useState<Option[]>([]);
  // 加载城市列表
  const loadCityList = async (selectedOptions: Option[]) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    // console.log('targetOption', targetOption.children);
    try {
      const res: any = await getCityList(targetOption.value as string);
      // console.log('城市列表', res);

      const cities = res.map((city: any) => ({
        value: city.areaId,
        label: city.areaName,

      }));
      targetOption.children = cities;
      // 更新 areaArray 状态
      setAreaArray([...areaArray]);
    } catch (error: any) {


      if (error.response) {
        const data = error.response.data;
        messageApi.open({
          type: 'error',
          content: data.msg ? data.msg : `${data.path}(${data.status})`,
        });
      } else {
        console.error(error)
      }
    }
  };
  const token = sessionStorage.getItem('token')
  // const [form] = Form.useForm();
  const [formA] = Form.useForm<any>();
  const [addLoading, setAddLoading] = useState(false)
  const onFinishA = async (values: any) => {
    console.log(values);
    console.log(qualifications);
    if (trademarkUserId) {
      try {
        setAddLoading(true)
        const newValues = { ...values };
        newValues.rangeAddress = newValues.rangeAddress.join(',');
        await updateTrademarkApplicant(trademarkUserId, {
          type: applicantType,
          subType: qualifications,
          // trademarkId: props.trademarkId,
          nationality: '大陆',
          ...newValues
        })
        getTrademarkApplicantList(page)
        setAddLoading(false)
        setAddPeopleModal(false)

      } catch (error: any) {
        setAddLoading(false)
        if (error.response) {
          const data = error.response.data;
          messageApi.open({
            type: 'error',
            content: data.msg ? data.msg : `${data.path}(${data.status})`,
          });
        } else {
          console.error(error)
        }
      } finally {
        setAddLoading(false)
      }

    } else {
      try {
        setAddLoading(true)
        const newValues = { ...values };
        newValues.rangeAddress = newValues.rangeAddress.join(',');
        await addTrademarkApplicant({
          type: applicantType,
          subType: qualifications,
          // trademarkId: props.trademarkId,
          nationality: '大陆',
          ...newValues
        })
        getTrademarkApplicantList(1)
        setPage(1)
        setAddLoading(false)
        setAddPeopleModal(false)
        init()
        messageApi.open({
          type: 'success',
          content: '新增成功',
        });
      } catch (error: any) {
        setAddLoading(false)
        if (error.response) {
          const data = error.response.data;
          messageApi.open({
            type: 'error',
            content: data.msg ? data.msg : `${data.path}(${data.status})`,
          });
        } else {
          console.error(error)
        }
      } finally {
        setAddLoading(false)
      }
    }

  }
  const [formB] = Form.useForm<any>();
  const onFinishB = async (values: any) => {
    console.log(values);
    if (trademarkUserId) {
      // alert('编辑')
      try {
        setAddLoading(true)
        const newValues = { ...values };
        newValues.rangeAddress = newValues.rangeAddress.join(',');
        await updateTrademarkApplicant(trademarkUserId, {
          type: applicantType,
          // subType: qualifications,
          // trademarkId: props.trademarkId,
          nationality: '大陆',
          ...newValues
        })
        getTrademarkApplicantList(page)
        setAddLoading(false)
        setAddPeopleModal(false)

      } catch (error: any) {
        setAddLoading(false)
        if (error.response) {
          const data = error.response.data;
          messageApi.open({
            type: 'error',
            content: data.msg ? data.msg : `${data.path}(${data.status})`,
          });
        } else {
          console.error(error)
        }
      } finally {
        setAddLoading(false)
      }
    } else {
      try {
        setAddLoading(true)
        const newValues = { ...values };
        newValues.rangeAddress = newValues.rangeAddress.join(',');
        await addTrademarkApplicant({
          type: applicantType,
          // subType: qualifications,
          // trademarkId: props.trademarkId,
          nationality: '大陆',
          ...newValues
        })

        getTrademarkApplicantList(1)
        setPage(1)
        setAddLoading(false)
        setAddPeopleModal(false)
        init()
        messageApi.open({
          type: 'success',
          content: '新增成功',
        });

      } catch (error: any) {
        setAddLoading(false)
        if (error.response) {
          const data = error.response.data;
          messageApi.open({
            type: 'error',
            content: data.msg ? data.msg : `${data.path}(${data.status})`,
          });
        } else {
          console.error(error)
        }
      } finally {
        setAddLoading(false)
      }
    }


  }
  const height = window.innerHeight - 350;
  const [addPeopleModal, setAddPeopleModal] = useState(false)
  const [deleteModal, setDeleteModal] = 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 [upLoading, setUpLoading] = useState(false)
  // 个人身份证图片信息
  const [personalIdCard, setPersonalIdCard] = useState<any>([])
  const personalIdCardChange = (info: any) => {
    console.log(info.file.status);


    if (info.file.status === 'uploading') {
      // setFileList([])
      setUpLoading(true)
      return;
    }
    if (info.file.status === 'done') {
      console.log(info);

      setUpLoading(false)
      // const fileId = info.file.response.data.fileId;
      // // console.log(downloadUrl(fileId));

      // const url = showImage(fileId, false);
      console.log(info.file.response.data.fileId);

      setPersonalIdCard([
        {
          uid: info.file.response.data.fileId,
          name: info.file.response.data.fileName,
          status: 'done',
          url: showImage(info.file.response.data.fileId, false)
        }
      ])
      // 修改为设置 applicantcard 字段的值
      formA.setFieldsValue({ identityPhoto: info.file.response.data.fileId });
      return;


    }
    if (info.file.status === 'error') {
      formA.setFieldsValue({ identityPhoto: '' });
      setUpLoading(false)
      message.error(`上传失败`);
      return;
    }
  }
  const [upPersonalLicenseLoading, setUpPersonalLicenseLoading] = useState(false)
  // 个体营业执照
  const [personalLicense, setPersonalLicense] = useState<any>([])
  const personalLicenseChange = (info: any) => {
    if (info.file.status === 'uploading') {
      // setFileList([])
      setUpPersonalLicenseLoading(true)
      return;
    }
    if (info.file.status === 'done') {
      console.log(info);

      setUpPersonalLicenseLoading(false)
      // const fileId = info.file.response.data.fileId;
      // // console.log(downloadUrl(fileId));

      // const url = showImage(fileId, false);
      console.log(info.file.response.data.fileId);

      setPersonalLicense([
        {
          uid: info.file.response.data.fileId,
          name: info.file.response.data.fileName,
          status: 'done',
          url: showImage(info.file.response.data.fileId, false)
        }
      ])
      // 修改为设置 applicantcard 字段的值
      formA.setFieldsValue({ businessLicense: info.file.response.data.fileId });
      return;


    }
    if (info.file.status === 'error') {
      setUpPersonalLicenseLoading(false)
      formA.setFieldsValue({ businessLicense: '' });
      message.error(`上传失败`);
      return;
    }
  }

  const [upEnterpriseLicenseLoading, setUpEnterpriseLicenseLoading] = useState(false)
  // 企业营业执照
  const [enterpriseLicense, setEnterpriseLicense] = useState<any>([])
  const enterpriseLicenseChange = (info: any) => {
    if (info.file.status === 'uploading') {
      // setFileList([])
      setUpEnterpriseLicenseLoading(true)
      return;
    }
    if (info.file.status === 'done') {
      console.log(info);

      setUpEnterpriseLicenseLoading(false)
      // const fileId = info.file.response.data.fileId;
      // // console.log(downloadUrl(fileId));

      // const url = showImage(fileId, false);
      console.log(info.file.response.data.fileId);

      setEnterpriseLicense([
        {
          uid: info.file.response.data.fileId,
          name: info.file.response.data.fileName,
          status: 'done',
          url: showImage(info.file.response.data.fileId, false)
        }
      ])
      // 修改为设置 applicantcard 字段的值
      formB.setFieldsValue({ businessLicense: info.file.response.data.fileId });
    }
    if (info.file.status === 'error') {
      setUpEnterpriseLicenseLoading(false)
      formB.setFieldsValue({ businessLicense: '' });

      message.error(`上传失败`);
      return;
    }

  }
  const [subLoading, setSubLoading] = useState(false)
  function deepCompareObjects(obj1: any, obj2: any): boolean {
    // 若两个值严格相等，直接返回 true
    if (obj1 === obj2) {
      return true;
    }

    // 若其中一个值为 null 或不是对象类型，返回 false
    if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
      return false;
    }

    // 获取两个对象的键数组
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);

    // 若键的数量不同，返回 false
    if (keys1.length !== keys2.length) {
      return false;
    }

    // 遍历键，递归比较对应的值
    for (const key of keys1) {
      if (!keys2.includes(key) || !deepCompareObjects(obj1[key], obj2[key])) {
        return false;
      }
    }

    return true;
  }
  const handleSubmit = async () => {
    if (deepCompareObjects(confirmSelectPeopleData, props.editThreeData)) {
      props.setEditProcess(4);
      return;
    }
    // formA.submit();
    // props.setEditProcess(4);
    // console.log(confirmSelectPeopleData);
    if (confirmSelectPeopleData.name) {
      console.log(confirmSelectPeopleData);
      try {
        setSubLoading(true)
        await submitTrademarkApplicant(props.trademarkId, {
          trademarkUserId: confirmSelectPeopleData.trademarkUserId,
        })
        setSubLoading(false)
        props.setEditProcess(4);
        props.setEditThreeData({
          trademarkUserId: confirmSelectPeopleData.trademarkUserId,
          name: confirmSelectPeopleData.name,
        })
      } catch (error: any) {
        setSubLoading(false)
        if (error.response) {
          const data = error.response.data;
          messageApi.open({
            type: 'error',
            content: data.msg ? data.msg : `${data.path}(${data.status})`,
          });
        } else {
          console.error(error)
        }
      } finally {
        setSubLoading(false)
      }
    } else {
      message.error('请选择申请人')
    }

  };
  //重置新建申请人信息
  const init = () => {
    setApplicantType('1')
    setQualifications('1')
    formA.resetFields();
    formB.resetFields();
    setPersonalIdCard([])
    setPersonalLicense([])
    setEnterpriseLicense([])
  }

  return (
    <Spin tip="正在提交，请稍后..." size="small" spinning={subLoading}>
      <div className='editOneTwo'>
        {contextHolder}

        <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="选择申请人"
                  value={confirmSelectPeopleData.name}
                ></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',
                  display: confirmSelectPeopleData.name ? 'none' : 'unset'
                }}
                  onClick={() => {
                    setPage(1)
                    setSelectPeopleModal(true)
                    getTrademarkApplicantList(1)
                    setNowSelectPeopleData({
                      trademarkUserId: '',
                      name: '',
                    })
                    if (confirmSelectPeopleData.trademarkUserId) {
                      setSelectedRowKey(confirmSelectPeopleData.trademarkUserId)
                    } else {
                      setSelectedRowKey('')
                    }
                  }}
                >
                  选择
                </div>
                <div style={{
                  position: 'absolute',
                  width: 290,
                  height: '46px',
                  top: '0',
                  right: '0',
                  // background: 'skyblue',
                  // textAlign: 'right',
                  // lineHeight: '42px',
                  // cursor: 'pointer',
                  paddingRight: '10px',
                  color: '#1F79FF',
                  display: confirmSelectPeopleData.name ? 'unset' : 'none',
                }}
                // onClick={() => {
                //   setPage(1)
                //   setSelectPeopleModal(true)
                //   getTrademarkApplicantList(1)
                //   setNowSelectPeopleData({
                //     trademarkUserId: '',
                //     name: '',
                //   })
                //   if (confirmSelectPeopleData.trademarkUserId) {
                //     setSelectedRowKey(confirmSelectPeopleData.trademarkUserId)
                //   } else {
                //     setSelectedRowKey('')
                //   }
                // }}
                >
                  <div style={{
                    // background: 'skyblue',
                    textAlign: 'right'
                  }}>
                    <span style={{
                      // background: 'red',
                      height: 46,
                      // lineHeight:'46px',
                      display: 'inline-block',
                      padding: '0 10px',
                      cursor: 'pointer'
                    }}

                      onClick={() => {
                        setPage(1)
                        setSelectPeopleModal(true)
                        getTrademarkApplicantList(1)
                        setNowSelectPeopleData({
                          trademarkUserId: '',
                          name: '',
                        })
                        if (confirmSelectPeopleData.trademarkUserId) {
                          setSelectedRowKey(confirmSelectPeopleData.trademarkUserId)
                        } else {
                          setSelectedRowKey('')
                        }
                      }}>重选</span>

                  </div>
                </div>
              </div>
            </div>
            <div className='addPeopleBox' onClick={() => {
              setAddPeopleModal(true)
              setDisabled(false)
              setTrademarkUserId('')
              setShowBtn(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={disabled ? '查看申请人' : trademarkUserId ? '编辑申请人' : '新建申请人'}
          destroyOnClose
          centered
          open={addPeopleModal}
          width={800}
          footer={showBtn ? undefined : null}
          onOk={() => {
            if (applicantType == '1') {
              formA.submit()
            }
            if (applicantType == '2') {
              formB.submit()
            }
          }}
          okText='保存'
          cancelText='取消'
          // 点击遮罩禁止关闭
          maskClosable={false}
          onCancel={() => {
            setAddPeopleModal(false)
            init()

          }}>
          <Spin tip='正在保存' size="small" spinning={addLoading} >

            <div
              className='editThreeAddPeopleBox'
              style={{
                height: height + 100,
                overflow: 'auto',
                // width: '100%',
                // display: 'flex',
                // justifyContent:'center'
                paddingLeft: 50

              }}>
              <div>
                <div className='addPeopleTitle'>申请人信息</div>
                <div className='addPeopleItem' style={{
                  marginTop: 10
                }}>
                  <div className='addPeopleItemTitle'>
                    <span className='redTitle'>*</span>申请人类型：
                  </div>
                  <div style={{
                    marginLeft: '2px',
                  }}>
                    <Radio.Group
                      onChange={applicantTypeChange} value={applicantType}
                      disabled={disabled}
                    >
                      <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}
                        disabled={disabled}
                      >
                        <Radio value="1">个人</Radio>
                        <Radio value="2">个体工商户</Radio>
                      </Radio.Group>
                    </div>
                  </div>
                  <div style={{
                    // display: qualifications == '1' ? 'unset' : 'none'
                  }}>
                    <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='addPeopleFormItem' style={{
                        alignItems: 'flex-start',
                        // marginTop:0,
                      }}>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          // background: 'pink'
                        }}>
                          <span className='redTitle'>*</span>身份证
                          <span style={{
                            fontSize: 14,
                            color: 'red',
                            marginTop: 10
                          }}>(注 ：身份证正反面复印件并在空白处签名)</span>

                        </div>
                        <div style={{
                          marginLeft: '2px',
                        }}>
                          <div style={{
                            display: 'flex',

                          }}>
                            <Form.Item
                              name="identityPhoto"
                              rules={[{ required: true, message: '请上传身份证' }]}

                            >
                              <Upload
                                name='image'
                                showUploadList={false}
                                action={uploadImageUrl()}
                                // defaultFileList={upImgArray}
                                beforeUpload={(file) => {
                                  const isPNG = file.type === 'image/png';
                                  const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                                  if (!isPNG && !isJPG) {
                                    // console.error('仅支持 PNG、PDF、JPG 格式的文件!');
                                    message.error('仅支持 PNG、JPG 格式的文件!');
                                  }
                                  return isPNG || isJPG;
                                }}
                                onChange={personalIdCardChange}

                                headers={{ 'Auth': `Bearer ${token}` }}
                                disabled={personalIdCard.length > 0 || disabled}
                              >
                                <Spin tip="正在提交，请稍后..." size="small" spinning={upLoading}>
                                  {
                                    personalIdCard.length > 0 ?
                                      <div style={{
                                        position: 'relative',
                                      }}>
                                        <div className='editThreeUpBox'>
                                          <Image
                                            src={personalIdCard[0].url}
                                            style={{
                                              height: '150px',
                                              maxWidth: '300px'
                                            }}
                                          />

                                        </div>
                                        <div style={{
                                          position: 'absolute',
                                          top: 0,
                                          right: 0,
                                          color: 'red',
                                          cursor: 'pointer',
                                          padding: '2px 5px',
                                          backgroundColor: 'rgba(168, 168, 168, 0.5)',
                                          display: disabled ? 'none' : 'unset'
                                        }}
                                          onClick={() => {
                                            setPersonalIdCard([])
                                            formA.setFieldsValue({ identityPhoto: '' });
                                          }}
                                        >删除</div>
                                      </div>
                                      :
                                      <div style={{
                                        display: 'flex'
                                      }}>
                                        <div className='editThreeUpBox' >
                                          <div style={{
                                            fontSize: 30,
                                          }}>
                                            <PlusOutlined />
                                          </div>
                                          <div style={{
                                            marginTop: 10,
                                          }}>
                                            上传身份证
                                          </div>
                                        </div>

                                      </div>
                                  }
                                </Spin>

                              </Upload>
                            </Form.Item>
                            <div style={{
                            }}>
                              <div className='exampleImg'>
                                <Image src={personCard} height={120}></Image>
                                <div style={{
                                  color: 'red'
                                }}>
                                  示例图片
                                </div>
                              </div>

                            </div>

                          </div>
                        </div>
                      </div>



                      <div className='addPeopleFormItem ' >
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>身份证件号码
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="identity"
                            rules={[{ required: true, message: '请输入身份证上登记的证件号码，务必保持一致' }]}
                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              // placeholder="证件号码"
                              placeholder='请输入身份证上登记的证件号码，务必保持一致'

                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>
                      <div className='addPeopleFormItem' style={{
                        alignItems: 'flex-start',
                        // marginTop:0,
                      }}>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          // background: 'pink'
                        }}>
                          <span className='redTitle'>*</span>个体工商户营业执照
                          {/* <span style={{
                        fontSize: 14,
                        color: 'red',
                        marginTop: 10
                      }}>(注 ：上传图片的尺寸最小为600*600)</span> */}

                        </div>
                        <div style={{
                          marginLeft: '2px',
                        }}>
                          <div style={{
                            display: 'flex',

                          }}>
                            <div>
                              <Form.Item
                                name="businessLicense"
                                rules={[{ required: true, message: '个体工商户营业执照' }]}

                              >
                                <Upload
                                  name='image'
                                  showUploadList={false}
                                  action={uploadImageUrl()}
                                  // defaultFileList={upImgArray}
                                  beforeUpload={(file) => {
                                    const isPNG = file.type === 'image/png';
                                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                                    if (!isPNG && !isJPG) {
                                      // console.error('仅支持 PNG、PDF、JPG 格式的文件!');
                                      message.error('仅支持 PNG、JPG 格式的文件!');
                                    }
                                    return isPNG || isJPG;
                                  }}
                                  onChange={personalLicenseChange}

                                  headers={{ 'Auth': `Bearer ${token}` }}
                                  disabled={personalLicense.length > 0 || disabled}
                                >
                                  <Spin tip="正在提交，请稍后..." size="small" spinning={upPersonalLicenseLoading}>
                                    {
                                      personalLicense.length > 0 ?
                                        <div style={{
                                          position: 'relative',
                                        }}>
                                          <div className='editThreeUpBox'>
                                            <Image
                                              src={personalLicense[0].url}
                                              style={{
                                                height: '150px',
                                                maxWidth: '300px'
                                              }}
                                            />

                                          </div>
                                          <div style={{
                                            position: 'absolute',
                                            top: 0,
                                            right: 0,
                                            color: 'red',
                                            cursor: 'pointer',
                                            padding: '2px 5px',
                                            backgroundColor: 'rgba(168, 168, 168, 0.5)',
                                            display: disabled ? 'none' : 'unset'
                                          }}
                                            onClick={() => {
                                              setPersonalLicense([])
                                              formA.setFieldsValue({ businessLicense: '' });
                                            }}
                                          >删除</div>
                                        </div>
                                        :
                                        <div style={{
                                          display: 'flex'
                                        }}>
                                          <div className='editThreeUpBox' >
                                            <div style={{
                                              fontSize: 30,
                                            }}>
                                              <PlusOutlined />
                                            </div>
                                            <div style={{
                                              marginTop: 10,
                                            }}>
                                              上传营业执照
                                            </div>
                                          </div>

                                        </div>
                                    }
                                  </Spin>

                                </Upload>
                              </Form.Item>

                            </div>
                            <div style={{
                            }}>
                              <div className='exampleImg'>
                                <Image src={qualifications == '1' ? personLicense : individualLicense} height={120}></Image>
                                <div style={{
                                  color: 'red'
                                }}>
                                  示例图片
                                </div>
                              </div>

                            </div>

                          </div>
                        </div>
                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>统一社会信用代码
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="businessLicenseIdcard"
                            rules={[{ required: true, message: '请输入统一社会信用代码' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入统一社会信用代码'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>申请人名称
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="name"
                            rules={[{ required: true, message: qualifications == '1' ? '请输入个体工商户经营者或法人姓名' : '请输入营业执照名称' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder={qualifications == '1' ? '请输入个体工商户经营者或法人姓名' : '请输入营业执照名称'}
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>


                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>申请人地址
                          <span style={{
                            fontSize: 14,
                            color: 'red',
                            marginTop: 10
                          }}>(注 ：省/自治区/直辖市请下拉选择，无需重复填写)</span>
                        </div>

                        <div style={{
                          display: 'flex',
                        }}>
                          <Form.Item
                            name="rangeAddress"
                            rules={[{ required: true, message: '请选择省市' }]}
                          >
                            <Cascader options={areaArray}
                              allowClear
                              style={{ height: '42px', width: 200 }}
                              loadData={loadCityList}
                              placeholder="请选择省市"
                              changeOnSelect
                              disabled={disabled}
                            />

                          </Form.Item>
                          <div style={{
                            height: '42px',
                            // background:'pink',
                            display: 'flex',
                            alignItems: 'center'
                          }}>
                            <div className='addressLine'></div>
                          </div>
                          <Form.Item
                            name="address"
                            rules={[{ required: true, message: qualifications == '1' ? '请输入身份证地址' : '请输入营业执照地址' }]}
                          >
                            <Input style={{
                              width: 300,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder={qualifications == '1' ? '请输入身份证地址' : '请输入营业执照地址'}
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleTitle'>联系信息
                        <span style={{
                          fontSize: 14,
                          color: '#979797',
                          marginTop: 10,
                          fontWeight: 200
                        }}>(联系信息仅供与您联系，非递交商标局信息。)</span>
                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人姓名
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactName"
                            rules={[{ required: true, message: '请输入联系人姓名' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人姓名'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人电话
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactPhone"
                            rules={[{ required: true, message: '请输入联系人电话' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人电话'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人邮箱
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactEmail"
                            rules={[{ required: true, message: '请输入联系人邮箱' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人邮箱'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人地址
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactAddress"
                            rules={[{ required: true, message: '请输入联系人地址' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人地址'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人邮编
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactEmailCode"
                            rules={[{ required: true, message: '请输入联系人邮编' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人邮编'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>
                    </Form>
                  </div>
                </div>



                <div style={{
                  display: applicantType == '2' ? 'unset' : 'none'
                }}>

                  <div style={{
                    // display: qualifications == '1' ? 'unset' : 'none'
                  }}>
                    <Form
                      name="FormB"
                      form={formB}
                      onFinish={onFinishB}
                      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='addPeopleFormItem' style={{
                        alignItems: 'flex-start',
                        // marginTop:0,
                      }}>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          // background: 'pink'
                        }}>
                          <span className='redTitle'>*</span>营业执照
                          {/* <span style={{
                        fontSize: 14,
                        color: 'red',
                        marginTop: 10
                      }}>(注 ：上传图片的尺寸最小为600*600)</span> */}

                        </div>
                        <div style={{
                          marginLeft: '2px',
                        }}>
                          <div style={{
                            display: 'flex',

                          }}>
                            <div>
                              <Form.Item
                                name="businessLicense"
                                rules={[{ required: true, message: '个体工商户营业执照' }]}

                              >
                                <Upload
                                  name='image'
                                  showUploadList={false}
                                  action={uploadImageUrl()}
                                  // defaultFileList={upImgArray}
                                  beforeUpload={(file) => {
                                    const isPNG = file.type === 'image/png';
                                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                                    if (!isPNG && !isJPG) {
                                      // console.error('仅支持 PNG、PDF、JPG 格式的文件!');
                                      message.error('仅支持 PNG、JPG 格式的文件!');
                                    }
                                    return isPNG || isJPG;
                                  }}
                                  onChange={enterpriseLicenseChange}

                                  headers={{ 'Auth': `Bearer ${token}` }}
                                  disabled={enterpriseLicense.length > 0 || disabled}
                                >
                                  <Spin tip="正在提交，请稍后..." size="small" spinning={upEnterpriseLicenseLoading}>
                                    {
                                      enterpriseLicense.length > 0 ?
                                        <div style={{
                                          position: 'relative',
                                        }}>
                                          <div className='editThreeUpBox'>
                                            <Image
                                              src={enterpriseLicense[0].url}
                                              style={{
                                                height: '150px',
                                                maxWidth: '300px'
                                              }}
                                            />

                                          </div>
                                          <div style={{
                                            position: 'absolute',
                                            top: 0,
                                            right: 0,
                                            color: 'red',
                                            cursor: 'pointer',
                                            padding: '2px 5px',
                                            backgroundColor: 'rgba(168, 168, 168, 0.5)',
                                            display: disabled ? 'none' : 'unset'
                                          }}
                                            onClick={() => {
                                              setPersonalLicense([])
                                              formB.setFieldsValue({ businessLicense: '' });
                                            }}
                                          >删除</div>
                                        </div>
                                        :
                                        <div style={{
                                          display: 'flex'
                                        }}>
                                          <div className='editThreeUpBox' >
                                            <div style={{
                                              fontSize: 30,
                                            }}>
                                              <PlusOutlined />
                                            </div>
                                            <div style={{
                                              marginTop: 10,
                                            }}>
                                              上传营业执照
                                            </div>
                                          </div>

                                        </div>
                                    }
                                  </Spin>

                                </Upload>
                              </Form.Item>

                            </div>
                            <div style={{
                            }}>
                              <div className='exampleImg'>
                                <Image src={individualLicense} height={120}></Image>
                                <div style={{
                                  color: 'red'
                                }}>
                                  示例图片
                                </div>
                              </div>

                            </div>

                          </div>
                        </div>
                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>申请人名称
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="name"
                            rules={[{ required: true, message: '请输入申请人名称,申请人名称必须与公司名称一致' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='申请人名称必须与公司名称一致'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>统一社会信用代码
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="businessLicenseIdcard"
                            rules={[{ required: true, message: '请输入统一社会信用代码' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入统一社会信用代码'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>



                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>申请人地址
                          <span style={{
                            fontSize: 14,
                            color: 'red',
                            marginTop: 10
                          }}>(注 ：省/自治区/直辖市请下拉选择，无需重复填写)</span>
                        </div>

                        <div style={{
                          display: 'flex',
                        }}>
                          <Form.Item
                            name="rangeAddress"
                            rules={[{ required: true, message: '请选择省市' }]}
                          >
                            <Cascader options={areaArray}
                              allowClear
                              style={{ height: '42px', width: 200 }}
                              loadData={loadCityList}
                              placeholder="请选择省市"
                              changeOnSelect
                              disabled={disabled}
                            />

                          </Form.Item>
                          <div style={{
                            height: '42px',
                            // background:'pink',
                            display: 'flex',
                            alignItems: 'center'
                          }}>
                            <div className='addressLine'></div>
                          </div>
                          <Form.Item
                            name="address"
                            rules={[{ required: true, message: '请输入营业执照地址' }]}
                          >
                            <Input style={{
                              width: 300,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder={'请输入营业执照地址'}
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleTitle'>联系信息
                        <span style={{
                          fontSize: 14,
                          color: '#979797',
                          marginTop: 10,
                          fontWeight: 200
                        }}>(联系信息仅供与您联系，非递交商标局信息。)</span>
                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人姓名
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactName"
                            rules={[{ required: true, message: '请输入联系人姓名' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人姓名'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>
                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人电话
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactPhone"
                            rules={[{ required: true, message: '请输入联系人电话' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人电话'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人邮箱
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactEmail"
                            rules={[{ required: true, message: '请输入联系人邮箱' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人邮箱'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人地址
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactAddress"
                            rules={[{ required: true, message: '请输入联系人地址' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人地址'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>

                      <div className='addPeopleFormItem'>
                        <div className='addPeopleItemTitle addFormItemTitle' style={{
                          marginTop: 6
                        }}>
                          <span className='redTitle' >*</span>联系人邮编
                        </div>

                        <div style={{

                        }}>
                          <Form.Item
                            name="contactEmailCode"
                            rules={[{ required: true, message: '请输入联系人邮编' }]}

                          >
                            <Input style={{
                              width: 520,
                              height: 42,
                              background: '#FFF',
                              color: 'black'
                            }}
                              disabled={disabled}
                              placeholder='请输入联系人邮编'
                            >
                            </Input>

                          </Form.Item>


                        </div>


                      </div>
                    </Form>
                  </div>
                </div>
              </div>
            </div>
          </Spin>

        </Modal>
        <Modal title="选择申请人"
          destroyOnClose={true}
          centered
          open={selectPeopleModal}
          // footer={null}
          okText='确定'
          cancelText='取消'
          onCancel={() => { setSelectPeopleModal(false) }}
          onOk={() => {
            if (nowSelectPeopleData.name) {
              setConfirmSelectPeopleData(nowSelectPeopleData)

            }
            setSelectPeopleModal(false)
            // console.log(nowSelectPeopleData);

          }}
          width={1200} >
          <div style={{
            marginBottom: 10
          }}>
            <Button type='primary' onClick={() => {
              setAddPeopleModal(true)
              setDisabled(false)
              setTrademarkUserId('')
              setShowBtn(true)
            }}>新建申请人</Button>
            <Search placeholder="输入关键字"
              value={nowSearchKeyWords}
              onSearch={() => {
                setSearchKeyWords(nowSearchKeyWords)
              }}
              onChange={(e) => {
                setNowSearchKeyWords(e.target.value)
                if (e.target.value === '') {
                  setSearchKeyWords('')
                }
              }}
              className='searchInputmedia'
              style={{
                // maxWidth: '200px',
                width: '170px',
                height: '31px',
                marginLeft: '5px'
              }}
              allowClear
            />
          </div>
          <Spin tip='正在加载' size="small" spinning={listLoading} >
            <Table<any>
              rowSelection={{
                type: 'radio',
                selectedRowKeys: [selectedRowKey],
                onChange: (selectedRowKeys: React.Key[]) => {
                  setSelectedRowKey(selectedRowKeys[0] as string);
                },
              }}
              // 设置分页
              pagination={{
                total: total,
                pageSize: 5,
                current: page,
                // 取消设置每显示几条
                showSizeChanger: false,
                // 点击分页按钮
                onChange: (page: number) => {
                  setPage(page);
                  getTrademarkApplicantList(page)
                }
              }}
              columns={columns}
              dataSource={tableData}
              onRow={(record) => ({
                style: {
                  cursor: 'pointer',
                },
                onClick: (event) => {
                  // 检查点击的元素是否属于操作列
                  const isOperationColumn = (event.target as HTMLElement).closest('.ant-table-cell-operations');
                  if (!isOperationColumn) {
                    setSelectedRowKey(record.trademarkUserId);
                    setNowSelectPeopleData({
                      trademarkUserId: record.trademarkUserId,
                      name: record.name,
                    })
                  }

                }
              })}
              rowKey='trademarkUserId'
            />
          </Spin>
        </Modal>

        <Modal title="提示"
          destroyOnClose={true}
          centered
          open={deleteModal}
          okButtonProps={{
            style: {
              backgroundColor: '#ff4d4f', // 红色背景
              borderColor: '#ff4d4f', // 红色边框
            },
          }}
          // footer={null}
          okText='确定'
          cancelText='取消'
          onCancel={() => { setDeleteModal(false) }}
          onOk={async () => {
            try {
              await deleteTrademarkApplicant(trademarkUserId)
              getTrademarkApplicantList(page)
              setDeleteModal(false)
            } catch (error: any) {
              if (error.response) {
                const data = error.response.data;
                messageApi.open({
                  type: 'error',
                  content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
              } else {
                console.error(error)
              }
            }
          }}
        >
          删除后无记录?确定删除吗?
        </Modal>
      </div >
    </Spin>
  )
}
