<!-- 导入数据组件 -->
<template>
    <div class="export-import-container">
        <el-button
            type="primary"
            plain
            @click="openDialog"
            icon="el-icon-download"
            >导出</el-button
        >
        <el-dialog
            :close-on-click-modal="false"
            title="导出"
            width="500px"
            top="10vh"
            appendToBody
            :visible.sync="dialogShow"
            @close="cancel"
        >
            <el-form ref="form" label-width="80px">
                <el-form-item label="导出数据 :">
                    <el-button
                        type="primary"
                        icon="el-icon-download"
                        :disabled="noTemp"
                        :loading="downLoading"
                        @click="exportData"
                        >导出Excle</el-button
                    ><i
                        class="el-icon-warning"
                        v-if="noTemp"
                        style="color: #e6a23c; margin-left: 10px"
                        >尚无导出模板，请配置后再导出！</i
                    >
                </el-form-item>
                <el-form-item label="模板配置 :">
                    <el-button
                        type="primary"
                        icon="el-icon-setting"
                        @click="setTemp"
                        >模板配置</el-button
                    >
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
            </span>
        </el-dialog>
        <DataTemplateSetting
            ref="DataTemplate"
            type="export"
            :tempFiles="tempFiles"
            :bizCode="bizCode"
            :dataBaseOptions="dataBaseOptions"
            :originAPIOptions="originAPIOptions"
            @reload="checkTemp"
        />
    </div>
</template>

<script>
const DataTemplateSetting = () =>
    import('@/components/ImportExportData/DataTemplateSetting')
import portal from '@/api/portal'
export default {
    name: 'ExportData',
    components: {DataTemplateSetting},
    props: {
        // 页面组件别名
        bizCode: {
            type: String,
            default: '',
            required: true,
        },
        // 模板文件名称
        tempFiles: {
            type: String,
            default: '',
            required: true,
        },
        originAPIOptions: {
            type: Object,
            default: () => {},
            required: true,
        },
        dataBaseOptions: {
            type: Object,
            default: () => {},
            required: true,
        },
        // 导出数据的条件查询 跟页面查询同步
        exportQuery: {
            type: Object,
            default: () => {},
            required: true,
        },
    },
    data() {
        return {
            noTemp: false, //  是否已有模板
            dialogShow: false,
            downLoading: false,
            tempId: '',
        }
    },
    methods: {
        checkTemp() {
            let data = this.qs.stringify({
                type: 1,
                bizCode: this.bizCode,
            })
            portal.checkTemp(data).then((res) => {
                if (res) {
                    this.noTemp = false
                    this.tempId = res.excelTemp.id
                } else {
                    this.noTemp = true
                    this.tempId = ''
                }
            })
        },
        openDialog() {
            this.checkTemp()
            this.dialogShow = true
        },
        cancel() {
            this.dialogShow = false;
            this.tempId = '';
            this.noTemp = false;
            this.downLoading = false;
        },
        setTemp() {
            this.$refs.DataTemplate.openDialog(this.tempId)
        },
        // 下载
        exportData() {
            this.downLoading = true
            let params = {
                originAPIOptions: this.originAPIOptions,
                bizCode: this.bizCode,
                exportQuery: this.exportQuery,
            }
            portal.ExportData(params).then((res) => {
                const content = res
                const blob = new Blob([content])
                const fileName = `${this.tempFiles}.xls`
                const elink = document.createElement('a')
                elink.download = fileName
                elink.style.display = 'none'
                elink.href = URL.createObjectURL(blob)
                document.body.appendChild(elink)
                elink.click()
                URL.revokeObjectURL(elink.href) // 释放URL 对象
                document.body.removeChild(elink)
                this.downLoading = false
            })
        },
    },
}
</script>

<style lang='scss' scoped>
@import '../style.scss';
</style>