<template>
    <div>
        <template v-if="modeltype==='upload'">
            <Modal  title="上传文件" v-model="showUpload" class-name="vertical-center-modal—bill" :footer-hide="true">
                <div class="demo-spin-col-bill">
                    <RadioGroup v-if="showType" v-model="type" style="margin-bottom:24px">
                        <Radio v-for="(item,index) in myConfig.typeData" :key="index" :label="item.code">
                            <span>{{item.name}}</span>
                        </Radio>
                    </RadioGroup>
                    <div style="height:220px;background-color: #F5F7FA;border:1px #DCDFE6 dashed">
                        <Row type="flex" justify="center" >
                            <Col  style="margin-top:30px;margin-bottom:10px">
                                <Icon  custom="iconfont icon-custom-excel" size="60"  />
                            </Col>
                        </Row>
                        <Row type="flex" justify="center">
                            <Col>
                                <Input v-model="name" style="width:150px;" :border="false" placeholder="(支持xls、xlsx格式)" clearable disabled/>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center"  :gutter="10">
                            <Col>
                                <Upload ref="upload"
                                        :before-upload="handleUpload"
                                        accept=".xlsx,.xls"
                                        :format="myConfig.fileType"
                                        :on-format-error="handleFormatError"
                                        :on-success="handleSuccess"
                                        :show-upload-list="false"
                                        :action="url">
                                    <Button  style="width:150px;">选择文件</Button>
                                </Upload>
                            </Col>
                        </Row>
                    </div>
                    <Spin v-show="loading" fix>
                        <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
                        <div>导入中</div>
                    </Spin>
                </div>
            </Modal>
        </template>
        <template v-if="modeltype === 'down'">
            <Modal v-model="showUpload" title="选择模版" @on-ok="downTemplate" class-name="vertical-center-modal—bill">
                <RadioGroup v-model="type">
                    <Radio v-for="(item,index) in myConfig.typeData" :key="index" :label="item.code">
                        <span>{{item.name}}</span>
                    </Radio>
                </RadioGroup>
            </Modal>
        </template>
        <template v-if="modeltype === 'export'">
            <Modal
                v-model="showUpload"
                title="导出选择"
                @on-ok="confirmExport"
                class-name="vertical-center-modal—bill"
            >
                <RadioGroup v-model="type">
                    <Radio
                        v-for="(item, index) in myConfig.typeData"
                        :key="index"
                        :label="item.code"
                    >
                        <span>{{ item.name }}</span>
                    </Radio>
                </RadioGroup>
            </Modal>
        </template>
    </div>
</template>
<script>
export default {
    name:'mbillimport',
    data () {
        return {
            myConfig:{
                typeData:[],
                fileType:['xlsx','xls'],
                setImportUrl:null
            },
            initConfig:{
                typeData:[],
                fileType:['xlsx','xls'],
                setImportUrl:null
            },
            file: null,
            name:'',
            type:'',
            showType:false,
            showUpload:false,
            modeltype:'upload',
            param:{},
            curlUrl:'',
            loading:false,
            downMethod:'exportTemplate',
            importMethod:'import'
        };
    },
    props:{
        config: {
            type:Object,
            default () {
                return {};
            }
        },
    } ,
    computed:{
        filename(){
            if (this.name) {
                return this.name;
            } else {
                return '(支持xls、xlsx格式)';
            }
        },
        url() {
            let url = this.curlUrl;
            let para = this.$Method.copy(this.param);
            if (this.showType) {
                if (this.myConfig.typeData.length > 0) {
                    if (this.type) {
                        para.billmoduleid = para.billmoduleid+'_' + this.type;
                    }
                }
            }
            return url+'&param=' +encodeURI(JSON.stringify(para));
        }
    },
    methods: {
        init () {
            this.myConfig = Object.assign({},this.initConfig, this.config);
            if (this.myConfig.typeData && this.myConfig.typeData.length > 0) {
                this.showType = true;
                this.type = this.myConfig.typeData[0].code;
            }
            if (this.myConfig.importMethod) {
                this.importMethod = this.myConfig.importMethod;
            }
            if (this.myConfig.downMethod) {
                this.downMethod = this.myConfig.downMethod;
            }
        },
        setModeltype(value) {
            this.modeltype = value;
        },

        setExportUrl(url, method, param, typeData) {
            this.modeltype = "export";
            this.curlUrl = this.getResturl(url, method, {}, this);
            this.param = param;
            this.myConfig.typeData = typeData;
            this.showUpload = true;
        },

        confirmExport() {
            if (!this.type) {
                this.$Message.error("请选择导出类型");
                return;
            }
            let newParam = Object.assign({}, this.param);
            // 拼接 billmoduleid_xxx
            newParam.billmoduleid = newParam.billmoduleid + "_" + this.type.split("_")[1];
            this.downloadExcel(this.curlUrl, this, newParam);
        },

        setShowUpload(flag) {
            if (flag) {
                this.init ();
            }
            this.showUpload = flag;
        },
        setUrl(url,method,param) {
            if (url) {
                url = url.replace('rest', this.importMethod);
            }
            let self = this;
            this.curlUrl = this.getResturl(url,method,{},self);
            if (this.myConfig.setImportUrl) {
                this.curlUrl = this.myConfig.setImportUrl(this.curlUrl,'import');
            }
            Object.assign(this.param, param);

            if (this.myConfig.typeData.length > 1) {
                if (!this.type) {
                    this.type = this.myConfig.typeData[0].code;
                }
            }
        },
        setDownUrl(url,param) {
            if (url) {
                url = url.replace('rest', this.downMethod);
            }
            let self = this;
            this.curlUrl = this.getResturl(url,null,{},self);
            if (this.myConfig.typeData.length > 1) {
                this.param = param;
                this.type = this.myConfig.typeData[0].code;
                this.showUpload = true;
            } else {
                let temp  = this.curlUrl +'&param=' +encodeURI(JSON.stringify(param));
                if (this.myConfig.setImportUrl) {
                    temp = this.myConfig.setImportUrl(temp,'down');
                }
                window.open(temp,'_self');
            }
        },
        handleUpload (file) {
            if (!this.checkFormat(file)) {
                this.handleFormatError(file);
                this.file = null;
                this.name = '';
                return false;
            } else {
                this.file = file;
                this.name = file.name;
                this.upload();
            }
            return false;
        },
        checkFormat(file) {
            const _file_format = file.name.split('.').pop().toLocaleLowerCase();
            const checked = this.myConfig.fileType.some(item => item.toLocaleLowerCase() === _file_format);
            return checked;
        },
        upload () {
            if (!this.name) {
                this.file = null;
            }
            if (this.file !== null) {
                this.loading = true;
                this.$refs.upload.post(this.file);
            }
        },
        handleFormatError (file) {
            let type = this.myConfig.fileType.join(',');
            this.alert('文件[' + file.name + ']的格式不正确，请上传格式为(' + type + ')的文件');
        },
        handleSuccess(res) {
            if (res && Number(res.returncode) !== 0) {
                this.showUpload = false;
                this.file = null;
                this.name = '';
                this.alert(res.data);
            } else {
                this.showUpload = false;
                this.file = null;
                this.name = '';
                if (this.myConfig.importSuccess) {
                    this.myConfig.importSuccess(res);
                } else {
                    if (this.$parent.doImportSuccess) {
                        this.$parent.doImportSuccess();
                    }
                    this.alert(res.elapsed,'导入成功');
                }
            }
            this.loading = false;

        },
        downTemplate() {
            if (this.type) {
                let param = this.$Method.copy(this.param);
                if (param.billmoduleid) {
                    param.billmoduleid =  param.billmoduleid + '_' + this.type;
                    let temp  = this.url +'&param=' +encodeURI(JSON.stringify(param));
                    window.open(temp,'_self');
                    this.showUpload = false;
                }

            }
        }
    }
};
</script>
<style lang="less" scoped>
.ivu-modal-wrap.vertical-center-modal—bill .ivu-modal-header{
    border-bottom:none;
    border-radius:10px;
}
.ivu-modal-wrap.vertical-center-modal—bill .ivu-modal-body{
    padding-top: 8px;
    padding-right: 28px;
    padding-bottom: 32px;
    padding-left: 28px;
}
.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
.demo-spin-col-bill{
    position: relative;
}
</style>
<style>

</style>
