import React , { forwardRef, useEffect } from 'react';
import { Modal , Form , Input } from 'antd';

function AddTag({form , visible , onCancel ,onOk}){
  const { getFieldDecorator, validateFields , setFieldsValue } = form;

  useEffect(()=>{
    setFieldsValue({tagName:undefined})
  },[visible])

  function submit(){
    validateFields((error,values)=>{
      if(!error){
        onOk(values);
      }
    })
  }
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
  };
  return(
    <Modal 
      title={"新增标记"}
      closable={false}
      visible={visible}
      onCancel={onCancel}
      onOk={submit}
      cancelText="取消"
      okText="确定"
      width="400px"
      centered
    >
      <Form {...layout}>
        <Form.Item label="标记名">
          {getFieldDecorator("tagName",{
            rules:[{required:true,message:"请输入标记名"}]
          })(
            <Input placeholder="请输入标记名" width="200px" autoComplete="off" />
          )}
        </Form.Item>
      </Form>
    </Modal>
  )
  
}
export default Form.create()(forwardRef(AddTag));