import { useState } from 'react'
import { Button, Radio, Form, Input } from 'antd'
import './EditOne.css'
const { TextArea } = Input;
export default function EditOne(props: any) {
  const [formA] = Form.useForm<any>(); // 文字商标表单
  const [formB] = Form.useForm<any>(); // 图形商标表单
  const height = window.innerHeight - 350;
  const [goodsType, setGoodsType] = useState('a')
  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 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)
  };
  return (
    <div className='editOneBox'>
      <div className='topLine'></div>
      <div className='' style={{
        height: height,
        // background: 'pink',
        padding: '10px',
        boxSizing: 'border-box',
      }}>
        <div className='editFormTitle'>
          基本信息
        </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}
            initialValues={{ softWare: '' }}
            style={{ marginTop: 20 }}
          >
            <div className='editFormItem '>
              <div className='editFormItemTitle'>
                商标名称<span className='redTitle' >*</span>：
              </div>


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

              </Form.Item>



            </div>
            <div className='editFormItem' style={{
              marginTop: '20px',
            }}>
              <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>




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


        <div style={{
          display: goodsType === 'b' ? 'unset' : 'none',
        }}>
          <Form
            name="FormB"
            form={formB}
            onFinish={onFinishB}
            initialValues={{ softWare: '' }}
            style={{ marginTop: 20 }}
          >
            <div className='editFormItem '>
              <div className='editFormItemTitle'>
                商标名称<span className='redTitle' >*</span>：
              </div>


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

              </Form.Item>



            </div>
            <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>
  )
}