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

// 审批意见
function AuditModal(props) {
  const { data, visible, onCancel, onOk, loading, classify } = props;
  const [form] = Form.useForm();
  const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 } };

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

  useEffect(() => {
    console.log('===============', data);
    if (visible) form.resetFields();
  }, [visible]);
  return (
    <Modal
      confirmLoading={loading}
      destroyOnClose
      title="流程"
      open={visible}
      onCancel={onCancel}
      onOk={handleOk}
    >
      <Form {...formLayout} form={form}>
        <Form.Item
          label="流程名称"
          name="name"
          initialValue={data ? `${data?.name}_copy` : ''}
        >
          <Input />
        </Form.Item>
        <Form.Item label="详情" name="desc" initialValue={data?.desc}>
          <Input.TextArea />
        </Form.Item>
        <Form.Item
          label="分类"
          name="classify_id"
          initialValue={data?.classify_id}
        >
          <Select
            options={classify.map((item) => ({
              value: item.id,
              label: item.name,
            }))}
          ></Select>
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default AuditModal;
