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

interface Iprops{
    data: {[key:string]:[][]}  //需要转化为xlsx工作簿的数据
    fileName?: string          //导出文件名
    buttonName?: string        //按钮名称
    style?: CSSProperties;         //样式
}

function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

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

    const handleExportData = () => {
        //创建xlsx工作簿
        let workbook = XLSX.utils.book_new();
        if(props.data){
            setLoading(true);
            Object.keys(props.data).forEach(sheetName => {
                //为工作簿中添加工作表
                let workSheet = XLSX.utils.aoa_to_sheet(props.data[sheetName]);
                XLSX.utils.book_append_sheet(workbook, workSheet, sheetName);          
            });
            //将工作簿转化为二进制文件blob类型
            let wopts = {
                bookType: 'xlsx', // 要生成的文件类型
                bookSST: false,   // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                type: 'binary'    // 二进制文件
            };
            let wbout = XLSX.write(workbook, wopts as any);
            let blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});

            //下载blob的过程
            const link = document.createElement('a');
            link.setAttribute('href', window.URL.createObjectURL(blob));
            link.setAttribute('download', `${props.fileName}.xlsx`);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            setLoading(false);
        }else{
            message.warning("导出数据未指定")
        }

        }

    return (
        <Button size="small" loading={loading} style={props.style} onClick={handleExportData}>{props.buttonName ? props.buttonName : "导出xlsx数据"}</Button>
        )
}