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

import { useState, useEffect } from 'react'
import { Button, Radio, Form, Input, Upload, message, Image, Spin, Modal } from 'antd'
import './EditOne.css'
import { uploadFileUrl, showImage, uploadImageAddUrl, downloadAuthBookUrl, uploadDeputeFileUrl } from '../../../../request/request'
import { trademarkBaseInfo, aiGenerateImage, fileDetail } from '../../../../request/api'
import {
  // DeleteOutlined,
  LoadingOutlined,
  UploadOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'; // 引入 useNavigate
const { TextArea } = Input;
import type { UploadProps } from 'antd';
export default function EditOne(props: any) {
  const nav = useNavigate(); // 调用 useNavigate
  const token = sessionStorage.getItem('token')
  const [messageApi, contextHolder] = message.useMessage();
  const [formA] = Form.useForm<any>(); // 文字商标表单
  const [formB] = Form.useForm<any>(); // 图形商标表单
  const [formC] = Form.useForm<any>(); // 图形商标表单
  const [upFileAModal, setUpFileAModal] = useState(false)
  const [upFileAType, setUpFileAType] = useState('姓名授权书')
  const [fileAName, setFileAName] = useState<any>([]); //A姓名授权书
  const [fileAFace, setFileAFace] = useState<any>([]); //A肖像授权书
  const [fileABook, setFileABook] = useState<any>([]); //A期刊证明
  const [fileA, setFileA] = useState<any>([]); //A提交文件数组
  // 当以下三个发生改变时候 
  useEffect(() => {
    setFileA([
      fileAName.length > 0 ? fileAName[0].uid : '',
      fileAFace.length > 0 ? fileAFace[0].uid : '',
      fileABook.length > 0 ? fileABook[0].uid : '',
    ].filter(uid => uid !== ''))
  }, [fileAName, fileAFace, fileABook])
  const onUpChangeA = (e: any) => {
    setUpFileAType(e.target.value)
  }

  const [upFileCModal, setUpFileCModal] = useState(false)
  const [upFileCType, setUpFileCType] = useState('姓名授权书')

  const [fileCName, setFileCName] = useState<any>([]); //C姓名授权书
  const [fileCFace, setFileCFace] = useState<any>([]); //C肖像授权书
  const [fileCBook, setFileCBook] = useState<any>([]); //C期刊证明
  const [fileC, setFileC] = useState<any>([]); //C提交文件数组
  // 当以下三个发生改变时候 
  useEffect(() => {
    setFileC([
      fileCName.length > 0 ? fileCName[0].uid : '',
      fileCFace.length > 0 ? fileCFace[0].uid : '',
      fileCBook.length > 0 ? fileCBook[0].uid : '',
    ].filter(uid => uid !== ''))
  }, [fileCName, fileCFace, fileCBook])
  const onUpChangeC = (e: any) => {
    setUpFileCType(e.target.value)
  }
  const height = window.innerHeight - 350;
  // 查看表单数据是否发生改变
  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 [goodsType, setGoodsType] = useState('text')
  // 生成方式
  const [generateType, setGenerateType] = useState('1')
  const handleSubmit = () => {
    // console.log(form);
    // console.log(goodsType);
    // props.setEditProcess(2);
    // 调用表单实例的 submit 方法
    if (goodsType === 'text') {
      formA.submit();
    } else if (goodsType === 'image') {
      formB.submit();
    } else if (goodsType === 'text-image') {
      formC.submit();
    } else {
      props.setEditProcess(2);
    }
    // props.setEditProcess(2);


  };
  const [disabled, setDisabled] = useState(false)
  // 文字商标 若设计肖像上传得文件
  // const [fileList, setFileList] = useState<any>([]);
  // const handleChange: UploadProps['onChange'] = (info) => {
  //   const { fileList } = info;
  //   setFileAName(fileList);
  //   console.log(info.file.status);
  //   if (info.file.status === 'uploading') {
  //     // setFileList([])
  //     setDisabled(true)
  //     return;
  //   }
  //   if (info.file.status === 'done') {


  //     // const fileId = info.file.response.data.fileId;
  //     // // console.log(downloadUrl(fileId));
  //     setDisabled(false)
  //     // const url = showImage(fileId, false);
  //     setFileAName([
  //       {
  //         uid: info.file.response.data.fileId,
  //         name: info.file.response.data.fileName,
  //         status: 'done',
  //         url: showImage(info.file.response.data.fileId, false)
  //       }
  //     ])

  //     return;
  //   }
  //   if (info.file.status === 'error') {
  //     setDisabled(false)
  //     message.error(`上传失败`);
  //     return;
  //   }
  // };
  // 文字图形组合商标 若涉及肖像上传得文件
  // const [fileListC, setFileListC] = useState<any>([]);
  // const handleChangeC: UploadProps['onChange'] = (info) => {
  //   // console.log(info.file.status);


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

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

  //     // const url = showImage(fileId, false);
  //     setFileListC([
  //       {
  //         uid: info.file.response.data.fileId,
  //         name: info.file.response.data.fileName,
  //         status: 'done',
  //         url: showImage(info.file.response.data.fileId, false)
  //       }
  //     ])

  //     return;
  //   }
  //   if (info.file.status === 'error') {
  //     message.error(`上传失败`);
  //     return;
  //   }
  // };
  // 自动生成的img
  const [generateImgId, setGenerateImgId] = useState<any>('')
  const [imgList, setImgList] = useState<any>([])
  // 上传商标文字图片
  const [textLodaing, setTextLodaing] = useState(false)
  const upImgHandleChange: UploadProps['onChange'] = (info) => {
    console.log(info.file.status);


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

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

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

      setImgList([
        {
          uid: info.file.response.data.fileId,
          name: info.file.response.data.fileName,
          status: 'done',
          url: showImage(info.file.response.data.fileId, false)
        }
      ])
      formA.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })

      return;
    }
    if (info.file.status === 'error') {
      setTextLodaing(false)
      message.error(`上传失败`);
      return;
    }
  };

  // 上传图形商标图片
  const [imgLodaing, setImgLodaing] = useState(false)
  const [upImglist, setUpImglist] = useState<any>([])

  // 点击下一步如果需要保存的Loading
  const [upLodaing, setUpLoading] = useState(false)
  const onFinishA = async (values: any) => {

    const dataInfo = {
      ...values,
      trademarkType: goodsType, // 商标类型
      trademarkFile: fileAName.length > 0 ? fileAName[0].uid : '', // 姓名授权
      trademarkFile1: fileAFace.length > 0 ? fileAFace[0].uid : '', // 肖像授权声明书
      trademarkFile2: fileABook.length > 0 ? fileABook[0].uid : '', // 期刊
      trademarkPhotoType: generateType, // 1 自动生成 2 手动上传
      // trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id

    }
    // console.log(dataInfo);
    // console.log(props.editOneData);
    // console.log(deepCompareObjects(dataInfo, props.editOneData));
    if (deepCompareObjects(dataInfo, props.editOneData)) {
      props.setEditProcess(2);
      return;
    }
    // return;

    try {
      setUpLoading(true)
      const res: any = await trademarkBaseInfo({
        ...values,
        trademarkFile: fileAName.length > 0 ? fileAName[0].uid : '', // 姓名授权
        trademarkFile1: fileAFace.length > 0 ? fileAFace[0].uid : '', // 肖像授权声明书
        trademarkFile2: fileABook.length > 0 ? fileABook[0].uid : '', // 期刊
        trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
        trademarkMode: props.trademarkMode, // 申请类型id
        trademarkModeName: props.trademarkModeName, // 申请类型名称
        trademarkPhotoType: generateType, // 1 自动生成 2 手动上传
        trademarkType: goodsType, // 商标类型
      })
      setUpLoading(false)
      props.setEditOneData({
        trademarkType: goodsType, // 商标类型
        trademarkName: values.trademarkName, // 商标名称
        trademarkDescription: values.trademarkDescription, // 商标描述
        trademarkFile: fileAName.length > 0 ? fileAName[0].uid : '', // 姓名授权
        trademarkFile1: fileAFace.length > 0 ? fileAFace[0].uid : '', // 肖像授权声明书
        trademarkFile2: fileABook.length > 0 ? fileABook[0].uid : '', // 期刊
        trademarkPhotoType: generateType, // 1 自动生成 2 手动上传
        trademarkPhoto: values.trademarkPhoto, // 商标图样 
      })
      props.setEditProcess(2);

      if (res.data) {
        props.setTrademarkId(res.data)
        nav(`/trademark-ai-edit/${res.data}`)

      }
      console.log('结果', res);
    } catch (error: any) {
      setUpLoading(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 {
      setUpLoading(false)
    }

    // props.setEditProcess(2);

  }


  const onFinishB = async (values: any) => {
    console.log(values); //trademarkDescription  trademarkPhoto
    console.log(upImglist); //商标图样
    const dataInfo = {
      ...values,
      trademarkType: goodsType, // 商标类型
      trademarkFile: '', // 授权声明书
      trademarkFile1: '',
      trademarkFile2: '',
      trademarkPhotoType: '2', // 1 自动生成 2 手动上传
      trademarkName: '',
    }
    console.log(dataInfo);
    console.log(props.editOneData);
    // 去除 trademarkName 项
    // return;



    // return
    if (deepCompareObjects(dataInfo, props.editOneData)) {
      props.setEditProcess(2);
      return;
    }
    try {
      setUpLoading(true)

      const res = await trademarkBaseInfo({
        ...values,
        trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
        trademarkMode: props.trademarkMode, // 申请类型id
        trademarkModeName: props.trademarkModeName, // 申请类型名称
        trademarkType: goodsType, // 商标类型
        trademarkPhotoType: '2',
        // trademarkName: '',
      })
      setUpLoading(false)
      props.setEditOneData({
        trademarkType: goodsType, // 商标类型
        trademarkName: '', // 商标名称
        trademarkDescription: values.trademarkDescription, // 商标描述
        trademarkFile: '', // 授权声明书
        trademarkPhotoType: '2', // 1 自动生成 2 手动上传
        trademarkPhoto: values.trademarkPhoto, // 商标图样 
      })
      props.setEditProcess(2);
      if (res.data) {
        props.setTrademarkId(res.data)
        nav(`/trademark-ai-edit/${res.data}`)

      }

    } catch (error: any) {
      setUpLoading(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 {
      setUpLoading(false)
    }
    // props.setEditProcess(2);

  }
  // 上传文字与图形商标图片
  const [imgLodaingC, setImgLodaingC] = useState(false)
  const [upImglistC, setUpImglistC] = useState<any>([])
  const onFinishC = async (values: any) => {
    console.log(values);
    // props.setEditProcess(2);
    // console.log(upImglistC); //商标图样
    // console.log(fileListC); // 上传的授权声明书模板
    const dataInfo = {
      ...values,
      trademarkType: goodsType, // 商标类型
      trademarkFile: fileCName.length > 0 ? fileCName[0].uid : '', // 姓名授权
      trademarkFile1: fileCFace.length > 0 ? fileCFace[0].uid : '', // 肖像授权声明书
      trademarkFile2: fileCBook.length > 0 ? fileCBook[0].uid : '', // 期刊
      trademarkPhotoType: '2', // 1 自动生成 2 手动上传
      // trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id

    }
    console.log(dataInfo);
    console.log(props.editOneData);
    if (deepCompareObjects(dataInfo, props.editOneData)) {
      props.setEditProcess(2);
      return;
    }
    // return
    try {
      setUpLoading(true)
      const res = await trademarkBaseInfo({
        ...values,
        trademarkFile: fileCName.length > 0 ? fileCName[0].uid : '', // 姓名授权
        trademarkFile1: fileCFace.length > 0 ? fileCFace[0].uid : '', // 肖像授权声明书
        trademarkFile2: fileCBook.length > 0 ? fileCBook[0].uid : '', // 期刊
        trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
        trademarkMode: props.trademarkMode, // 申请类型id
        trademarkModeName: props.trademarkModeName, // 申请类型名称

        // trademarkModeName: props.trademarkModeName, // 申请类型名称
        trademarkType: goodsType, // 商标类型
        trademarkPhotoType: '2',
      })
      // console.log('结果', res);
      props.setEditOneData({
        trademarkType: goodsType, // 商标类型
        trademarkName: values.trademarkName, // 商标名称
        trademarkDescription: values.trademarkDescription, // 商标描述
        trademarkFile: fileCName.length > 0 ? fileCName[0].uid : '', // 姓名授权
        trademarkFile1: fileCFace.length > 0 ? fileCFace[0].uid : '', // 肖像授权声明书
        trademarkFile2: fileCBook.length > 0 ? fileCBook[0].uid : '', // 期刊
        trademarkPhotoType: '2', // 1 自动生成 2 手动上传
        trademarkPhoto: values.trademarkPhoto, // 商标图样 
      })
      setUpLoading(false)
      props.setEditProcess(2);
      if (res.data) {
        props.setTrademarkId(res.data)
        nav(`/trademark-ai-edit/${res.data}`)

      }

    } catch (error: any) {
      setUpLoading(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 {
      setUpLoading(false)
    }

  }
  const onChange = (e: any) => {
    setGoodsType(e.target.value)
  };
  const generateTypeChange = (e: any) => {
    setGenerateType(e.target.value)

    // console.log(e.target.value);
    // console.log('generateImgId', generateImgId);
    // console.log('imgUrl', imgList[0]?.uid);
    // return
    // 给FormA表单的imgUrl赋值
    // if (e.target.value == '1') {
    //   formA.setFieldsValue({ imgUrl: generateImgId })
    // }
    // if (e.target.value == '2') {
    //   formA.setFieldsValue({ imgUrl: imgList[0]?.uid })
    // }
    // formA.setFieldsValue({ trademarkPhoto: '' })
    // setGenerateImgId('')
    // setImgList([])
  }
  useEffect(() => {
    if (generateType == '1') {
      formA.setFieldsValue({ trademarkPhoto: generateImgId ? generateImgId : '' })
    }
    if (generateType == '2') {
      formA.setFieldsValue({ trademarkPhoto: imgList[0]?.uid ? imgList[0]?.uid : '' })
    }
  }, [generateType])
  const getNameAfileDetail = async (fileId: string) => {
    try {
      const res: any = await fileDetail(fileId)
      // console.log('文件详情', res);
      setFileAName([{
        uid: res[0].fileId, // 手动上传的
        name: res[0].fileName, // 手动上传的
        status: 'done', // 手动上传的 
        url: showImage(res[0].fileId, 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)
      }
    }
  }
  const getFaceAfileDetail = async (fileId: string) => {
    try {
      const res: any = await fileDetail(fileId)
      // console.log('文件详情', res);
      setFileAFace([{
        uid: res[0].fileId, // 手动上传的
        name: res[0].fileName, // 手动上传的
        status: 'done', // 手动上传的 
        url: showImage(res[0].fileId, 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)
      }
    }
  }
  const getBookAfileDetail = async (fileId: string) => {
    try {
      const res: any = await fileDetail(fileId)
      // console.log('文件详情', res);
      setFileABook([{
        uid: res[0].fileId, // 手动上传的
        name: res[0].fileName, // 手动上传的
        status: 'done', // 手动上传的 
        url: showImage(res[0].fileId, 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)
      }
    }
  }
  const getNameCfileDetail = async (fileId: string) => {
    try {
      const res: any = await fileDetail(fileId)
      setFileCName([{
        uid: res[0].fileId, // 手动上传的
        name: res[0].fileName, // 手动上传的
        status: 'done', // 手动上传的 
        url: showImage(res[0].fileId, 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)
      }
    }
  }
  const getFaceCfileDetail = async (fileId: string) => {
    try {
      const res: any = await fileDetail(fileId)
      // console.log('文件详情', res);
      setFileCFace([{
        uid: res[0].fileId, // 手动上传的
        name: res[0].fileName, // 手动上传的
        status: 'done', // 手动上传的 
        url: showImage(res[0].fileId, 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)
      }
    }
  }
  const getBookCfileDetail = async (fileId: string) => {
    try {
      const res: any = await fileDetail(fileId)
      // console.log('文件详情', res);
      setFileCBook([{
        uid: res[0].fileId, // 手动上传的
        name: res[0].fileName, // 手动上传的
        status: 'done', // 手动上传的 
        url: showImage(res[0].fileId, 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)
      }
    }
  }
  useEffect(() => {
    // console.log('传递one的数据', props.editOneData);
    const { trademarkName, trademarkDescription, trademarkPhoto, trademarkPhotoType, trademarkType, trademarkFile, trademarkFile1, trademarkFile2 } = props.editOneData;
    if (trademarkType) {
      console.log(1);

      // 赋值方式
      setGoodsType(trademarkType)
      setGenerateType(trademarkPhotoType)

      if (trademarkType == 'text') {
        formA.setFieldsValue({
          trademarkName: trademarkName, // 商标名称
          trademarkDescription: trademarkDescription, // 商标描述
          trademarkPhoto: trademarkPhoto, // 商标图样
        })
        // setFileA([
        //   trademarkFile,
        //   trademarkFile1,
        //   trademarkFile2
        // ].filter(uid => uid !== ''))
        if (trademarkPhotoType == '1') { // 自动生成
          setGenerateImgId(trademarkPhoto) // 自动生成的
        }
        if (trademarkPhotoType == '2') { // 自动生成
          setImgList([{
            uid: trademarkPhoto, // 手动上传的
            name: trademarkPhoto, // 手动上传的
            status: 'done', // 手动上传的
            url: showImage(trademarkPhoto, false) // 手动上传的
          }]) // 手动上传的
        }
        if (trademarkFile) {
          getNameAfileDetail(trademarkFile)
        }
        if (trademarkFile1) {
          getFaceAfileDetail(trademarkFile1)
        }
        if (trademarkFile2) {
          getBookAfileDetail(trademarkFile2)
        }

      }
      if (trademarkType == 'image') {
        formB.setFieldsValue({
          trademarkDescription: trademarkDescription, // 商标描述
          trademarkPhoto: trademarkPhoto, // 商标图样
        })
        setUpImglist([{
          uid: trademarkPhoto, // 手动上传的
          name: trademarkPhoto, // 手动上传的
          status: 'done', // 手动上传的
          url: showImage(trademarkPhoto, false) // 手动上传的
        }]) // 手动上传的
      }
      if (trademarkType == 'text-image') {
        formC.setFieldsValue({
          trademarkName: trademarkName, // 商标名称
          trademarkDescription: trademarkDescription, // 商标描述
          trademarkPhoto: trademarkPhoto, // 商标图样
        })
        setUpImglistC([{
          uid: trademarkPhoto, // 手动上传的
          name: trademarkPhoto, // 手动上传的
          status: 'done', // 手动上传的 
          url: showImage(trademarkPhoto, false) // 手动上传的
        }])

        if (trademarkFile) {
          getNameCfileDetail(trademarkFile)
        }
        if (trademarkFile1) {
          getFaceCfileDetail(trademarkFile1)
        }
        if (trademarkFile2) {
          getBookCfileDetail(trademarkFile2)
        }
      }

    }

  }, [props.editOneData])
  return (
    <Spin tip="正在提交，请稍后..." size="small" spinning={upLodaing}>
      <div className='editOneBox'>
        {contextHolder}
        <div className='topLine'></div>
        <div className='editOneFomrBox' style={{
          height: height,
          // background: 'pink',
          padding: '10px',
          boxSizing: 'border-box',
          overflow: 'auto',
        }}>
          <div className='trademarkTop'>
            <div className='trademarkTopL'>
              !
            </div>
            <div>
              <div>智能商标申请存在较高的失败风险，建议无商标申请经验的用户使用“<a>专家辅助申请</a>"或"<a>至尊无忧注册</a>"提高商标申清通过率。</div>
              <div style={{
                marginTop: '5px'
              }}>当前仅提供文字、图形或文字图形组合商标申请;暂不支持立体商标、声音商标、证明商标、集体商标的申请。</div>
              <div style={{
                marginTop: '5px'
              }}>商标局录入的商标信息以商标图样为准，且最终使用需与商标图样一致，请您确认手动上传的商标图样是您想要注册的商标。</div>
            </div>
          </div>
          <div className='editFormTitle' style={{
            marginTop: '20px',
          }}>
            基本信息
          </div>
          <div className='editFormItem firstItem'>
            <div className='editFormItemTitle'>
              商标类型<span className='redTitle'>*</span>：
            </div>
            <div style={{
              marginLeft: '2px',
            }}>
              <Radio.Group onChange={onChange} value={goodsType}>
                <Radio.Button value="text">文字商标</Radio.Button>
                <Radio.Button value="image">图形商标</Radio.Button>
                <Radio.Button value="text-image">文字图形组合商标</Radio.Button>
              </Radio.Group>
            </div>
            <a style={{
              marginLeft: '10px',
              cursor: 'pointer',
            }}
              onClick={() => {
                window.open('https://www.baidu.com/')
              }}
            >如何选择?</a>
          </div>
          <div style={{
            display: goodsType === 'text' ? '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='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 style={{
                    position: 'absolute',
                    top: 70,
                    // textWrap: 'nowrap',
                    width: 800,
                    lineHeight: '20px',
                  }}>
                    <div style={{
                      display: 'flex'
                    }}>
                      若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
                        onClick={() => {
                          window.open(downloadAuthBookUrl())
                        }}
                      >授权声明书模板</span>，填写完盖章签字后
                      <div>
                        {/* <Spin indicator={<LoadingOutlined spin />} size="small" spinning={disabled}>
                          <Upload
                            name="file"
                            maxCount={1}
                            action={uploadDeputeFileUrl('姓名授权书')}
                            beforeUpload={(file) => {
                              const isPNG = file.type === 'image/png';
                              const isPDF = file.type === 'application/pdf';
                              const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                              if (!isPNG && !isPDF && !isJPG) {
                                message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                              }
                              return isPNG || isPDF || isJPG;
                            }}
                            // fileList={[]}
                            onChange={handleChange}
                            showUploadList={false}
                            headers={{ 'Auth': `Bearer ${token}` }}
                            disabled={fileList.length > 0 || disabled}
                          >
                            <span className='pointerBlue'>上传文件</span>
                          </Upload>
                        </Spin> */}
                        <span className='pointerBlue'
                          onClick={() => {
                            setUpFileAModal(true)
                          }}
                        >上传文件A</span>
                        <span>
                          ({fileA.length}/3)
                        </span>

                      </div>
                      {/* <div>
                        ({fileList.length}/1)
                      </div>
                      <div>
                        {fileList.length > 0 ? (
                          <div style={{
                            display: 'flex',
                            alignItems: 'center',
                          }}>
                            <div
                              style={{
                                maxWidth: 100,
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                whiteSpace: 'nowrap',
                                color: 'var(--color-blue)',
                                cursor: 'pointer',
                                textDecoration: 'underline',
                              }}
                              title={fileList[0].name}
                              onClick={() => {
                                window.open(showImage(fileList[0].uid, false))
                              }}>
                              {fileList[0].name}
                            </div>
                            <div
                              style={{
                                marginLeft: '2px',
                                cursor: 'pointer',
                              }}
                              onClick={() => {
                                setFileList([])
                              }}><DeleteOutlined /></div>
                          </div>
                        ) : (
                          <></>
                        )}
                      </div> */}

                    </div>
                    <div style={{
                      // marginTop: '-20px',
                    }}>
                      2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'
                        onClick={() => {
                          window.open('https://www.baidu.com/')
                        }}
                      >文档</span>
                    </div>

                  </div>

                </div>


              </div>
              <div className='editFormItem' style={{
                marginTop: '100px',
              }}>
                <div className='editFormItemTitle'>
                  商标说明<span className='redTitle'>*</span>：
                </div>


                <Form.Item
                  name="trademarkDescription"
                  rules={[{ required: true, message: '请输入商标说明' }]}
                >
                  <TextArea style={{
                    width: 600,
                    height: 150,
                    background: '#FFF',
                    color: 'black',
                    resize: 'none'
                  }}
                    placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
                  >
                  </TextArea>

                </Form.Item>



              </div>

              <div className='editFormItem' style={{
                marginTop: '120px',
              }}>
                <div className='editFormItemTitle'>
                  商标图样<span className='redTitle'>*</span>：
                </div>
                <div style={{
                  marginLeft: '2px',
                }}>
                  <Radio.Group onChange={generateTypeChange} value={generateType}>
                    <Radio value="1">自动生成</Radio>
                    <Radio value="2">手动上传</Radio>
                  </Radio.Group>
                </div>
              </div>
              <div style={{
                display: 'flex',
              }}>
                <div style={{
                  marginLeft: '90px',
                  // background:'pink',
                  width: 200,
                  position: 'relative',
                }}>

                  <Form.Item
                    name="trademarkPhoto"
                    rules={[{ required: true, message: generateType == '1' ? '请点击生成按钮生成商标图样' : '请上传商标图样' }]}
                  >
                    <TextArea style={{
                      width: 200,
                      height: 100,
                      background: '#FFF',
                      color: 'black',
                      resize: 'none'
                    }}
                      // value={generateType == '1' ? generateImgId : imgList[0]?.uid}
                      placeholder="商标说明"
                    >
                    </TextArea>

                  </Form.Item>
                  <div style={{
                    display: generateType == '1' && generateImgId == '' ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>
                    暂无图片
                  </div>
                  {/* 自动生成图片 */}
                  <div style={{
                    display: generateType == '1' && generateImgId != '' ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>
                    <div style={{
                      width: '100%',
                      height: '100%',
                      // background:'pink',
                      overflow: 'hidden',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'flex-start',
                    }}>
                      <Image src={showImage(generateImgId, false)} height={100} style={{ maxWidth: 200, height: '100%' }}  ></Image>
                    </div>
                  </div>
                  {/* 手动上传图片 */}
                  <div style={{
                    display: generateType == '2' && imgList.length > 0 ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>

                    <div style={{
                      width: '100%',
                      height: '100%',
                      // background:'pink',
                      overflow: 'hidden',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'flex-start',
                    }}>
                      <Image src={imgList[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }}  ></Image>
                    </div>
                    <div style={{
                      position: 'absolute',
                      bottom: 0,
                      right: -50,
                      fontSize: '16px',
                      lineHeight: '16px',
                      // background:'pink',
                      cursor: 'pointer',
                      padding: '5px',
                      color: 'red'
                    }}
                      onClick={() => {
                        setImgList([])
                        formA.setFieldsValue({ trademarkPhoto: '' })
                      }}
                    >删除</div>

                  </div>


                  <div style={{
                    display: generateType == '2' && imgList.length <= 0 ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>
                    <Spin tip="正在处理，请稍后..." size="small" spinning={textLodaing}>
                      <Upload
                        name="file"
                        maxCount={1}
                        action={uploadFileUrl()}
                        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;
                        }}
                        // fileList={[]}
                        onChange={upImgHandleChange}
                        showUploadList={false}
                        headers={{ 'Auth': `Bearer ${token}` }}
                        disabled={imgList.length > 0}
                      >
                        <div style={{
                          width: 200,
                          height: 100,
                          background: 'white',
                          color: 'black',

                          lineHeight: '100px',
                          textAlign: 'center',
                          fontSize: '20px',
                          border: '1px dashed #d6d6d6',
                        }}>
                          上传图片
                        </div>
                      </Upload>
                    </Spin>
                  </div>

                </div>
                <Button type="primary"
                  onClick={async () => {
                    // setGenerateImgId('http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024')
                    // // 给FormA表单的imgUrl赋值
                    // formA.setFieldsValue({
                    //   trademarkPhoto: 'http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
                    // })
                    if (!formA.getFieldValue('trademarkName')) {
                      message.error('请先输入商标名称')
                      return;
                    } else {
                      console.log('正在生成');
                      // try {
                      //   // 创建一个 canvas 元素
                      //   const canvas = document.createElement('canvas');
                      //   const ctx = canvas.getContext('2d');
                      //   if (!ctx) {
                      //     message.error('无法获取 canvas 上下文');
                      //     return;
                      //   }
                      //   // 设置 canvas 尺寸
                      //   canvas.width = 500;
                      //   canvas.height = 250;
                      //   // 设置背景颜色为白色
                      //   ctx.fillStyle = '#FFFFFF';
                      //   ctx.fillRect(0, 0, canvas.width, canvas.height);
                      //   // 设置文字样式
                      //   ctx.fillStyle = '#000000';
                      //   // 设置字体为斜体、粗体，大小为 28px，字体族为 "SimSun"（宋体）
                      //   ctx.font = 'bold 100px SimSun';
                      //   // ctx.font = '24px Arial';
                      //   ctx.textAlign = 'center';
                      //   ctx.textBaseline = 'middle';
                      //   // 在画布中心绘制文字
                      //   ctx.fillText(formA.getFieldValue('trademarkName'), canvas.width / 2, canvas.height / 2);
                      //   // 将 canvas 转换为图片 URL
                      //   const imageUrl = canvas.toDataURL('image/png');
                      //   // 设置生成的图片 ID 和表单值
                      //   setGenerateImgId(imageUrl);
                      //   // formA.setFieldsValue({
                      //   //   trademarkPhoto: imageUrl
                      //   // });
                      //   // 将 canvas 转换为 Blob 对象
                      //   const blob = await new Promise<Blob | null>((resolve) => {
                      //     canvas.toBlob((blob) => {
                      //       resolve(blob);
                      //     }, 'image/png');
                      //   });

                      //   if (!blob) {
                      //     message.error('无法将 canvas 转换为图片');
                      //     return;
                      //   }

                      //   // 创建 FormData 对象
                      //   const formData = new FormData();
                      //   formData.append('file', blob, 'generated_image.png');

                      //   // 获取上传地址
                      //   const uploadUrl = uploadFileUrl();

                      //   // 发送上传请求
                      //   const response = await fetch(uploadUrl, {
                      //     method: 'POST',
                      //     headers: {
                      //       'Auth': `Bearer ${token}`
                      //     },
                      //     body: formData
                      //   });

                      //   if (!response.ok) {
                      //     throw new Error('图片上传失败');
                      //   }

                      //   const result = await response.json();
                      //   const fileId = result.data.fileId; // 假设响应中的 fileId 是成功后的 id

                      //   // 设置生成的图片 ID 和表单值
                      //   setGenerateImgId(showImage(fileId, false));
                      //   formA.setFieldsValue({
                      //     trademarkPhoto: fileId
                      //   });
                      // } catch (error) {
                      //   console.error('生成图片失败:', error);
                      //   message.error('生成图片失败，请稍后重试');
                      // }
                      try {
                        const res: any = await aiGenerateImage({
                          title: formA.getFieldValue('trademarkName'),
                        });
                        console.log('结果', res);
                        setGenerateImgId(res.fileId);
                        formA.setFieldsValue({
                          trademarkPhoto: res.fileId
                        })
                      } catch (error: any) {
                        // setLoading(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 {
                        // setLoading(false)
                      }
                    }
                  }}
                  style={{
                    marginTop: '70px',
                    marginLeft: '10px',
                    width: 150,
                    display: generateType == '1' ? 'unset' : 'none',
                  }}>立即生成</Button>
              </div>
            </Form>

          </div>


          <div
            style={{
              display: goodsType === 'image' ? '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='editFormItem' style={{
                marginTop: '20px',
              }}>
                <div className='editFormItemTitle'>
                  商标说明<span className='redTitle'>*</span>：
                </div>


                <Form.Item
                  name="trademarkDescription"
                  rules={[{ required: true, message: '请输入商标说明' }]}
                >
                  <TextArea style={{
                    width: 600,
                    height: 150,
                    background: '#FFF',
                    color: 'black',
                    resize: 'none'
                  }}
                    placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
                  >
                  </TextArea>

                </Form.Item>



              </div>

              <div className='editFormItem' style={{
                marginTop: '130px',
              }}>
                <div className='editFormItemTitle'>
                  商标图样<span className='redTitle'>*</span>：
                </div>
                <div style={{
                  // marginLeft: '90px',
                  // background:'pink',
                  width: 200,
                  position: 'relative',
                }}>
                  <Form.Item
                    name="trademarkPhoto"
                    rules={[{ required: true, message: '请上传商标图样' }]}
                  >
                    <TextArea style={{
                      width: 200,
                      height: 100,
                      background: '#FFF',
                      color: 'black',
                      resize: 'none'
                    }}
                    // value={generateType == '1' ? generateImgId : imgList[0]?.uid}
                    // placeholder="商标说明"
                    >
                    </TextArea>

                  </Form.Item>
                  <div style={{
                    display: upImglist.length <= 0 ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>
                    <Spin tip="正在处理，请稍后..." size="small" spinning={imgLodaing}>
                      <Upload
                        name="file"
                        maxCount={1}
                        action={uploadImageAddUrl()}
                        beforeUpload={(file) => {
                          // const isPNG = file.type === 'image/png';
                          const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                          if (!isJPG) {
                            // console.error('仅支持 PNG、PDF、JPG 格式的文件!');
                            message.error('仅支持 JPG 格式的文件!');
                          }
                          return isJPG;
                        }}
                        // fileList={[]}
                        onChange={(info) => {
                          if (info.file.status === 'uploading') {
                            // setFileList([])
                            setImgLodaing(true)
                            return;
                          }
                          if (info.file.status === 'done') {
                            setImgLodaing(false)
                            // const fileId = info.file.response.data.fileId;
                            // // console.log(downloadUrl(fileId));

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

                            setUpImglist([
                              {
                                uid: info.file.response.data.fileId,
                                name: info.file.response.data.fileName,
                                status: 'done',
                                url: showImage(info.file.response.data.fileId, false)
                              }
                            ])
                            formB.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })

                            return;
                          }
                          if (info.file.status === 'error') {
                            setImgLodaing(false)
                            // message.error(`上传失败`);
                            // console.log(info.file.response.msg? info.file.response.msg : '上传失败');

                            message.error(info.file.response.msg ? info.file.response.msg : '上传失败');
                            return;
                          }
                        }}
                        showUploadList={false}
                        headers={{ 'Auth': `Bearer ${token}` }}
                        disabled={upImglist.length > 0}
                      >
                        <div style={{
                          width: 200,
                          height: 100,
                          background: 'white',
                          color: 'black',

                          lineHeight: '100px',
                          textAlign: 'center',
                          fontSize: '20px',
                          border: '1px dashed #d6d6d6',
                        }}>
                          上传图片
                        </div>
                      </Upload>
                    </Spin>
                  </div>
                  <div style={{
                    display: upImglist.length > 0 ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>

                    <div style={{
                      width: '100%',
                      height: '100%',
                      // background:'pink',
                      overflow: 'hidden',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'flex-start',
                    }}>
                      <Image src={upImglist[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }}  ></Image>
                    </div>
                    <div style={{
                      position: 'absolute',
                      bottom: 0,
                      right: -50,
                      fontSize: '16px',
                      lineHeight: '16px',
                      // background:'pink',
                      cursor: 'pointer',
                      padding: '5px',
                      color: 'red'
                    }}
                      onClick={() => {
                        setUpImglist([])
                        formB.setFieldsValue({ trademarkPhoto: '' })
                      }}
                    >删除</div>

                  </div>
                  <div style={{
                    textWrap: 'nowrap',
                    lineHeight: '20px',
                    // background: 'pink'
                  }}>
                    <div>图片尺寸:500*500至1500*1500</div>
                    <div>图片大小:200kb内</div>
                    <div>图片格式:仅支持JPG格式</div>
                    <div style={{
                      color: 'red'
                    }}>上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用</div>
                    <div style={{
                      color: 'red'
                    }}>上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用</div>
                    <div style={{
                      color: 'red'
                    }}>建议上传商标图样颜色:黑白</div>
                    <div style={{
                      height: '30px',
                    }}></div>
                  </div>
                </div>

              </div>




            </Form>
          </div>



          <div
            style={{
              display: goodsType === 'text-image' ? 'unset' : 'none',
            }}>
            <Form
              name="FormC"
              form={formC}
              onFinish={onFinishC}
              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 style={{
                    position: 'absolute',
                    top: 70,
                    // textWrap: 'nowrap',
                    width: 800,
                    lineHeight: '20px',
                  }}>
                    <div style={{
                      display: 'flex'
                    }}>
                      若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
                        onClick={() => {
                          window.open(downloadAuthBookUrl())
                        }}
                      >授权声明书模板</span>，填写完盖章签字后
                      <div>
                        {/* <Upload
                          name="file"
                          maxCount={1}
                          action={uploadFileUrl()}
                          beforeUpload={(file) => {
                            const isPNG = file.type === 'image/png';
                            const isPDF = file.type === 'application/pdf';
                            const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                            if (!isPNG && !isPDF && !isJPG) {
                              message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                            }
                            return isPNG || isPDF || isJPG;
                          }}
                          onChange={handleChangeC}
                          showUploadList={false}
                          headers={{ 'Auth': `Bearer ${token}` }}
                          disabled={fileListC.length > 0}
                        >
                          <span className='pointerBlue'>上传文件</span>
                        </Upload> */}
                        <span className='pointerBlue' onClick={() => {
                          setUpFileCModal(true)
                        }}>上传文件C</span>
                        <span>
                          ({fileC.length}/3)
                        </span>

                      </div>
                      {/* <div >
                        ({fileListC.length}/1)
                      </div>
                      <div>
                        {fileListC.length > 0 ? (
                          <div style={{
                            display: 'flex',
                            alignItems: 'center',
                          }}>
                            <div
                              style={{
                                maxWidth: 100,
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                whiteSpace: 'nowrap',
                                color: 'var(--color-blue)',
                                cursor: 'pointer',
                                textDecoration: 'underline',
                              }}
                              title={fileListC[0].name}
                              onClick={() => {
                                window.open(showImage(fileListC[0].uid, false))
                              }}>
                              {fileListC[0].name}
                            </div>
                            <div
                              style={{
                                marginLeft: '2px',
                                cursor: 'pointer',
                              }}
                              onClick={() => {
                                setFileListC([])
                              }}><DeleteOutlined /></div>
                          </div>
                        ) : (
                          <></>
                        )}
                      </div> */}

                    </div>
                    <div style={{
                      // marginTop: '-20px',
                    }}>
                      2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'
                        onClick={() => {
                          window.open('https://www.baidu.com/')
                        }}
                      >文档</span>
                    </div>

                  </div>

                </div>


              </div>
              <div className='editFormItem' style={{
                marginTop: '100px',
              }}>
                <div className='editFormItemTitle'>
                  商标说明<span className='redTitle'>*</span>：
                </div>


                <Form.Item
                  name="trademarkDescription"
                  rules={[{ required: true, message: '请输入商标说明' }]}
                >
                  <TextArea style={{
                    width: 600,
                    height: 150,
                    background: '#FFF',
                    color: 'black',
                    resize: 'none'
                  }}
                    placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
                  >
                  </TextArea>

                </Form.Item>



              </div>
              <div className='editFormItem' style={{
                marginTop: '130px',
              }}>
                <div className='editFormItemTitle'>
                  商标图样<span className='redTitle'>*</span>：
                </div>
                <div style={{
                  // marginLeft: '90px',
                  // background:'pink',
                  width: 200,
                  position: 'relative',
                }}>
                  <Form.Item
                    name="trademarkPhoto"
                    rules={[{ required: true, message: '请上传商标图样' }]}
                  >
                    <TextArea style={{
                      width: 200,
                      height: 100,
                      background: '#FFF',
                      color: 'black',
                      resize: 'none'
                    }}
                    // value={generateType == '1' ? generateImgId : imgList[0]?.uid}
                    // placeholder="商标说明"
                    >
                    </TextArea>

                  </Form.Item>
                  <div style={{
                    display: upImglistC.length <= 0 ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>
                    <Spin tip="正在处理，请稍后..." size="small" spinning={imgLodaingC}>
                      <Upload
                        name="file"
                        maxCount={1}
                        action={uploadImageAddUrl()}
                        beforeUpload={(file) => {
                          // const isPNG = file.type === 'image/png';
                          const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                          if (!isJPG) {
                            // console.error('仅支持 PNG、PDF、JPG 格式的文件!');
                            message.error('仅支持 JPG 格式的文件!');
                          }
                          return isJPG;

                        }}
                        // 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 false;
                        //   }

                        //   // 使用 Promise 来处理图片尺寸的读取
                        //   return new Promise((resolve) => {
                        //     // 创建 Image 实例，TypeScript 环境下可使用 HTMLImageElement 明确类型
                        //     const img: HTMLImageElement = new Image();
                        //     img.src = URL.createObjectURL(file);
                        //     img.onload = () => {
                        //       const width = img.naturalWidth;
                        //       const height = img.naturalHeight;
                        //       if (width >= 500 && width <= 1500 && height >= 500 && height <= 1500) {
                        //         resolve(true);
                        //       } else {
                        //         message.error('图片尺寸需在 500*500 至 1500*1500 之间');
                        //         resolve(false);
                        //       }
                        //       URL.revokeObjectURL(img.src);
                        //     };
                        //     img.onerror = () => {
                        //       message.error('无法读取图片尺寸');
                        //       resolve(false);
                        //       URL.revokeObjectURL(img.src);
                        //     };
                        //   });
                        // }}
                        // fileList={[]}
                        onChange={(info) => {
                          // console.log(info.file.status);

                          if (info.file.status === 'uploading') {
                            // setFileList([])
                            setImgLodaingC(true)
                            return;
                          }
                          if (info.file.status === 'done') {
                            setImgLodaingC(false)
                            // const fileId = info.file.response.data.fileId;
                            // // console.log(downloadUrl(fileId));

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

                            setUpImglistC([
                              {
                                uid: info.file.response.data.fileId,
                                name: info.file.response.data.fileName,
                                status: 'done',
                                url: showImage(info.file.response.data.fileId, false)
                              }
                            ])
                            formC.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })

                            return;
                          }
                          if (info.file.status === 'error') {
                            setImgLodaingC(false)
                            // message.error(`上传失败`);
                            message.error(info.file.response.msg ? info.file.response.msg : '上传失败');
                            return;
                          }
                        }}
                        showUploadList={false}
                        headers={{ 'Auth': `Bearer ${token}` }}
                        disabled={upImglistC.length > 0}
                      >
                        <div style={{
                          width: 200,
                          height: 100,
                          background: 'white',
                          color: 'black',

                          lineHeight: '100px',
                          textAlign: 'center',
                          fontSize: '20px',
                          border: '1px dashed #d6d6d6',
                        }}>
                          上传图片
                        </div>
                      </Upload>
                    </Spin>
                  </div>
                  <div style={{
                    display: upImglistC.length > 0 ? 'unset' : 'none',
                    width: 200,
                    height: 100,
                    background: 'white',
                    color: 'black',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    lineHeight: '100px',
                    textAlign: 'center',
                    fontSize: '20px',
                    border: '1px dashed #d6d6d6',
                  }}>

                    <div style={{
                      width: '100%',
                      height: '100%',
                      // background:'pink',
                      overflow: 'hidden',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'flex-start',
                    }}>
                      <Image src={upImglistC[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }}  ></Image>
                    </div>
                    <div style={{
                      position: 'absolute',
                      bottom: 0,
                      right: -50,
                      fontSize: '16px',
                      lineHeight: '16px',
                      // background:'pink',
                      cursor: 'pointer',
                      padding: '5px',
                      color: 'red'
                    }}
                      onClick={() => {
                        setUpImglistC([])
                        formC.setFieldsValue({ trademarkPhoto: '' })
                      }}
                    >删除</div>

                  </div>
                  <div style={{
                    textWrap: 'nowrap',
                    lineHeight: '20px',
                    // background: 'pink'
                  }}>
                    <div>图片尺寸:500*500至1500*1500</div>
                    <div>图片大小:200kb内</div>
                    <div>图片格式:仅支持JPG格式</div>
                    <div style={{
                      color: 'red'
                    }}>上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用</div>
                    <div style={{
                      color: 'red'
                    }}>上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用</div>
                    <div style={{
                      color: 'red'
                    }}>建议上传商标图样颜色:黑白</div>
                    <div style={{
                      height: '30px',
                    }}></div>
                  </div>
                </div>

              </div>


            </Form>


          </div>


        </div >
        <div className='topLine'></div>
        <div style={{
          marginTop: '8px',
          display: 'flex',
          justifyContent: 'flex-end',
        }}>
          <Button
            type='primary'
            style={{
              width: '100px',
              height: '40px',
              borderRadius: '5px',
            }}
            onClick={() => {
              handleSubmit()
            }}
          >下一步</Button>
        </div>
      </div >
      <Modal title="上传授权书"
        centered
        // okText='确认'
        // cancelText='取消'
        destroyOnClose={true}
        open={upFileAModal}
        // onOk={() => {
        //   handleSubmit()
        // }}
        onClose={() => {
          setUpFileAModal(false)
        }}
        footer={[
          <Button key="ok" type="primary" onClick={() => {
            setUpFileAModal(false)
          }}>
            确认
          </Button>
        ]}
        // footer={null}
        onCancel={() => { setUpFileAModal(false) }} >
        <Spin indicator={<LoadingOutlined spin />} tip='正在上传' size="small" spinning={disabled}>

          <div style={{
            display: 'flex',
            paddingTop: 20,
          }}>
            <div className='editFormItemTitle' style={{
              width: 70
            }}>类型</div>
            <div>
              <Radio.Group onChange={onUpChangeA} value={upFileAType}>
                <Radio.Button value="姓名授权书">姓名授权书</Radio.Button>
                <Radio.Button value="肖像授权书">肖像授权书</Radio.Button>
                <Radio.Button value="期刊证明">期刊证明</Radio.Button>
              </Radio.Group>
              <div style={{
                marginTop: 5,
                color: 'rgb(161, 161, 161)'


              }}>请选择对应的授权文件类型</div>
            </div>
          </div>
          <div style={{
            marginTop: 20,
            display: 'flex',
            // background: 'pink'
          }}>
            <div className='editFormItemTitle' style={{
              width: 70,
              marginTop: 5
            }}>上传文件</div>
            {/* 姓名授权书 */}
            <div style={{
              display: upFileAType == '姓名授权书' ? 'unset' : 'none',
              maxWidth: '200px'
            }}>
              <div style={{
                height: 65,
              }}>
                <Upload
                  name="file"
                  action={uploadDeputeFileUrl('姓名授权书')}
                  beforeUpload={(file) => {

                    const isPDF = file.type === 'application/pdf';
                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                    if (!isPDF && !isJPG) {
                      message.error('仅支持 PNG、PDF、JPG 格式的文件!');

                    }
                    return isPDF || isJPG;
                  }}
                  fileList={fileAName}
                  onChange={(info) => {

                    if (info.file.status === 'uploading') {
                      const { fileList } = info;
                      setFileAName(fileList);
                      setDisabled(true)
                      return;
                    }
                    if (info.file.status === 'done') {
                      // console.log(info.file.response.data);
                      setFileAName([
                        {
                          uid: info.file.response.data.fileId,
                          name: info.file.response.data.fileName,
                          status: 'done',
                          url: showImage(info.file.response.data.fileId, false)
                        }
                      ])
                      setDisabled(false)


                    }
                    if (info.file.status === 'error') {
                      setDisabled(false)
                      message.error(info.file.response.msg);
                      setFileAName([])
                    }


                  }}
                  onRemove={() => {
                    setFileAName([])

                  }}

                  headers={{ 'Auth': `Bearer ${token}` }}
                >
                  <Button icon={<UploadOutlined />}
                    disabled={fileAName.length > 0}

                    style={{
                      marginTop: '4px'
                    }}
                  >上传姓名授权书</Button>
                </Upload>


              </div>

            </div>
            {/* 肖像授权书 */}
            <div style={{
              display: upFileAType == '肖像授权书' ? 'unset' : 'none',
              maxWidth: '200px'
            }}>
              <div style={{
                height: 65,
              }}>
                <Upload
                  name="file"
                  beforeUpload={(file) => {

                    const isPDF = file.type === 'application/pdf';
                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                    if (!isPDF && !isJPG) {
                      message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                    }
                    return isPDF || isJPG;
                  }}
                  action={uploadDeputeFileUrl('肖像授权书')}
                  fileList={fileAFace}
                  onChange={(info) => {

                    if (info.file.status === 'uploading') {
                      const { fileList } = info;
                      setFileAFace(fileList);
                      setDisabled(true)
                      return;
                    }
                    if (info.file.status === 'done') {
                      setDisabled(false)
                      setFileAFace([
                        {
                          uid: info.file.response.data.fileId,
                          name: info.file.response.data.fileName,
                          status: 'done',
                          url: showImage(info.file.response.data.fileId, false)
                        }
                      ])


                    }
                    if (info.file.status === 'error') {
                      setDisabled(false)
                      // 显示错误提示
                      // message.error(`上传失败`);
                      message.error(info.file.response.msg);

                      setFileAFace([])
                    }


                  }}
                  onRemove={() => {
                    setFileAFace([])

                  }}

                  headers={{ 'Auth': `Bearer ${token}` }}
                >
                  <Button icon={<UploadOutlined />}
                    disabled={fileAFace.length > 0}
                    style={{
                      marginTop: '4px'
                    }}
                  >上传肖像授权书</Button>
                </Upload>


              </div>

            </div>

            {/* 期刊证明 */}
            <div style={{
              display: upFileAType == '期刊证明' ? 'unset' : 'none',
              maxWidth: '200px'
            }}>
              <div style={{
                height: 65,
              }}>
                <Upload
                  beforeUpload={(file) => {

                    const isPDF = file.type === 'application/pdf';
                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                    if (!isPDF && !isJPG) {
                      message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                    }
                    return isPDF || isJPG;
                  }}
                  name="file"
                  action={uploadDeputeFileUrl('期刊证明')}
                  fileList={fileABook}
                  onChange={(info) => {

                    if (info.file.status === 'uploading') {
                      const { fileList } = info;
                      setFileABook(fileList);
                      setDisabled(true)
                      return;
                    }
                    if (info.file.status === 'done') {
                      setDisabled(false)
                      setFileABook([
                        {
                          uid: info.file.response.data.fileId,
                          name: info.file.response.data.fileName,
                          status: 'done',
                          url: showImage(info.file.response.data.fileId, false)
                        }
                      ])


                    }
                    if (info.file.status === 'error') {
                      setDisabled(false)
                      // message.error(`上传失败`);
                      message.error(info.file.response.msg);

                      setFileABook([])
                    }


                  }}
                  onRemove={() => {
                    setFileABook([])

                  }}

                  headers={{ 'Auth': `Bearer ${token}` }}
                >
                  <Button icon={<UploadOutlined />}
                    disabled={fileABook.length > 0}
                    style={{
                      marginTop: '4px'
                    }}
                  >上传期刊证明</Button>
                </Upload>


              </div>

            </div>
          </div>
          <div style={{
            height: '110px',
            display: 'flex',
            alignItems: 'center',
            paddingLeft: 70,
            boxSizing: 'border-box',
            color: 'rgb(161, 161, 161)'
          }}>
            <div style={{
              display: upFileAType == '姓名授权书' ? 'unset' : 'none',
            }}>
              请上传商标申请对应的姓名授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
            </div>
            <div style={{
              display: upFileAType == '肖像授权书' ? 'unset' : 'none',
            }}>
              请上传商标申请对应的肖像授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
            </div>
            <div style={{
              display: upFileAType == '期刊证明' ? 'unset' : 'none',
            }}>
              在“期刊”上注册该商标须有我国出版行政主管部门批准使用的报纸、期刊名称，由于您选择了该项目，需提供我国出版行政主管部门核发的报纸、期刊出版许可证明。(请上传1.5M以内的jpg/jpeg格式图片/2MI以内的pdf格式文件)
            </div>
          </div>
        </Spin>
      </Modal>

      <Modal title="上传授权书"
        centered
        // okText='确认'
        // cancelText='取消'
        destroyOnClose={true}
        open={upFileCModal}
        // onOk={() => {
        //   handleSubmit()
        // }}
        onCancel={() => {
          setUpFileCModal(false)
        }}
        footer={[
          <Button key="ok" type="primary" onClick={() => {
            setUpFileCModal(false)
          }}>
            确认
          </Button>
        ]}
      >
        <Spin indicator={<LoadingOutlined spin />} tip='正在上传' size="small" spinning={disabled}>

          <div style={{
            display: 'flex',
            paddingTop: 20,
          }}>
            <div className='editFormItemTitle' style={{
              width: 70
            }}>类型</div>
            <div>
              <Radio.Group onChange={onUpChangeC} value={upFileCType}>
                <Radio.Button value="姓名授权书">姓名授权书</Radio.Button>
                <Radio.Button value="肖像授权书">肖像授权书</Radio.Button>
                <Radio.Button value="期刊证明">期刊证明</Radio.Button>
              </Radio.Group>
              <div style={{
                marginTop: 5,
                color: 'rgb(161, 161, 161)'


              }}>请选择对应的授权文件类型</div>
            </div>
          </div>
          <div style={{
            marginTop: 20,
            display: 'flex',
            // background: 'pink'
          }}>
            <div className='editFormItemTitle' style={{
              width: 70,
              marginTop: 5
            }}>上传文件</div>
            {/* 姓名授权书 */}
            <div style={{
              display: upFileCType == '姓名授权书' ? 'unset' : 'none',
              maxWidth: '200px'
            }}>
              <div style={{
                height: 65,
              }}>
                <Upload
                  name="file"
                  action={uploadDeputeFileUrl('姓名授权书')}
                  beforeUpload={(file) => {

                    const isPDF = file.type === 'application/pdf';
                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                    if (!isPDF && !isJPG) {
                      message.error('仅支持 PNG、PDF、JPG 格式的文件!');

                    }
                    return isPDF || isJPG;
                  }}
                  fileList={fileCName}
                  onChange={(info) => {
                    console.log(info.file.status);

                    if (info.file.status === 'uploading') {
                      const { fileList } = info;
                      setFileCName(fileList);
                      setDisabled(true)
                      return;
                    }
                    if (info.file.status === 'done') {
                      // console.log(info.file.response.data);
                      setFileCName([
                        {
                          uid: info.file.response.data.fileId,
                          name: info.file.response.data.fileName,
                          status: 'done',
                          url: showImage(info.file.response.data.fileId, false)
                        }
                      ])
                      setDisabled(false)


                    }
                    if (info.file.status === 'error') {
                      setDisabled(false)
                      message.error(info.file.response.msg);
                      setFileCName([])

                    }


                  }}
                  onRemove={() => {
                    setFileCName([])

                  }}

                  headers={{ 'Auth': `Bearer ${token}` }}
                >
                  <Button icon={<UploadOutlined />}
                    disabled={fileCName.length > 0}

                    style={{
                      marginTop: '4px'
                    }}
                  >上传姓名授权书</Button>
                </Upload>


              </div>

            </div>
            {/* 肖像授权书 */}
            <div style={{
              display: upFileCType == '肖像授权书' ? 'unset' : 'none',
              maxWidth: '200px'
            }}>
              <div style={{
                height: 65,
              }}>
                <Upload
                  name="file"
                  beforeUpload={(file) => {

                    const isPDF = file.type === 'application/pdf';
                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                    if (!isPDF && !isJPG) {
                      message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                    }
                    return isPDF || isJPG;
                  }}
                  action={uploadDeputeFileUrl('肖像授权书')}
                  fileList={fileCFace}
                  onChange={(info) => {

                    if (info.file.status === 'uploading') {
                      const { fileList } = info;
                      setFileCFace(fileList);
                      setDisabled(true)
                      return;
                    }
                    if (info.file.status === 'done') {
                      setDisabled(false)
                      setFileCFace([
                        {
                          uid: info.file.response.data.fileId,
                          name: info.file.response.data.fileName,
                          status: 'done',
                          url: showImage(info.file.response.data.fileId, false)
                        }
                      ])


                    }
                    if (info.file.status === 'error') {
                      setDisabled(false)
                      // 显示错误提示
                      // message.error(`上传失败`);
                      message.error(info.file.response.msg);

                      setFileCFace([])
                    }


                  }}
                  onRemove={() => {
                    setFileCFace([])

                  }}

                  headers={{ 'Auth': `Bearer ${token}` }}
                >
                  <Button icon={<UploadOutlined />}
                    disabled={fileCFace.length > 0}
                    style={{
                      marginTop: '4px'
                    }}
                  >上传肖像授权书</Button>
                </Upload>


              </div>

            </div>

            {/* 期刊证明 */}
            <div style={{
              display: upFileCType == '期刊证明' ? 'unset' : 'none',
              maxWidth: '200px'
            }}>
              <div style={{
                height: 65,
              }}>
                <Upload
                  beforeUpload={(file) => {

                    const isPDF = file.type === 'application/pdf';
                    const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
                    if (!isPDF && !isJPG) {
                      message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                    }
                    return isPDF || isJPG;
                  }}
                  name="file"
                  action={uploadDeputeFileUrl('期刊证明')}
                  fileList={fileCBook}
                  onChange={(info) => {

                    if (info.file.status === 'uploading') {
                      const { fileList } = info;
                      setFileCBook(fileList);
                      setDisabled(true)
                      return;
                    }
                    if (info.file.status === 'done') {
                      setDisabled(false)
                      setFileCBook([
                        {
                          uid: info.file.response.data.fileId,
                          name: info.file.response.data.fileName,
                          status: 'done',
                          url: showImage(info.file.response.data.fileId, false)
                        }
                      ])


                    }
                    if (info.file.status === 'error') {
                      setDisabled(false)
                      // message.error(`上传失败`);
                      message.error(info.file.response.msg);

                      setFileCBook([])
                    }


                  }}
                  onRemove={() => {
                    setFileCBook([])

                  }}

                  headers={{ 'Auth': `Bearer ${token}` }}
                >
                  <Button icon={<UploadOutlined />}
                    disabled={fileCBook.length > 0}
                    style={{
                      marginTop: '4px'
                    }}
                  >上传期刊证明</Button>
                </Upload>


              </div>

            </div>
          </div>
          <div style={{
            height: '110px',
            display: 'flex',
            alignItems: 'center',
            paddingLeft: 70,
            boxSizing: 'border-box',
            color: 'rgb(161, 161, 161)'
          }}>
            <div style={{
              display: upFileCType == '姓名授权书' ? 'unset' : 'none',
            }}>
              请上传商标申请对应的姓名授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
            </div>
            <div style={{
              display: upFileCType == '肖像授权书' ? 'unset' : 'none',
            }}>
              请上传商标申请对应的肖像授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
            </div>
            <div style={{
              display: upFileCType == '期刊证明' ? 'unset' : 'none',
            }}>
              在“期刊”上注册该商标须有我国出版行政主管部门批准使用的报纸、期刊名称，由于您选择了该项目，需提供我国出版行政主管部门核发的报纸、期刊出版许可证明。(请上传1.5M以内的jpg/jpeg格式图片/2MI以内的pdf格式文件)
            </div>
          </div>
        </Spin>
      </Modal>




    </Spin>
  )
}