import { InboxOutlined } from "@ant-design/icons";
import { ModalForm } from "@ant-design/pro-components/es";
import { Modal, Upload, message } from "antd";
import React, { forwardRef, useRef, useState } from "react";

export default (props) => {
  const { visible, setVisible, onFinish, onSuccess,uploadFile } = props;
  const [fileList, setFileList] = useState([]);

  const onChange = (info) => {
    const { status, response } = info.file;
    const newFileList = [...info.fileList];
    setFileList(newFileList);

    if (status === "done") {
      onFinish(true);
      setVisible(false);
      setFileList([]);
      onSuccess(response);
    } else if (status === "error") {
      onFinish(true);
      setVisible(false);
      setFileList([]);
    }


  };
  const beforeUpload = (file, fileList) => {
    let extension = file.name.split(".")[1] === "xlsx";
    if (!extension) {
      message.warning("导入文件只能是xlsx格式!");
      return false;
    }
  };

  const onCancel = (e) => {
    setFileList([]);
    setVisible(false);
  };

  return (
    <Modal
      title="模板导入"
      open={visible}
      onOpenChange={setVisible}
      footer={false}
      onCancel={onCancel}
    >
      <Upload.Dragger
        name="file"
        beforeUpload={beforeUpload}
        onChange={onChange}
        customRequest={uploadFile}
        fileList={fileList}
      >
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
      </Upload.Dragger>
    </Modal>
  );
};