<!-- 空间列表 -->
<template>
    <div class="space-list">
        <!-- 筛选 -->
        <div class="clp">
            <Input
                class="baseItemInput"
                :width="188"
                iconType="search"
                placeholder="搜索空间名称"
                v-model="getPressMsg"
                @pressEnter="pressEnter"
                @clear="pressEnter"
                @input="pressEnter"
            />
        </div>
        <!-- 空间 list -->
        <div ref="localDom" class="box-profess">
            <div class="profess" v-show="!pressMsgData.length" v-for="items in spaceList" :key="items.classCode">
                <!-- 空间类名称 -->
                <div @click="collapse(items)" class="profess-title">
                    <i v-bind:class="[items.isShow ? 'caret-icon-active' : 'caret-icon', 'el-icon-caret-bottom ']"></i>
                    <span class="code-name">{{ items.codeName }}</span>
                    <div class="action">
                        <Icon class="equip-edit" name="edit" @click.stop.native="editSpace(items)" />
                        <Icon class="equip-delete" name="delete" @click.stop.native="deleteSpace(items)" />
                    </div>
                </div>
                <!-- 空间实例列表 -->
                <el-collapse-transition>
                    <div v-show="items.isShow">
                        <div
                            class="equipType"
                            @click="chioceItem(item)"
                            v-for="(item, i) in items.children"
                            :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
                            :key="i"
                        >
                            <!-- 本地名称-本地编码 -->
                            <span
                                class="local-name"
                                :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
                                >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
                            </span>
                            <!-- hover行显示小眼睛 -->
                            <div class="toggle-eyes">
                                <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
                            </div>
                        </div>
                    </div>
                </el-collapse-transition>
            </div>

            <!-- 筛选显示的空间类,空间实例 -->
            <div class="choice-equip" v-show="pressMsgData.length">
                <div
                    class="equipType"
                    @click="chioceItem(item)"
                    v-for="item in pressMsgData"
                    :key="item.id"
                    :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
                >
                    <span class="local-name" :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
                        >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
                    </span>
                    <div class="toggle-eyes">
                        <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加空间 -->
        <div class="addbtn" @click="openAddSpaceDialog"><i class="el-icon-plus"></i>添加显示空间</div>
        <edit-info-point type="space" @closeModal="showEditInfoPoint = false" :code="classCode" :showDialog="showEditInfoPoint" />
    </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import bus from "@/bus/bus";
import editInfoPoint from "./editInfoPoint";
import { ruleCreate } from "@/api/labsl";

export default {
    data() {
        return {
            cascaderData6: [], // 筛选待定
            hoverIndex: -1,
            getPressMsg: "", //搜索框
            pressMsgData: [], //搜索对应得数组
            spaceList: [], //空间列表 二维数组
            local: null, //table loading
            classCode: "",
            showEditInfoPoint: false,
        };
    },
    components: { editInfoPoint },
    computed: {
        ...mapState(["zoneIteMap", "zoneItemNum", "id", "graphId"]),
    },
    watch: {
        zoneItemNum(newV) {
            this.getSpaceList();
        },
    },
    mounted() {
        this.getSpaceList();
    },
    methods: {
        ...mapMutations(["ADDRULE"]),
        // 打开添加弹窗
        openAddSpaceDialog() {
            this.$emit("openAddSpaceDialog");
        },
        /**
         * 查新空间列表
         */
        getSpaceList() {
            // TODO: 获取vuex中空间列表数据
            const arr = Object.values(this.zoneIteMap);
            const obj = this._(arr).groupBy("legendData.classCode").value();
            const spaceList = [];
            for (const key in obj) {
                const element = obj[key];
                spaceList.push({
                    classCode: element[0].legendData.classCode,
                    codeName: element[0].legendData.codeName,
                    children: element,
                    isShow: true,
                });
            }
            this.spaceList = spaceList;

            /*  const spaceArr = [
                {
                    classCode: "GeneralZone",
                    codeName: "通用分区",
                    isShow: true,
                    children: [
                        {
                            id: "Eq11010500290353e50d583840c6a0b34d739dd0949b123123",
                            visible: true,
                            legendData: {
                                localName: "风井",
                                localId: "123sdf",
                                id: "Eq11010500290353e50d583840c6a0b34d739dd0949b",
                            },
                        },
                        {
                            id: "Eq11010500290353e50d583840c6a0b34d739dd0949b123123eqwrrw",
                            visible: true,
                            legendData: {
                                localName: "hhh",
                                localId: "43qwasdfa",
                                id: "Eq11010500290353e50d583840c6a0b34d739dd0949brweqrqer",
                            },
                        },
                    ],
                },
            ];
            this.spaceList = spaceArr; */
        },
        /**
         * 编辑空间类
         */
        editSpace(items) {
            this.classCode = items.classCode;
            this.showEditInfoPoint = true;
        },
        deleteSpace(items) {
            this.$confirm(`此操作将删除${items.codeName}, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                const postParams = {
                    content: [
                        {
                            graphCoding: this.id,
                            graphId: this.graphId,
                            returnType: "zone", // 返回类型(equip: 设备, equipGroup: 设备组, zone: 空间)
                            commond: "delete", // 命令类型(query: 查询, delete: 删除)
                            params: {
                                classCode: items.classCode,
                            },
                        },
                    ],
                };
                const res = await ruleCreate(postParams);
                if (res.result === "success") {
                    this.$message.success("删除成功");
                    if (res.entityList && res.entityList[0]) {
                        // 在vuex中添加 删除的规则
                        this.ADDRULE(res.entityList[0]);
                        // 发出删除设备指令
                        bus.$emit("removeZone", items.classCode, true);
                    }
                } else {
                    this.$message.error(res.message || "删除失败");
                }
            });
        },
        /**
         * 点击空间,更改图chioceItem
         */
        chioceItem(item) {
            bus.$emit("chioceItem", item);
        },
        /**
         * 切换空间显隐状态
         */
        toggleItemVisible(item) {
            // console.log(item);
            item.visible = !item.visible;
        },

        // 删除Item
        deleteItem(a) {
            bus.$emit("deleteItem", a);
        },
        // 折叠
        collapse(item) {
            item.isShow = !item.isShow;
        },
        // 搜索回车操作
        pressEnter() {
            const list = [];
            if (!this.getPressMsg) {
                this.pressMsgData = [];
                return;
            }
            // 对信息点相同得提取出来
            this.spaceList.map((item) => {
                item.children.map((space) => {
                    const localName = space?.legendData?.localName?.toLowerCase();
                    const localId = space?.legendData?.localId?.toLowerCase();
                    const msg = this.getPressMsg.toLowerCase();
                    if (localName.includes(msg) || localId.includes(msg)) {
                        list.push(space);
                    }
                });
            });
            this.pressMsgData = list;
        },
    },
};
</script>
<style lang="less" scoped>
div {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}

.space-list {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    // background-color: #fff;
    .clp {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        padding-right: 6px;
        .shaixuan {
            cursor: pointer;
        }
    }
    .box-profess {
        // min-height: 500px;
        flex: 1;
        overflow-y: scroll;
        padding: 12px 0;
    }
    .profess {
        .profess-title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            padding: 0 10px 0 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            color: #1f2429;
            .code-name {
                margin-left: 10px;
                flex: 1;
            }
            .action {
                // width: 100px;
                display: none;
                .equip-delete {
                    // cursor: not-allowed;
                }
            }
            &:hover {
                .action {
                    display: flex;
                    align-items: center;
                }
            }
        }
        .equipType {
            padding: 0 10px 0 40px;
            display: flex;
            align-items: center;
            .toggle-eyes {
                width: 20px;
                padding-left: 4px;
                display: flex;
                align-items: center;
                .p-icon {
                    display: none;
                }
            }
            &:hover {
                background-color: #f5f6f7;
                .p-icon {
                    display: inline-block;
                }
            }
            .local-name {
                flex: 1;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                font-weight: 600;
                color: #1f2429;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                .local-id {
                    font-weight: 500;
                    color: #8d9399;
                    line-height: 16px;
                }
            }

            .equipType-title {
                margin: 20px 0 20px 18px;
                cursor: pointer;
            }
        }
        // 选中的空间样式
        .equip-selected {
            background-color: #f5f6f7;
        }
        // 隐藏的空间列表样式
        .equip-hidden {
            .local-name {
                color: #8d9399;
                .local-id {
                    color: #8d9399;
                }
            }
        }
    }

    .addbtn {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.11);
        cursor: pointer;
        &:hover {
            color: #0091ff;
        }
    }
    .caret-icon {
        animation: nowhirling 0.2s linear forwards;
    }
    .caret-icon-active {
        animation: whirling 0.2s linear forwards;
    }
}
.choice-equip {
    .equipType {
        padding: 0 10px 0 20px;
        display: flex;
        align-items: center;
        .toggle-eyes {
            width: 20px;
            padding-left: 4px;
            display: flex;
            align-items: center;
            .p-icon {
                display: none;
            }
        }
        &:hover {
            background-color: #f5f6f7;
            .p-icon {
                display: inline-block;
            }
        }
        .local-name {
            flex: 1;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 600;
            color: #1f2429;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .local-id {
                font-weight: 500;
                color: #8d9399;
                line-height: 16px;
            }
        }

        .equipType-title {
            margin: 20px 0 20px 18px;
            cursor: pointer;
        }
    }
    // 选中的空间样式
    .equip-selected {
        background-color: #f5f6f7;
    }
    // 隐藏的空间列表样式
    .equip-hidden {
        .local-name {
            color: #8d9399;
            .local-id {
                color: #8d9399;
            }
        }
    }
}
.reset {
    position: absolute;
    bottom: 16px;
    left: 24px;
}
@keyframes whirling {
    0% {
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg); /* Internet Explorer */
        -moz-transform: rotate(-90deg); /* Firefox */
        -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
        -o-transform: rotate(-90deg); /* Opera */
    }
    100% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* Internet Explorer */
        -moz-transform: rotate(0deg); /* Firefox */
        -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
        -o-transform: rotate(0deg); /* Opera */
    }
}
@keyframes nowhirling {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* Internet Explorer */
        -moz-transform: rotate(0deg); /* Firefox */
        -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
        -o-transform: rotate(0deg); /* Opera */
    }
    100% {
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg); /* Internet Explorer */
        -moz-transform: rotate(-90deg); /* Firefox */
        -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
        -o-transform: rotate(-90deg); /* Opera */
    }
}
</style>