<template>
    <el-dialog :title="title" append-to-body :modelValue="importBox" width="555px" @close="closeDialog">
        <avue-form :option="importOption" v-model="importForm" :upload-after="uploadAfter">
        <template #excelTemplate>
            <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
            </el-button>
        </template>
        </avue-form>
    </el-dialog>
</template>

<script>
import { exportBlob } from '@/api/common';
import website from '@/config/website';
import { getToken } from '@/utils/auth';
import { downloadXls } from '@/utils/util';
export default {
    props: {
        title:{
            type:String,
            default:'导入'
        },
        isShow:{
            type:Boolean,
            default:false
        },
        templateUrl:{
            type:String,
            default:''
        },
        templateName:{
            type:String,
            default:'模板'
        },
        importUrl:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            importBox:false,
            importForm:{},
            importOption:{
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '模板上传',
                        prop: 'excelFile',
                        type: 'upload',
                        drag: true,
                        loadText: '模板上传中，请稍等',
                        span: 24,
                        propsHttp: {
                            res: 'data',
                        },
                        tip: '请上传 .xls,.xlsx 标准格式文件',
                        action: this.importUrl,
                    },
                    {
                        label: '模板下载',
                        prop: 'excelTemplate',
                        formslot: true,
                        span: 24,
                    },
                ],
            }
        }
    },
    mounted(){
        console.log('isShowImport=================',this.isShow)
        this.importBox = this.isShow
    },
    methods:{
        closeDialog() {
            this.importBox = false;
            this.$emit('closeDialog');
        },
        handleTemplate() {
            exportBlob(
                `${this.templateUrl}?${this.website.tokenHeader}=${getToken()}`
            ).then(res => {
                downloadXls(res.data, this.templateName);
            });
        },
        uploadAfter(res, done, loading, column) {
            this.closeDialog()
            done();
        },
    }
}
</script>

<style>

</style>