<template>
    <el-dialog title="深化点表导入" :visible.sync="dialogFormVisible" class="dialogFormVisible" @close="handleCloseDialog">
        <div v-show="active == 1">
            <h5 class="title">1、需要在深化点表中插入1列，表头为“反馈信息”，此列请不要填充内容。</h5>
            <h5 class="title">2、深化点表中需含“本地编码”、“信息点编码”、“表号”、“功能号”、“反馈信息”五列，对五列的具体位置和顺序不做要求。</h5>
            <h5 class="title">
                3、本地编码不能为空：系统从上到下逐行识别信息，若遇到本地编码的单元格为空时，系统将判定已完成信息识别，不再向下继续识别。
            </h5>
            <h5 class="title">
                4、上传深化点表结束后，请在弹窗左下角点击“下载导入结果”，下载后查看表格“反馈信息”列，若上传失败，则根据失败原因在反馈列显示“本地编码重复”、“信息点编码不能为空”、“表号不能为空”、“功能号不能为空”等。
            </h5>
            <el-upload
                class="upload-demo"
                drag
                :action="`${baseUrl}${dataCenter}/graphic/import/point`"
                accept=".xlsx"
                :show-file-list="false"
                :headers="headers"
                name="file"
                multiple
                :on-progress="progress"
                :on-success="success"
                :on-error="error"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传Excel文件</em></div>
                <div class="el-upload__tip tips" slot="tip">
                    上传的Excel数据将完全覆盖当前设备信息点（原有数据不会保留）
                    <el-button style="float: right" v-if="historyKey" type="primary" @click="download(historyKey)">下载上一次导入结果</el-button>
                </div>
            </el-upload>
        </div>
        <div v-show="active == 2">
            <div class="block">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        :size="activity.size"
                    >
                        {{ activity.content }}
                    </el-timeline-item>
                </el-timeline>
            </div>
            <el-button :disabled="!messageKey" @click="download(messageKey)">下载导入结果</el-button>
            <footer slot="footer" style="text-align: right" class="dialog-footer">
                <el-button @click="active = 1">返回</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
            </footer>
        </div>
    </el-dialog>
</template>

<script>
import storage from "@/framework/utils/storage";
import { baseUrl, dataCenter } from "@/api/scan/config.js";
import { queryDownloadsKey } from "@/api/scan/request";
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            active: 1,
            dialogFormVisible: false,
            messageKey: "",
            historyKey: "",
            activities: [],
            baseUrl: baseUrl,
            dataCenter: dataCenter,
        };
    },
    computed: {
        ...mapGetters("layout", ["projectId"]),
        headers() {
            return {
                ProjectId: this.projectId,
                Comming: "adm",
                Account: storage.get("user_name"),
            };
        },
    },
    methods: {
        openDialog() {
            this.dialogFormVisible = true;
        },
        /**
         * 获取导入历史key
         */
        getHistoryKey() {
            const params = {
                filters: "type = 'iot'",
                orders: "createTime desc",
                pageSize: 1,
            };
            queryDownloadsKey(params, (res) => {
                if (res.result === "success" && res.content && res.content.length && res.content[0].key) {
                    this.historyKey = res.content[0].key;
                } else {
                    this.historyKey = "";
                }
            });
        },
        progress(event, file, fileList) {
            this.active = 2;
            this.activities = [
                {
                    content: "数据文件处理中..",
                    size: "large",
                    type: "primary",
                    icon: "el-icon-check",
                    color: "#0bbd87",
                },
            ];
        },
        success(event, file, fileList) {
            if (event.result == "success") {
                this.messageKey = event.message;
                if (event.content && event.content[0] && event.content[0].state === "0") {
                    // 全部导入成功
                    this.activities = [
                        {
                            content: "数据文件处理中..",
                            size: "large",
                            type: "primary",
                            icon: "el-icon-check",
                            color: "#0bbd87",
                        },
                        {
                            content: `全部导入成功（导入信息点：${event.content[0].successCount} 条）`,
                            color: "#0bbd87",
                            icon: "el-icon-check",
                            size: "large",
                            type: "success",
                        },
                    ];
                    // 导入成功刷新台账数据
                    this.$emit("upDataDevice");
                } else if (event.content && event.content[0] && event.content[0].state === "1") {
                    // 部分导入成功
                    this.activities = [
                        {
                            content: "数据文件处理中..",
                            size: "large",
                            type: "primary",
                            icon: "el-icon-check",
                            color: "#0bbd87",
                        },
                        {
                            content: `部分导入成功（导入成功：${event.content[0].successCount} 条；导入失败：${event.content[0].failCount} 条）`,
                            color: "#0bbd87",
                            icon: "el-icon-check",
                            size: "large",
                            type: "success",
                        },
                    ];
                    // 导入成功刷新台账数据
                    this.$emit("upDataDevice");
                } else {
                    // 导入失败
                    this.activities = [
                        {
                            content: "数据文件处理中..",
                            size: "large",
                            type: "primary",
                            icon: "el-icon-check",
                            color: "#0bbd87",
                        },
                        {
                            content: "导入失败！",
                            color: "#f56c6c",
                            icon: "el-icon-close",
                            size: "large",
                            type: "primary",
                        },
                    ];
                }
            } else {
                this.messageKey = "";
                if (event.result === "failure" && event.message) {
                    this.activities = [
                        {
                            content: "数据文件处理中..",
                            size: "large",
                            type: "primary",
                            icon: "el-icon-check",
                            color: "#0bbd87",
                        },
                        {
                            content: `导入失败！（${event.message}）`,
                            color: "#f56c6c",
                            icon: "el-icon-close",
                            size: "large",
                            type: "primary",
                        },
                    ];
                } else {
                    this.activities = [
                        {
                            content: "数据文件处理中..",
                            size: "large",
                            type: "primary",
                            icon: "el-icon-check",
                            color: "#0bbd87",
                        },
                        {
                            content: "导入失败！",
                            color: "#f56c6c",
                            icon: "el-icon-close",
                            size: "large",
                            type: "primary",
                        },
                    ];
                }
            }
        },
        error(event, file, fileList) {},
        download(key) {
            const url = `${baseUrl}${dataCenter}/graphic/downloads/point?key=` + key;
            let a = document.createElement("a");
            a.href = url;
            a.download = `${key}.xlsx`;
            a.click();
        },
        handleCloseDialog() {
            this.messageKey = "";
            this.historyKey = "";
            this.active = 1;
            this.activities = [];
        },
    },
    watch: {
        dialogFormVisible(n, o) {
            // 打开弹窗获取历史导入key值
            if (n) this.getHistoryKey();
        },
    },
};
</script>

<style scoped lang="less">
.dialogFormVisible {
    .time {
        margin: 10px 0;
        font-size: 15px;

        .text {
            margin-right: 10px;
            font-size: 14px;
        }
    }

    .tips {
        color: red;
        font-size: 14px;
        font-weight: bold;
    }

    /deep/ .el-upload {
        width: 100%;
    }

    /deep/ .el-upload-dragger {
        margin: 0 auto;
        width: 100%;
    }
}
</style>
