<style lang="less">
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
    .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{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>
<template>
  <div >
    <template v-if="modeltype==='upload'">
    <Modal  title="上传文件" v-model="showUpload" class-name="vertical-center-modal" :footer-hide="true">
        <div class="demo-spin-col">
        <Row v-if="showType" type="flex" justify="center"  :gutter="4" style="margin-bottom: 20px">
            <Col>
                <RadioGroup v-model="type">
                    <Radio v-for="(item,index) in myConfig.typeData" :key="index" :label="item.code">
                        <span>{{item.name}}</span>
                    </Radio>
                </RadioGroup>
            </Col>
        </Row>
        <Row type="flex" justify="center"  :gutter="4">
            <Col>
                <Button @click="upload">上传</Button>
            </Col>
             <Col>
                <Poptip trigger="focus">
                 <Input v-model="name" clearable readonly/>
                    <template #content>
                    <div>{{filename}}</div>
                    </template>
                </Poptip>   
            </Col>
            <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>浏览</Button>
                        </Upload>
            </Col>
        </Row>
         <Spin v-show="loading" fix>
                <CommonIcon type="ios-loading" size="18" class="demo-spin-icon-load"></CommonIcon>
                <div>导入中</div>
        </Spin>
        </div>
    </Modal>
    </template>
    <template v-if="modeltype === 'down'">
        <Modal v-model="showUpload" title="选择模版" @on-ok="downTemplate" class-name="vertical-center-modal">
        <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:'billimport',
        data () {
            return {
                myConfig:{
                    typeData:[],
                    fileType:['xlsx','xls']
                },
                file: null,
                name:'',
                type:'',
                showType:false,
                showUpload:false,
                url:'',
                modeltype:'upload',
                param:{},
                loading:false
            };
        },
        props:{
            config: {
                type:Object,
                default () {
                    return {};
                }
            },
        } ,
        computed:{
            filename(){
                if (this.name) {
                    return this.name;
                } else {
                    return '请选择Excel文件';
                }
            }
        },
        created () {
            this.init();
        },
        methods: {
            init () {
                if (this.config) {
                    let config = this.$Method.copy(this.config);
                    for (let temp2 in this.myConfig) {
                        if (config[temp2] !== undefined) {
                            this.myConfig[temp2] = config[temp2];
                        }
                    }
                    if (this.myConfig.typeData && this.myConfig.typeData.length > 0) {
                        this.showType = true;
                        this.type = this.myConfig.typeData[0].code;
                    }
                }
            },
            setModeltype(value) {
                this.modeltype = value;
            },
            setShowUpload(flag) {
                this.showUpload = flag;
            },
            setUrl(url,method,param) {
                if (url) {
                    url = url.replace('rest', 'import');
                }
                let self = this;
                this.url = this.getResturl(url,method,{},self);
                if (this.type) {
                    param.billmoduleid =  param.billmoduleid+'_' +this.type;
                }
                if (this.myConfig.typeData.length > 1) {
                    this.type = this.myConfig.typeData[0].code;
                }
                this.url = this.url+'&param=' +encodeURI(JSON.stringify(param));
            },
            setDownUrl(url,param) {
                if (url) {
                    url = url.replace('rest', 'exportTemplate');
                }
                let self = this;
                this.url = 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.url +'&param=' +encodeURI(JSON.stringify(param));
                    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;
                }
                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 && res.returncode !== '0') {
                    this.showUpload = false;
                    this.file = null;
                    this.name = '';
                    this.alert(res.data);
                } else {
                    this.alert(res.elapsed,'导入成功');
                    this.showUpload = false;
                    this.file = null;
                    this.name = '';
                    this.$emit('importSuccess',res);
                }
                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>
