import React, { useCallback } from "react";
import { Input, Form } from "antd";
import Modal from "../../util/Modal";
import { CenterBtnGrp, OkBtn, CancelBtn } from "../../util/GeneralButton";

const InnerForm = Form.create()(({ form, onCancel, setValue }) => {
  const { getFieldDecorator, validateFields } = form;
  const rules = [
    { required: true, message: "请输入职业分类" },
    { max: 10, message: "超过10字符" },
    { whitespace: true, message: "不能全空" },
  ];
  const formLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
  };
  const onOk = useCallback(() => {
    validateFields((e, v) => {
      if (e) {
        return;
      }
      setValue(v);
      onCancel();
    });
  }, []);
  return (
    <Form {...formLayout} style={{ marginTop: "20px" }}>
      <Form.Item label="父级分类">
        {getFieldDecorator("father", { rules })(
          <Input placeholder="请输入父级分类" />
        )}
      </Form.Item>
      <Form.Item label="子级别分类">
        {getFieldDecorator("son", { rules })(
          <Input placeholder="请输入子级分类" />
        )}
      </Form.Item>
      <CenterBtnGrp>
        <CancelBtn onClick={onCancel} />
        <OkBtn onClick={onOk} />
      </CenterBtnGrp>
    </Form>
  );
});

//visible, setValue, onCancel
export default ({ setValue, ...props }) => (
  <Modal {...props} width="600px" title="新增职业类别" getContainer={false}>
    <InnerForm setValue={setValue} onCancel={props.onCancel} />
  </Modal>
);
