import React, { useState } from 'react';
import { Modal, Form, Input, Button } from 'antd';
import FeeweeUploadAttachment from '@/components/FeeweeUploadAttachment';
import { UploadOutlined } from '@ant-design/icons';

interface Props {
  open: boolean,
  setOpen: (bool: boolean) => void,
  callback?: Function
}

export default function Add({ open, setOpen, callback }: Props) {
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);

  function handleCancel() {
    setOpen(false);
    form.resetFields();
  }

  async function handleSave() {
    const params = await form.validateFields();
    setConfirmLoading(true);
    callback && callback(params);
    setConfirmLoading(false);
    setOpen(false);
  }

  return (
    <Modal
      open={open}
      title="提交审批"
      onCancel={() => setOpen(false)}
      maskClosable={false}
      footer={[
        <Button key="cancel" onClick={handleCancel} loading={confirmLoading} style={{marginLeft: 10}}>取消</Button>,
        <Button key="submit" onClick={handleSave} type="primary" htmlType="submit" loading={confirmLoading}>确认</Button>
      ]}
    >
      <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
        <Form.Item label="备注" name="remark">
          <Input.TextArea maxLength={512} autoSize={{minRows: 4}} showCount placeholder="请输入备注" />
        </Form.Item>
        <Form.Item label="附件" name="attachmentList" valuePropName="fidList">
          <FeeweeUploadAttachment maxCount={8} listType="text">
            <Button icon={<UploadOutlined />}>上传附件</Button>
          </FeeweeUploadAttachment>
        </Form.Item>
      </Form>
    </Modal>
  );
}