


import { SearchOutlined,ImportOutlined} from '@ant-design/icons';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button,Upload,message,} from 'antd';
import Cookies from 'js-cookie';
// 服务器地址，此处为了做演示，没有全局引入，直接写了
const Host = 'http://112.124.59.133:8082';

class CAUpload extends Component {
    constructor(props) {
        super(props);
        // 模板下载事件
        this.jumpTo = this.jumpTo.bind(this);
        // 表格导出事件
        this.exportExcel = this.exportExcel.bind(this);
        // 表格上传事件
        this.uploadProps.onChange = this.uploadProps.onChange.bind(this);

        this.customRequestCallback = props.customRequestCallback?props.customRequestCallback.bind(this):()=>{}
    }
    // 模板下载
    jumpTo() {
        window.open(Host+this.props.templateHref);
    }
    // 上传参数
    uploadProps = {
        // // 发到后台的文件参数名
        // name: 'file',
        // // 接受的文件类型
        // accept: '.xls,.xlsx',
        // // 上传的地址
        // action: Host + this.props.url,
        // // 是否展示上传的文件
        // showUploadList:false,
        // // 上传的参数
        // data: {
            
        //     // uid: Cookies.get('uid')
        // },
        // // 设置上传的请求头部，IE10 以上有效
        // headers: {
        //     // authorization: 'authorization-text',
        //     'Content-Type':'multipart/form-data',
        //     'token':this.props.token,
        // },
        // 上传文件前的钩子函数
        showUploadList:false,
        beforeUpload() {
            message.loading('正在导入中...');
            return true;
        },
        customRequest:({
            file,data,action,onSuccess
        })=>{
               console.log({file,data,action,onSuccess});
               const formData = new FormData();
               formData.set('file',file);
               this.customRequestCallback(formData);

        },
        // 上传文件改变时的状态
        onChange(info) {
            console.log({info});
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                if (info.file.response.code !== 200) {
                    setTimeout(() => {
                        message.destroy();
                        message.error(info.file.response.message);
                    });
                } else {
                    this.props.importSuccessCallback && this.props.importSuccessCallback();
                    setTimeout(() => {
                        message.destroy();
                        message.success('导入成功');
                    });
                }
            } else if (info.file.status === 'error') {
                setTimeout(() => {
                    message.destroy();
                    message.error('导入失败');
                });
            }
        },
    }

    // 导出Excel表格
    exportExcel() {
        const url = Host + this.props.url + `/export?token=${Cookies.get('token')}&uid=${Cookies.get('uid')}`;
        window.open(url);
    }

    render() {
        const uploadProps = this.uploadProps;
        return [
            // <Button style={{marginLeft: 10}} key='exportExcel' onClick={this.exportExcel}>导出</Button>,
            <Upload style={{marginLeft: 10}} key='importExcel' {...uploadProps} >
                <Button type="primary">导入</Button>
            </Upload>,
            <Button style={{marginLeft: 10}} key='templateDowload' onClick={this.jumpTo}>模板下载</Button>
        ]
    }
}

// 定义参数类型
CAUpload.propTypes = {
    // 模板下载地址
    templateHref: PropTypes.string.isRequired,
    // 上传地址
    url: PropTypes.string.isRequired,
    // 导入成功后的回调
    importSuccessCallback: PropTypes.func,

    customRequestCallback: PropTypes.func,
};





// const CAUpload = (props)=>{
    
//     return (
//         <Upload {...props}>
//             <Button type="primary" icon={<ImportOutlined />}>导入</Button>
//         </Upload>
//     )
// }

export default CAUpload;