import React from 'react';
import { Modal, Form, Radio, Select, Button } from 'antd';
import { useModel, useRequest } from '@umijs/max';

const { Option } = Select;

const SignModal = ({ visible, onCancel, onCreate, loading }) => {
  const [form] = Form.useForm();
  const { userList } = useModel('userList');

  const handleOk = () => {
    form.validateFields().then((values) => {
      onCreate(values);
    });
  };

  return (
    <Modal
      open={visible}
      title="加签"
      onCancel={onCancel}
      onOk={handleOk}
      destroyOnClose
      confirmLoading={loading}
    >
      <Form form={form} layout="vertical">
        <Form.Item
          name="type"
          label="加签类型"
          initialValue={'before'}
          rules={[{ required: true, message: '请选择加签类型' }]}
        >
          <Radio.Group>
            <Radio value="before">前加</Radio>
            <Radio value="after">后加</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="approver"
          label="审批人"
          rules={[{ required: true, message: '请选择审批人' }]}
        >
          <Select
            showSearch
            filterOption={(input, option) =>
              (option.children ?? '').toLowerCase().includes(input.toLowerCase())
            }
            placeholder="请选择审批人"
          >
            {userList?.map((item) => (
              <Option value={item.ID} key={item.ID}>
                {item.CName}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default SignModal;
