import React, { useEffect } from 'react';
import { Modal, Input, Table, Select, Form, Radio } from 'antd';
import FlowDetail from './FlowDetail.json';

const { Option } = Select;

function FlowModal(props) {
  const { visible, onCancel, onOk, projectList, loading } = props;
  const [form] = Form.useForm();
  const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 } };

  const handleOk = async () => {
    let fieldsValue = await form.validateFields();
    onOk({
      ...fieldsValue,
      ...FlowDetail,
      project_id: Number(fieldsValue.project_id)
    });
  };

  useEffect(() => {
    if (visible) form.resetFields();
  }, [visible]);

  return (
    <Modal
      confirmLoading={loading}
      destroyOnClose
      title="流程"
      visible={visible}
      onCancel={onCancel}
      onOk={handleOk}
    >
      <Form {...formLayout} form={form}>
        <Form.Item label="流程名称" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="所属项目" name="project_id">
          <Select
            showSearch
            filterOption={(input, option) => option.children.join("").toLowerCase().includes(input.toLowerCase())}
          >
            {projectList.map(item => (
              <Option key={item.id}>{item.project_full_code}({item.project_name})</Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default FlowModal;