import { RESPONSE_CODE } from '@/constants/enum';
import { postResearchGroupsImport } from '@/services';
import { orderExport } from '@/services/order';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Modal, Upload, message } from 'antd';
import { RcFile, UploadFile, UploadProps } from 'antd/es/upload';
import { useState } from 'react';
export default ({ onClose }) => {
  //   const [form] = Form.useForm<{ name: string; company: string }>();
  const [messageApi, contextHolder] = message.useMessage();
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [uploading, setUploading] = useState(false);
  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
    setFileList(newFileList);

  const exportLoading = (content: string) => {
    messageApi.open({
      type: 'loading',
      content: content,
      duration: 0,
    });
  };

  const exportLoadingDestory = () => {
    messageApi.destroy();
  };
  const downloadTemplate = async () => {
    exportLoading('正在下载模板...');
    orderExport(
      '/api/research/groups/download/importTemplate',
      '导入模板.xls',
      'POST',
      {},
      exportLoadingDestory,
    );
  };

  const handleUpload = async () => {
    const formData = new FormData();
    fileList.forEach((file) => {
      //originFileObj二进制文件
      formData.append('file', file.originFileObj as RcFile);
    });
    console.log(fileList[0] as RcFile);
    formData.append('file', fileList[0] as RcFile);
    setUploading(true);
    // You can use any AJAX library you like
    const res = await postResearchGroupsImport({
      data: formData,
      headers: {
        'Content-Type':
          'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
      },
    });

    if (res.result === RESPONSE_CODE.SUCCESS) {
      message.success(res.message);
      onClose();
    }

    setUploading(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,
    onChange: handleChange,
    accept: '.xlsx',
  };

  return (
    <>
      <Modal
        width={500}
        open
        title="课题组信息导入"
        footer={[
          <Button key="cancel" onClick={onClose}>
            取消
          </Button>,
          <Button
            type="primary"
            key="ok"
            onClick={handleUpload}
            disabled={fileList.length === 0}
            loading={uploading}
          >
            {uploading ? '上传中' : '提交'}
          </Button>,
        ]}
        onCancel={async () => {
          onClose();
        }}
      >
        <div className="py-4 font-semibold">
          导入课题组信息
          <Button type="link" onClick={downloadTemplate}>
            下载模板
          </Button>
        </div>
        <Upload {...props}>
          <Button icon={<UploadOutlined />} disabled={fileList.length > 0}>
            点击选择文件
          </Button>
        </Upload>
      </Modal>
      {contextHolder}
    </>
  );
};