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

const { TextArea } = Input;

function ParamsNew({ form , visble,successFunc,CancelFunc ,editList }){
  const { getFieldDecorator, validateFields , setFieldsValue } = form;
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
  };

  useEffect(()=>{
    if(editList && editList.id){
      setFieldsValue({
        name:editList.name,
        data:editList.data
      })
    }else{
      setFieldsValue({
        name:undefined,
        data:undefined
      })
    }
  },[editList])

  // 确定
  function onConfirmFunc(){
    validateFields((error,values)=>{
      if(!error){
        successFunc(values,editList && editList.id);
        onCancelFunc();
      }
    })
  }
  function onCancelFunc(){
    setFieldsValue({
      name:undefined,
      data:undefined
    })
    CancelFunc();
  }
  return(
    <Modal
      visible={visble}
      okText={"确定"}
      cancelText={"取消"}
      onCancel={onCancelFunc}
      onOk={onConfirmFunc}
      title={"新建"}
      closable={false}
      width="500px"
    >
      <Form {...layout}>
        <Form.Item label="参数名称">
          {getFieldDecorator("name",{
            rules:[{required:true,message:"请输入参数名称"}]
          })(
            <Input placeholder="请输入参数名称" width="220px"/>
          )}
        </Form.Item>
        <Form.Item label="参数值">
          {getFieldDecorator("data",{
            rules:[{required:true,message:"请输入参数值"}]
          })(
            <TextArea placeholder="请输入参数值" width="220px" autoSize={{ minRows: 4, maxRows: 4 }}/>
          )}
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default Form.create()(forwardRef(ParamsNew));