<template>
    <div id="deviceList">
        <saga-title :mess="mess"></saga-title>
        <div class="table-main">
            <div class="search-header">
                <floor-cascader @change="changeFloor"></floor-cascader>
                <my-cascader ref="cascader" @change="changeDevice"></my-cascader>
                <el-tooltip class="item" effect="dark" content="按照本地名称 | 本地编码 | 图纸编码 | 交付编码关键字搜索" placement="top-start">
                    <el-input
                        v-show="param.deviceId"
                        v-model="param.keyWord"
                        @keyup.enter.native="handleChangeKeyWord"
                        @clear="handleChangeKeyWord"
                        clearable
                        placeholder="请输入关键字"
                        prefix-icon="el-icon-search"
                        style="width: 250px; margin-left: 10px"
                    ></el-input>
                </el-tooltip>
                <!-- <el-button size="small" @click="handleLinkAssets" class="iconfont icon-batchassociation">批量关联资产</el-button> -->
                <!-- <el-tooltip class="item" effect="dark" content="请选择建筑楼层和设备类" placement="top-start"> -->
                <el-dropdown @command="handleCommand" class="deviceList-excel">
                    <el-button type="primary"> 数据导入<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="dynamic">深化点表导入</el-dropdown-item>
                        <el-dropdown-item command="static">台账信息导入</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- </el-tooltip> -->
            </div>
            <hanson-table @close="close" :graphyId="graphyId" ref="tableMain"></hanson-table>
        </div>
        <linkassets-dialog :dialog="dialog"></linkassets-dialog>
        <!-- 深化点表导入 -->
        <dynamic-dialog ref="dynamicDialog" @upDataDevice="upDataDevice"></dynamic-dialog>
        <!-- 台账信息导入 -->
        <static-dialog ref="staticDialog" @upDataDevice="upDataDevice"></static-dialog>
    </div>
</template>
<script>
import sagaTitle from "../components/lib/title";
import floorCascader from "../components/lib/floorCascader";
import myCascader from "../components/lib/equipCascader";
import hansonTable from "../components/handsontables/device";
import linkassetsDialog from "../components/lib/linkassets";

import EquipController from "@/controller/old-adm/equipController";
import dynamicDialog from "../components/lib/dynamicDialog";
import staticDialog from "../components/lib/staticDialog";
import { mapGetters } from "vuex";

export default {
    components: {
        sagaTitle,
        floorCascader,
        myCascader,
        hansonTable,
        linkassetsDialog,
        staticDialog,
        dynamicDialog,
    },
    data() {
        return {
            currentBuilding: "", // 当前建筑楼层信息
            mess: {
                perjectName: "",
                name: [
                    {
                        key: "设备",
                        num: 0,
                    },
                    {
                        key: "资产",
                        num: 0,
                    },
                ],
            },
            param: {
                buildId: "",
                floorId: "",
                deviceId: "",
                keyWord: "", //检索关键字
                ProjId: "",
                secret: "",
            },
            assetGroupList: [],
            graphyId: null,
            dialog: {
                linkAssets: false,
            },
        };
    },
    computed: {
        ...mapGetters('layout', ["projectId", "projects", "secret", "userId"]),
    },
    watch: {
        projectId() {
            this.param.ProjId = this.projectId;
            this.param.secret = this.secret;
            this.getProjName();
            this.getCount();
        },
    },
    created() {
        this.param.ProjId = this.projectId;
        this.param.secret = this.secret;
        this.getProjName();
        this.getCount();
    },
    activated() {
        if (!this.$route.meta.isBack) {
            this.param.ProjId = this.projectId;
            this.param.secret = this.secret;
            this.getProjName();
            this.getCount();
            let deviceId = this.$route.params.deviceId;
            if (deviceId) {
                this.$nextTick(() => {
                    this.$refs.cascader.setValue(deviceId);
                    this.changeDevice({ code: deviceId, facility: this.$route.params.facility });
                });
            } else {
                this.$nextTick(() => {
                    this.$refs.cascader.setValue("");
                    this.changeDevice({ code: "", facility: "" });
                });
            }
        }
        this.$route.meta.isBack = false;
    },
    /**
     * 路由守卫
     * 从部件和详情页返回，设置页面缓存
     */
    beforeRouteEnter(to, from, next) {
        const routerList = ["/ledger/parts", "/ledger/partsmanage", "/ledger/deviceDetails"]
        if (routerList.includes(from.path)) {
            to.meta.isBack = true;
        } else {
            to.meta.isBack = false;
        }
        next();
    },
    methods: {
        getProjName() {
            this.projects.forEach((item) => {
                if (item.id == this.projectId) this.mess.perjectName = item.name;
            });
        },
        close(val) {
            this.getCount();
            this.$refs.tableMain.getTableData();
        },
        //获取统计数量
        async getCount() {
            let param = {
                filters: "not propertyId isnull",
            };
            let [res1, res2] = await Promise.all([EquipController.countEquip({filters: ''}), EquipController.countEquip(param)])
            this.mess.name[0].num = res1.count
            this.mess.name[1].num = res2.count;
        },
        //修改楼层
        changeFloor(value) {
            if (value[0]) {
                this.param.buildId = value[0];
            }
            if (value[1]) {
                this.param.floorId = value[1];
            } else {
                this.param.floorId = null;
            }
            if (!!this.param.deviceId) {
                if (this.$refs.tableMain) this.$refs.tableMain.getHeaderData(this.param);
            }
            this.currentBuilding = value;
            this.$refs.cascader.getData(value);
        },

        //修改设备族
        changeDevice(value) {
            this.param.deviceId = value.code || "";
            this.param.name = value.facility || "";
            this.param.keyWord = "";
            if (this.$refs.tableMain) this.$refs.tableMain.getHeaderData(this.param);
        },
        // 修改检索关键字
        handleChangeKeyWord() {
            if (this.$refs.tableMain) this.$refs.tableMain.getTableData(this.param.keyWord);
        },
        // 刷新数据
        upDataDevice() {
            this.$refs.tableMain.getTableData();
        },
        // 批量关联资产
        handleLinkAssets() {
            this.dialog.linkAssets = true;
        },
        /**
         * 选择下拉菜单
         * @param command   下拉选项标识
         */
        handleCommand(command) {
            // 选择深化点表导入
            if (command === "dynamic") {
                this.$refs.dynamicDialog.openDialog();
            } else if (command === "static") {
                // 选择台账信息导入
                this.$refs.staticDialog.openDialog();
            }
        },
    },
};
</script>
<style lang="less" scoped>
#deviceList {
    overflow: hidden;
    height: 100%;
    background-color: #fff;
    position: relative;

    .table-main {
        position: absolute;
        top: 87px;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        // border-radius: 5px;
        // padding: 10px 0;
    }

    .search-header {
        overflow: hidden;
        padding-bottom: 10px;
        margin: 0 10px;
        border-bottom: 1px solid #bcbcbc;

        .deviceList-excel {
            float: right;
            margin-right: 15px;
        }

        .icon-batchassociation {
            float: right;
            font-size: 12px;

            /deep/ span {
                margin-left: 5px;
            }
        }
    }
}
</style>
