<!-- 导入数据组件 -->
<template>
    <div class="export-import-container">
        <el-button
            type="primary"
            plain
            @click="openDialog"
            icon="el-icon-upload2"
            >导入</el-button
        >
        <el-dialog
            :close-on-click-modal="false"
            title="导入"
            top='10vh'
            width="500px"
            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"
                        @click="downloadTemp"
                        :loading="downLoading"
                        >模板下载</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-item label="文件导入 :">
                    <el-row>
                        <el-col :span="10">
                            <el-upload
                                style="display: inline-block"
                                ref="upload"
                                accept=".xlsx,.xls"
                                :limit="1"
                                :auto-upload="false"
                                :action="importUrl"
                                :headers="uploadHeaders"
                                :before-upload="beforeUpload"
                                :on-exceed="onExceed"
                                :on-error="handleUploadResult"
                                :on-success="handleUploadResult"
                            >
                                <el-button
                                    size="small"
                                    type="primary"
                                    plain
                                    icon="el-icon-folder-opened"
                                    >选择Excel文件</el-button
                                >
                            </el-upload>
                        </el-col>
                        <el-col :span="12">
                            <el-button
                                style="display: inline-block"
                                type="primary"
                                icon="el-icon-upload"
                                @click="submitImport"
                                element-loading-text="拼命导入中"
                                v-loading.fullscreen.lock="uploading"
                            >
                                导 入
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
            </span>
        </el-dialog>
        <DataTemplateSetting
            ref="DataTemplate"
            type="import"
            :bizCode="bizCode"
            :tempFiles="tempFiles"
            :dataBaseOptions="dataBaseOptions"
            :originAPIOptions="originAPIOptions"
            @reload='checkTemp'
        />
    </div>
</template>

<script>
const DataTemplateSetting = () =>
    import('@/components/ImportExportData/DataTemplateSetting')
import portal from '@/api/portal'
export default {
    name: 'ImportData',
    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,
        },
    },
    computed: {
        uploadHeaders: function (mapState) {
            return {
                Authorization:
                    'Bearer ' + this.$store.state.login.currentUser.token,
            }
        },
        importUrl: function () {
            return (
                window.context[this.originAPIOptions.moduleRoot] +
                '/config/excel/v1/upload' +
                // this.originAPIOptions.url +
                '?export=import&tempId=' +
                this.bizCode
            )
        },
    },
    data() {
        return {
            dialogShow: false,
            noTemp: false, // 是否有模板
            downLoading: false,
            uploading: false,
            tempId: '',
        }
    },

    mounted() {},
    methods: {
        cancel() {
            this.$refs.upload.clearFiles()
            this.dialogShow = false
            this.tempId = ''
            this.noTemp = false
            this.downLoading = false
        },
        checkTemp() {
            let data = this.qs.stringify({
                type: 2,
                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.dialogShow = true
            this.checkTemp();
        },
        downloadTemp() {
            this.downLoading = true
            let params = {
                originAPIOptions: this.originAPIOptions,
                bizCode: this.bizCode,
            }
            console.log(params, 'params')
            portal.downloadTemp(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
            })
        },
        setTemp() {
            this.$refs.DataTemplate.openDialog(this.tempId)
        },
        beforeUpload(file) {
            if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
                this.$message.warning('只能导入Excel文件!')
                return false
            }
            this.uploading = true
        },
        //导入
        onExceed(file) {
            this.$message.warning('只能选择一个Excel文件!')
        },
        handleUploadResult(response, file, fileList) {
            this.uploading = false
            if (response.state) {
                this.$message.success(response.message)
                this.$emit('reload')
            } else {
                this.$message.error(response.message + '：' + response.value)
            }
        },
        submitImport() {
            if (
                !this.$refs.upload.uploadFiles ||
                this.$refs.upload.uploadFiles.length == 0
            ) {
                this.$message.warning('请选择要导入的数据文件!')
                return false
            }
            this.$refs.upload.submit()
        },
    },
}
</script>

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

.export-import-container ::v-deep .el-form-item__content {
    margin-left: 80px !important;
}
</style>


