system-copyright-react/src/route/TrademarkMall/TrademarkExpertEdit.tsx

import { useEffect, useState } from 'react'
import './trademark-edit.css'
import { useLocation } from 'react-router-dom';
import {
  Form,
  Input, Button,
  Modal
} from 'antd';
const { TextArea } = Input;
export default function TrademarkExpertEdit() {
  const { state } = useLocation()
  const height = window.innerHeight - 180;
  const [form] = Form.useForm<any>();
  const [modal, setModal] = useState(false)
  const onFinish = (values: any) => {
    console.log(values);
    setModal(true)
  }
  useEffect(() => {
    console.log('state', state);
  }, [])
  return (
    <div className='trademarkExpertBox' style={{ height: `${height}px`, overflow: 'auto' }}>
      <div style={{
        display: state.id == '2' ? 'unset' : 'none'
      }}>
        <div className='trademarkTop'>
          <div className='trademarkTopL'>
            !
          </div>
          <div>
            支付完成后会有商标专家联系您并为您服务，请确保填写的手机号真实准确。填写的商标信息后续可以修改，请您放心填写。
          </div>
        </div>
      </div>
      <div style={{
        display: state.id == '3'? 'unset' : 'none'
      }}>
        <div className='trademarkTop'>
          <div className='trademarkTopL'>
            !
          </div>
          <div>
            <div>至尊无忧注册由专业商标顾问团队为您全程代办商标申请和递交流程，</div>
            <div style={{
              marginTop: '5px'
            }}>指定类目至尊无忧注册，指定类目被驳回可全额赔付，非指定类目驳回不支持赔付;</div>
            <div style={{
              marginTop: '5px'
            }}>全部小类至尊无忧注册，商标局下发《商标驳回通知书》可全额赔付，包含部分驳回和全部驳回通知书。</div>
          </div>
        </div>
      </div>
      <div className='trademarkForm '>

        <Form
          name="Form"
          form={form}
          onFinish={onFinish}
          initialValues={{ softWare: '' }}
          style={{ maxWidth: 600, marginTop: 20 }}
        >
          <div className='trademarkForm-item'>
            <div className='trademarkForm-title'>
              商标名称<span style={{
                color: 'red'
              }}>*</span> ：
            </div>
            <div className='trademarkInput'>

              <Form.Item
                name="title"
                rules={[{ required: true, message: '请输入商标名称!' }]}
              >
                <Input style={{
                  width: 500,
                  height: 46,
                  background: '#FFF',
                  color: 'black'
                }}
                  placeholder="商标名称"
                >
                </Input>

              </Form.Item>


            </div>
          </div>
          <div className='trademarkForm-item'>
            <div className='trademarkForm-title'>
              需求描述 ：
            </div>
            <div className='trademarkInput'>

              <Form.Item
                name="text"
              // rules={[{ required: true, message: '请输入商标名称!' }]}
              >
                <TextArea style={{
                  width: 500,
                  height: 200,
                  background: '#FFF',
                  color: 'black',
                  resize: 'none'
                }}
                  placeholder="需求描述"
                >
                </TextArea>

              </Form.Item>


            </div>
          </div>
          <div style={{
            textWrap: 'nowrap',
          }}>在您提交商标申请咨询单后，工作日期间专业顾问会在1小时内与您联系，非工作日时间会在下一个工作日与您取得联系。</div>
          <div style={{
            textWrap: 'nowrap',
          }}>本网站会保护您的个人信息，仅有本网站及其授权委托机构可以看到您提交的信息，请放心提供。</div>



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

      </div>
      <Modal title="提示"
        centered
        destroyOnClose={true}
        open={modal}
        onCancel={() => { setModal(false) }}
        okText='确定'
        cancelText='取消'
      >
        该操作会扣除{state.price}元，且提交后无法撤销，确定操作吗？
      </Modal>
    </div>
  )
}