<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="addEqDialog">
        <el-row class="filters">
            <el-col :span="7" style="width: 268px">
                <el-input placeholder="输入设备名称、设备本地编码或数字化交付编码进行查询" v-model="keycode" clearable @clear="inputMsg" @keyup.enter.native="inputMsg">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="inputMsg"></i>
                </el-input>
            </el-col>
            <el-col :span="8.5" style="padding: 0 0">
                <floor-cascader @change="changeFloor" style="margin-left: 5px"></floor-cascader>
            </el-col>
            <el-col :span="8.5" style="padding-right: 0">
                <myCascader @change="changeDevice" :params="childParams"></myCascader>
            </el-col>
        </el-row>

        <div class="table-box">
            <el-table
                :data="tableData"
                style="width: 100%"
                height="350"
                v-loading="loading"
                :header-cell-style="headerStyle"
                ref="multipleTable"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.localName || scope.row.name || "" }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="localId" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
                <el-table-column :label="`数字化交付编码`" show-overflow-tooltip min-width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.infos ? (scope.row.infos.digitalDeliveryID ? scope.row.infos.digitalDeliveryID : "") : "" }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="equipCategory.name" :label="`${inSpaceType}类`" show-overflow-tooltip min-width="100"></el-table-column>
                <el-table-column prop="action" label="操作" min-width="80">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="toDetail(scope.$index, scope.row)" plain>查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                class="fr"
                v-show="tableData && tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNumber"
                :page-sizes="page.pageSizes"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            ></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button
                size="small"
                type="primary"
                title="选择设备类型后生效"
                style="float: left"
                :disabled="linkBtnDisabled"
                :loading="linkBtnLoading"
                @click="handleClickLink"
                >添加全部</el-button
            >
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { sysLinkEquip, unSysEq, sysBatchLinkEquip } from "@/api/scan/request";
import floorCascader from "@/components/old-adm/ledger/lib/floorCascader";
import myCascader from "@/components/old-adm/ledger/system/lib/equipType";
import { mapGetters } from "vuex";

export default {
    components: {
        floorCascader,
        myCascader,
    },

    data() {
        return {
            title: "添加系统内设备",
            keycode: "", //输入查询条件
            Buildfloor: ["all"], // 选中的建筑楼层
            Equipcategory: null, // 选中的设备类型
            inSpaceType: "设备",
            dialogVisible: false,
            tableData: [],
            loading: false,
            linkBtnDisabled: true,
            linkBtnLoading: false,
            selections: [], // 选中项
            page: {
                pageSize: 50,
                pageSizes: [10, 20, 50, 100],
                pageNumber: 1,
                total: 0,
            },
            headerStyle: {
                backgroundColor: "#e1e4e5",
                color: "#2b2b2b",
                lineHeight: "30px",
            }, // 列表样式,
        };
    },
    computed: {
        ...mapGetters("layout", ["projectId"]),
        childParams() {
            let temp = JSON.parse(JSON.stringify(this.params));
            return temp;
        },
    },
    props: {
        type: String, //选中的tab页
        params: Object, //查看的竖井关系信息
    },
    created() {},
    methods: {
        //修改建筑楼层
        changeFloor(value) {
            this.Buildfloor = value;
            this.page.pageNumber = 1;
            this.getTableData();
        },
        // 显示弹窗
        showDialog() {
            this.dialogVisible = true;
            this.page.pageNumber = 1;
            this.tableData = [];
            this.getTableData();
        },
        // 搜索框
        inputMsg() {
            this.page.pageNumber = 1;
            this.getTableData();
        },
        getTableData() {
            let params = {
                data: {
                    filters: `not id isNull`,
                    cascade: [{ name: "equipCategory" }],
                    orders: "createTime desc, id desc",
                    pageNumber: this.page.pageNumber,
                    pageSize: this.page.pageSize,
                },
                id: this.$route.query.SysID,
                shaftId: this.params.ShaftID,
            };
            if (this.Buildfloor[0] == "noKnow") {
                params.data.filters += `;buildingId isNull`;
            } else if (this.Buildfloor[0] && this.Buildfloor[0] != "all") {
                params.data.filters += `;buildingId='${this.Buildfloor[0]}'`;
            }
            if (this.Buildfloor[1] == "noKnow") {
                params.data.filters += `;floorId isNull`;
            } else if (this.Buildfloor[1] && this.Buildfloor[1] != "all") {
                params.data.filters += `;floorId='${this.Buildfloor[1]}'`;
            }
            if (this.keycode != "") {
                params.data.filters += `;name contain '${this.keycode}' or localName contain '${this.keycode}' or localId contain '${this.keycode}' or infos.digitalDeliveryID contain '${this.keycode}'`;
            }
            if (this.Equipcategory) {
                this.linkBtnDisabled = false;
                params.data.filters += `;classCode='${this.Equipcategory}'`;
            } else {
                this.linkBtnDisabled = true;
            }
            unSysEq(params, (res) => {
                res.content.forEach((item) => {
                    item.ShaftListName = "";
                    if (item.shaftList && item.shaftList.length) {
                        item.ShaftListName = item.shaftList
                            .map((shaft) => {
                                return shaft.localName ? shaft.localName : shaft.name;
                            })
                            .join("、");
                    }
                });
                this.tableData = res.content;
                this.page.total = res.total;
            });
        },
        /**
         * 按条件批量关联设备
         */
        handleClickLink() {
            this.linkBtnLoading = true;
            let params = {
                classCode: this.Equipcategory,
                sysId: this.$route.query.SysID,
            };
            if (this.Buildfloor[0] == "noKnow") {
                params.buildingId = `isnull`;
            } else if (this.Buildfloor[0] && this.Buildfloor[0] != "all") {
                params.buildingId = `${this.Buildfloor[0]}`;
            }
            if (this.Buildfloor[1] == "noKnow") {
                params.floorId = `isnull`;
            } else if (this.Buildfloor[1] && this.Buildfloor[1] != "all") {
                params.floorId = `${this.Buildfloor[1]}`;
            }
            if (this.keycode != "") {
                params.vague = `${this.keycode}`;
            }
            sysBatchLinkEquip(params, (res) => {
                if (res.result === "success") {
                    this.linkBtnLoading = false;
                    this.dialogVisible = false;
                    this.$message.success("关联成功！");
                    this.$emit("refresh");
                } else {
                    this.linkBtnLoading = false;
                    this.$message.console.error(`关联失败！${res.message ? "失败原因：" + res.message : ""}`);
                }
            });
        },
        //选中项修改
        handleSelectionChange(val) {
            this.selections = val;
        },
        savaRelation() {
            if (this.selections.length) {
                let params = {
                    sysId: this.$route.query.SysID,
                    equipIdList: this.selections.map((item) => {
                        return item.id;
                    }),
                };
                sysLinkEquip(params, (res) => {
                    this.dialogVisible = false;
                    this.$message.success("关联成功！");
                    this.$emit("refresh");
                });
            } else {
                this.$message("请选择要关联的设备");
            }
        },
        //修改设备类别
        changeDevice(value) {
            this.page.pageNumber = 1; //pageSize初始化
            this.Equipcategory = value;
            this.getTableData();
        },
        //改变pagesize
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getTableData();
        },
        //改变pageno
        handleCurrentChange(pageNo) {
            this.page.pageNumber = pageNo;
            this.getTableData();
        },
        // 查看详情
        toDetail() {
            this.$message("开发中");
        },
    },
};
</script>
<style lang="less" scoped>
#addEqDialog {
    .filters {
        margin-bottom: 10px;
    }

    .table-box {
        height: 370px;

        .fr {
            margin-top: 10px;
        }
    }
}

/deep/ #buildFloor .buildFloor {
    margin: 0 5px 0 5px;
}
</style>
