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

import { useState } from 'react'
import { Button, Radio, Form, Input, Upload, message, Image } 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 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 {
      // 表单不显示时，直接更新步骤
      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;
    }
  };
  // 自动生成的img
  const [generateImgId, setGenerateImgId] = useState<any>('')
  const [imgList, setImgList] = useState<any>([])
  const upImgHandleChange: 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);
      setImgList([
        {
          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 onFinishA = (values: any) => {
    console.log(values);
    props.setEditProcess(2);

  }
  const onFinishB = (values: any) => {
    console.log(values);
    props.setEditProcess(2);

  }
  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',
          }}>如何选择?</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'>授权声明书模板</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'>文档</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' ? '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',
                }}>
                  <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>
                </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')
                }}
                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}
            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>




            {/* <Form.Item>
              <div className='trademark-btn'>
                <Button type="primary" htmlType="submit" style={{
                  width: 273,
                  height: 52
                }}
                >
                  提交订单
                </Button>
              </div>
            </Form.Item> */}
          </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>
  )
}