/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 17:02:15
 */

import { Divider, Modal, Upload, Button, UploadProps, UploadFile } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';


export default ({ modalOpenState, onModalOpenState, onSubmit }) => {

  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);



  const props: UploadProps = {
    onRemove: (file) => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: (file) => {
      setFileList([...fileList, file]);
      return false;
    },
    fileList,
  };

  const handleUpload = () => {
    const formData = new FormData();
    fileList.forEach((file) => {
      formData.append('file', file);
    });
    onSubmit(formData)
    setFileList([])
  };

  return (
    <>
      <Modal title="导入设备" open={modalOpenState} onCancel={() => {
        onModalOpenState(false)
      }} onOk={handleUpload} footer={(_, { OkBtn, CancelBtn }) => (
        <>
          <CancelBtn />
          <OkBtn />
        </>
      )}>
        <div className='flex'>
          <Upload className='mr-6' {...props}>
            <Button icon={<UploadOutlined />}>选择文件</Button>
          </Upload>
          <Button icon={<DownloadOutlined />} onClick={() => {
            window.open('https://zhongshuai-test.oss-cn-beijing.aliyuncs.com/upload/20240911/11ecca80-3f06-43c9-9c63-e9a9e4ef0173.xlsx');
          }}>下载模板</Button>
        </div>
      </Modal>
    </>
  );
};