/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2023-02-15 16:48:56
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2023-07-19 15:16:43
 * @FilePath: /BudgetManaSystem/src/components/BMSUpload/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */



import React, { useState } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import { Alert, UploadFile, UploadProps } from 'antd';
import { Upload } from 'antd';

import './style.less';

const { Dragger } = Upload;

type BMSUploadPropsType = {
    onChange?: () => void;
    ifShowTip?: boolean;  //是否展示黄底提示
    ifShowTemplateDownload?: boolean;//是否展示模板下载
    downloadTemplateFile?: () => void; //模板下载回调
} & UploadProps

const BMSUpload = (props: BMSUploadPropsType) => {
    const [fileList, setFileList] = useState<UploadFile[]>([]);
    const { onChange, downloadTemplateFile, ifShowTip = true, ifShowTemplateDownload = true } = props;

    const config: UploadProps = {
        action: () => Promise.resolve(''),
        name: 'file',
        multiple: false,
        beforeUpload: (file) => {
            setFileList([...fileList, file]);
            return false;
        },
        //onChange:onChange?onChange:()=>{},
        onChange: (fileInfo) => {
            onChange && onChange(fileInfo);
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files);
        },
    };

    const download = () => {
        downloadTemplateFile && downloadTemplateFile()
    }

    return (
        <div className='BMSUpload' style={{ paddingBottom: 16 }}>
            {
                ifShowTemplateDownload && (
                    <div className='toolBar'>
                        <span>文件下载</span>
                        <span onClick={() => download()}>模板下载</span>
                    </div>
                )
            }
            {
               ifShowTip&&(<Alert message="注意，导入的数据将会覆盖当前数据" type="warning" style={{ height: 24, fontSize: 12, marginBottom: 16, marginTop: 16 }} showIcon closable banner />) 
            }
            
            <Dragger {...config} height={140}>
                <p className="ant-upload-drag-icon" style={{ marginBottom: 5 }}>
                    <InboxOutlined style={{ fontSize: 50, color: '#3376FE' }} />
                </p>
                <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>

            </Dragger>
        </div>
    )
}

export default BMSUpload;