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

// 新建流程
function VersionModal(props) {
  const { visible, onClose, onOk, userList = [], data = {}, loading } = props;
  const [form] = Form.useForm();
  const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 } };

  const handleOk = async () => {
    let fieldsValue = await form.validateFields();
    fieldsValue.new_version = 0;
    onOk(fieldsValue);
  };

  useEffect(() => {
    if (visible) form.resetFields();
  }, [visible]);
  return (
    <Modal
      confirmLoading={loading}
      destroyOnClose
      title="新建清单"
      visible={visible}
      onCancel={onClose}
      onOk={handleOk}
    >
      <Form {...formLayout} form={form}>
        <Form.Item label="名称" name="version_name">
          <Input />
        </Form.Item>
        <Form.Item label="详情" name="description">
          <Input.TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default VersionModal;