import { useState } from 'react'
import { Button, Radio, Form, Input, Upload, message, Image, Spin } from 'antd'
import './EditOne.css'
import { uploadFileUrl, showImage } from '../../../../request/request'
import {
  DeleteOutlined
} from '@ant-design/icons';
const { TextArea } = Input;
import type { UploadProps } from 'antd';
export default function EditOne(props: any) {
  const token = sessionStorage.getItem('token')
  const [formA] = Form.useForm<any>(); // 文字商标表单
  const [formB] = Form.useForm<any>(); // 图形商标表单
  const [formC] = Form.useForm<any>(); // 图形商标表单
  const height = window.innerHeight - 350;
  const [goodsType, setGoodsType] = useState('a')
  // 生成方式
  const [generateType, setGenerateType] = useState('1')
  const handleSubmit = () => {
    // console.log(form);
    // props.setEditProcess(2);
    // 调用表单实例的 submit 方法
    if (goodsType === 'a') {
      formA.submit();
    } else if (goodsType === 'b') {
      formB.submit();
    } else if (goodsType === 'c') {
      formC.submit();
    } else {
      props.setEditProcess(2);
    }

  };
  // 文字商标 若设计肖像上传得文件
  const [fileList, setFileList] = useState<any>([]);
  const handleChange: 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);
      setFileList([
        {
          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;
    }
  };
  // 文字图形组合商标 若涉及肖像上传得文件
  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') {
      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({ imgUrl: 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>([])
  const onFinishA = (values: any) => {
    console.log(values);
    console.log(fileList); // 上传的授权声明书模板
    console.log(generateImgId); // 自动生成的
    console.log(imgList[0]?.uid); // 手动上传的

    props.setEditProcess(2);

  }


  const onFinishB = (values: any) => {
    console.log(values);
    console.log(upImglist); //商标图样

    props.setEditProcess(2);

  }
  // 上传文字与图形商标图片
  const [imgLodaingC, setImgLodaingC] = useState(false)
  const [upImglistC, setUpImglistC] = useState<any>([])
  const onFinishC = (values: any) => {
    console.log(values);
    // props.setEditProcess(2);
    console.log(upImglistC); //商标图样
    console.log(fileListC); // 上传的授权声明书模板
    console.log(fileListC);


  }
  const onChange = (e: any) => {
    setGoodsType(e.target.value)
  };
  const generateTypeChange = (e: any) => {
    setGenerateType(e.target.value)
    // 给FormA表单的imgUrl赋值
    // if (e.target.value === '1') {
    //   formA.setFieldsValue({ imgUrl: generateImgId }) 
    // }
    // if (e.target.value === '2') {
    //   formA.setFieldsValue({ imgUrl: imgList[0]?.uid}) 
    // }
    formA.setFieldsValue({ imgUrl: '' })
    setGenerateImgId('')
    setImgList([])
  }
  return (
    <div className='editOneBox'>
      <div className='topLine'></div>
      <div className='' 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="a">文字商标</Radio.Button>
              <Radio.Button value="b">图形商标</Radio.Button>
              <Radio.Button value="c">文字图形组合商标</Radio.Button>
            </Radio.Group>
          </div>
          <a style={{
            marginLeft: '10px',
            cursor: 'pointer',
          }}
            onClick={() => {
              window.open('https://www.baidu.com/')
            }}
          >如何选择?</a>
        </div>
        <div style={{
          display: goodsType === 'a' ? '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="title"
                  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('https://www.baidu.com/')
                      }}
                    >授权声明书模板</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) {
                            // console.error('仅支持 PNG、PDF、JPG 格式的文件!');
                            message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                          }
                          return isPNG || isPDF || isJPG;
                        }}
                        // fileList={[]}
                        onChange={handleChange}
                        showUploadList={false}
                        headers={{ 'Auth': `Bearer ${token}` }}
                        disabled={fileList.length > 0}
                      >
                        <span className='pointerBlue'>上传文件</span>
                      </Upload>
                    </div>
                    <div>
                      ({fileList.length}/1)
                    </div>
                    <div>
                      {fileList.length > 0 ? (
                        <div style={{
                          display: 'flex',
                          alignItems: 'center',
                        }}>
                          <div
                            style={{
                              // background: 'pink',
                              width: 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>
                      ) : (
                        <></>
                      )}
                      {/* 嘻嘻 */}
                      {/* <img src={showImage('e98b50ad-7167-49ac-902d-ac3c713f815a')} alt="" /> */}
                    </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="text"
                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="imgUrl"
                  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={generateImgId} 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({ imgUrl: '' })
                    }}
                  >删除</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={() => {
                  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({
                    imgUrl: 'http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
                  })
                }}
                style={{
                  marginTop: '70px',
                  marginLeft: '10px',
                  width: 150,
                  display: generateType == '1' ? 'unset' : 'none',
                }}>立即生成</Button>
            </div>
          </Form>

        </div>


        <div
          style={{
            display: goodsType === 'b' ? '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="textB"
                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="imgUrl"
                  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={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={(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({ imgUrl: info.file.response.data.fileId })

                          return;
                        }
                        if (info.file.status === 'error') {
                          setImgLodaing(false)
                          message.error(`上传失败`);
                          return;
                        }
                      }}
                      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 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({ imgUrl: '' })
                    }}
                  >删除</div>

                </div>
                <div style={{
                  textWrap: 'nowrap',
                  lineHeight: '20px',
                  // background: 'pink'
                }}>
                  <div>图片尺寸:400*400至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 === 'c' ? '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="title"
                  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('https://www.baidu.com/')
                      }}
                    >授权声明书模板</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) {
                            // console.error('仅支持 PNG、PDF、JPG 格式的文件!');
                            message.error('仅支持 PNG、PDF、JPG 格式的文件!');
                          }
                          return isPNG || isPDF || isJPG;
                        }}
                        // fileList={[]}
                        onChange={handleChangeC}
                        showUploadList={false}
                        headers={{ 'Auth': `Bearer ${token}` }}
                        disabled={fileListC.length > 0}
                      >
                        <span className='pointerBlue'>上传文件</span>
                      </Upload>
                    </div>
                    <div>
                      ({fileListC.length}/1)
                    </div>
                    <div>
                      {fileListC.length > 0 ? (
                        <div style={{
                          display: 'flex',
                          alignItems: 'center',
                        }}>
                          <div
                            style={{
                              // background: 'pink',
                              width: 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>
                      ) : (
                        <></>
                      )}
                      {/* 嘻嘻 */}
                      {/* <img src={showImage('e98b50ad-7167-49ac-902d-ac3c713f815a')} alt="" /> */}
                    </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="text"
                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="imgUrl"
                  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={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={(info) => {
                        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.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({ imgUrl: info.file.response.data.fileId })

                          return;
                        }
                        if (info.file.status === 'error') {
                          setImgLodaingC(false)
                          message.error(`上传失败`);
                          return;
                        }
                      }}
                      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 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({ imgUrl: '' })
                    }}
                  >删除</div>

                </div>
                <div style={{
                  textWrap: 'nowrap',
                  lineHeight: '20px',
                  // background: 'pink'
                }}>
                  <div>图片尺寸:400*400至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 >
  )
}
