import { Button, message, Upload } from "antd";
import React from "react";
import { CSSProperties, useEffect, useState } from "react";
import * as XLSX from 'xlsx'

interface Iprops{
    onComplete?: (value) => void;  //完成后的回调，一般为给父组件赋予处理后的xlsx数据
    buttonName?: string;           //按钮名称
    resultType?: number;           //结果类型，raw则为表格原始数据；json则为处理后的json数据
    style?: CSSProperties;         //样式
}

export const RESULT_TYPE = {
    JSON: 1,
    RAW: 2
}

export default function ImportDataFromXlsx(props: Iprops){
    const [loading, setLoading] = useState<boolean>(false);

    useEffect(() => {
    }, [loading])

    const handleImportData = (info) => {
        setLoading(true);
        let files = info.file;
        // 获取文件名称
        let name = files.name
        // 获取文件后缀
        let suffix = name.substr(name.lastIndexOf("."));
        let reader = new FileReader();
        reader.onload = (event) => {
            try{
                // 判断文件类型是否正确
                if (".xls" != suffix && ".xlsx" != suffix) {
                    message.error("选择Excel格式的文件导入!");
                    return false;
                }
                let { result } = event.target;
                let workSheet = XLSX.read(result, { type: 'binary' });
                let parsedWorkbook = Object.keys(workSheet.Sheets).map(function (name) {
                    var sheet = workSheet.Sheets[name];
                    return {
                        name,
                        data: XLSX.utils.sheet_to_json(sheet, {
                            header: 1,
                        })
                    };
                });
                if (props.onComplete && parsedWorkbook){
                    props.onComplete(parsedWorkbook);
                }
                return true;
                }catch (e) {
                    console.log(e);
                    message.error("导入失败");
                    return false;
            }finally{
                setLoading(false);
            }
        }
    reader.readAsBinaryString(files);
    }

    return (
        <Upload accept='.xlsx' showUploadList={false} customRequest={handleImportData}>
            <Button size="small" loading={loading} style={props.style}>{props.buttonName ? props.buttonName : "导入xlsx数据"}</Button>
        </Upload>
        )
}