import React, { useEffect, useState } from 'react';
import { Modal, Form, Button, Upload } from '@douyinfe/semi-ui';
import { IconUpload } from '@douyinfe/semi-icons';
import ExportJsonExcel from 'js-export-excel';
const ExportMembersModal = (props) => {
    const { onCancel, user } = props;
    useEffect(() => {

    }, []);

    const handleOk = () => {

    }

    const download = () => {
        dldTemplate();
        dldText("填写说明.txt", "12121212121212");
    }

    const dldTemplate = () => {
        let dataTable = [];
        let option = {};
        option.fileName = '人资系统人员信息导入模板';
        option.datas = [
            {
                sheetData: dataTable,
                sheetName: '人资系统人员信息导入模板',
                sheetFilter: ['人员编号', '姓名', '证件号', '性别（男/女）', '出生年月日（例2022/02/01）', '籍贯', '婚育状态（已婚/未婚/已婚已育）', '政治面貌', '联系方式', '工作地点', '毕业院校', '学历', '专业', '毕业时间', '入职时间', '转试用期时间', '转正时间', '离职日期', '工作经验（年）', '历史工作经历与职务'],  //excel文件中需显示的列数据
                sheetHeader: ['人员编号', '姓名', '证件号', '性别（男/女）', '出生年月日（例2022/02/01）', '籍贯', '婚育状态（已婚/未婚/已婚已育）', '政治面貌', '联系方式', '工作地点', '毕业院校', '学历', '专业', '毕业时间', '入职时间', '转试用期时间', '转正时间', '离职日期', '工作经验（年）', '历史工作经历与职务'],  //excel文件中每列的表头名称
            }
        ]
        let toExcel = new ExportJsonExcel(option);  //生成excel文件
        toExcel.saveExcel();  //下载excel文件
    }

    const dldText = (filename, text) => {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);

        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();
        document.body.removeChild(element);
    }

    const action = '/_file-server/upload?type=excel&token=' + user.token;
    const fileLimit = '.xls,.xlsx,.csv';

    return (
        <Modal title="导入信息" visible={true} okText='完成'
            onOk={() => handleOk(null)}
            onCancel={onCancel}>
            <Form>
                <Form.Upload label={'员工信息'} labelPosition='left' action={action} accept={fileLimit} maxSize={200}>
                    <Button icon={<IconUpload />} theme="light">
                        请选择文件
                    </Button>
                </Form.Upload>
                <div style={{ color: '#ccc' }}>最大不超过200M，导入文件需与
                    <span onClick={() => download()} style={{ cursor: 'pointer', color: '#0066FF' }}>导入模板</span>
                    一致</div>
            </Form>
        </Modal>
    )
}


export default ExportMembersModal;