<!-- 设备列表 -->
<template>
  <div class="equip-list" id="equiplist">
    <!-- 筛选 -->
    <div class="clp">
      <Input
        class="baseItemInput"
        :width="188"
        iconType="search"
        placeholder="搜索元素名称"
        v-model="baseItemVal"
        @pressEnter="pressEnter"
      />
      <Popover type="confirm" placement="bottom-center">
        <template slot="content">
          <div class="">
            <div>
              <span>分区类型</span>
              <Cascader
                multiple
                allText="全部"
                :data="cascaderData6"
                showPanel
                width="300"
                @change="changeItem"
                @confirm="changeItem"
              ></Cascader>
            </div>
            <div>
              <span>建筑类型</span>
              <Cascader
                multiple
                allText="全部"
                :data="cascaderData6"
                showPanel
                width="300"
                @change="changeItem"
                @confirm="changeItem"
              ></Cascader>
            </div>
            <el-button class="reset" type="text">重置</el-button>
          </div>
        </template>
        <span
          @click="screen"
          class="icon iconfont icon-shaixuan shaixuan"
        ></span>
      </Popover>
    </div>
    <!-- 设备 list -->
    <div class="box-porfess" id="boxPorfess">
      <div class="porfess" v-for="(items, index) in equipmentTree" :key="index">
        <div @click="collapse(items)" class="porfess-title">
          <span>{{ items.aliasName }}</span>
          <i
            v-bind:class="[
              items.isShow ? 'caret-icon-active' : 'caret-icon',
              'el-icon-arrow-down',
            ]"
          ></i>
        </div>
        <el-collapse-transition>
          <div v-show="items.isShow">
            <div class="equipType" v-for="(item, i) in items.children" :key="i">
              <div class="equipType-title" @click="collapse(item)">
                <i
                  v-bind:class="[
                    item.isShow ? 'caret-icon-active' : 'caret-icon',
                    'el-icon-caret-bottom',
                  ]"
                ></i>
                <span>{{ item.aliasName }}</span>
              </div>
              <el-collapse-transition>
                <ul @mouseout="deletehover" v-show="item.isShow">
                  <li
                    @click="getEquipItem('lengganji.svg')"
                    v-for="(a, b) in item.children"
                    :key="b"
                    @mouseover="sethover(index, i, b)"
                  >
                    <div class="left">
                      <div class="showEyes">
                        <Icon
                          v-show="hoverIndex == '' + index + i + b"
                          name="preview"
                        />
                      </div>
                      <div class="icon">
                        <img
                          width="28"
                          height="28"
                          src="./../../../assets/images/equip/lengganji.svg"
                          alt=""
                        />
                      </div>
                    </div>
                    <div class="right">
                      <div class="t" :title="a.localName">
                        {{ a.localName ? a.localName : "--" }}
                      </div>
                      <div class="b" :title="a.localId">
                        {{ a.localId ? a.localId : "--" }}
                      </div>
                    </div>
                    <div class="icons">
                      <Icon
                        v-show="hoverIndex == '' + index + i + b"
                        name="more"
                      />
                    </div>
                  </li>
                </ul>
              </el-collapse-transition>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>

    <!-- 添加设备 -->
    <div class="addbtn" @click="openAddEqupModle">
      <i class="el-icon-plus"></i>
      添加设备示例
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { queryCategory } from "@/api/editer";
export default {
  data() {
    return {
      cascaderData6: [],
      hoverIndex: -1,
      baseItemVal: "",
      equipmentTree: [],
    };
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ"]),
    // 打开添加弹窗
    openAddEqupModle() {
      this.$emit("openAddEqupModle");
    },
    // 设置hover显示
    sethover(a, b, c) {
      this.hoverIndex = "" + a + b + c;
    },
    deletehover() {
      this.hoverIndex = -1;
    },
    // 获取设备图例
    getEquipItem(id) {
      const obj = {
        url: id,
      };
      this.SETLEGENDOBJ(obj);
      const cmd = "EditEuqipment";
      this.SETCHOICELEHEND(cmd);
    },
    // 筛选
    screen() {},
    // 判断是否再数组中
    isinlist(item, idName, name, list) {
      let index = -1;
      list.forEach((item, i) => {
        if (item[idName] == item[idName]) {
          index = i;
        }
      });
      if (index < 0) {
        list.push({
          [idName]: item[idName],
          [name]: item[name],
          isShow: true,
          children: [],
        });
      }
      return index;
    },
    // 折叠
    collapse(item) {
      item.isShow = !item.isShow;
    },
    //
    changeItem() {},
    pressEnter() {},
    // 获取设备相关的专业以及设备类型
    getCategory(idList) {
      queryCategory(idList).then((res) => {
        // 返回专业及其类型，根据类型 添加设备
        let category = res.content;
        category.forEach((item) => {
          item.isShow = true;
          if (item.children && item.children.length) {
            item.children.map((child) => {
              let obj = [];
              child.isShow = true;
              this.equipmentList.forEach((choiceItem) => {
                choiceItem.isShow = true;
                if (choiceItem.classCode == child.aliasCode) {
                  obj.push(choiceItem);
                }
              });
              if (obj.length) {
                child.children = obj;
              }
              return child;
            });
          }
        });
        this.equipmentTree = category;
      });
    },
  },
  computed: {
    ...mapState(["editCmd", "equipmentList"]),
  },
  watch: {
    equipmentList: {
      handler: function (val) {
        if (!val.length) return;
        const idList = [];
        val.forEach((item) => {
          idList.push(item.id);
        });
        this.getCategory(idList);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    const dombox = document.getElementById("equiplist");
    const boxPorfess = document.getElementById("boxPorfess");
    if (dombox) {
      boxPorfess.style.height = dombox.offsetHeight - 90 + "px";
      console.log("boxPorfess", boxPorfess.style);
    }
  },
};
</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;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.equip-list {
  width: 100%;
  height: 100%;
  position: relative;
  .clp {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 12px;
    .shaixuan {
      cursor: pointer;
    }
  }
  .box-porfess {
    min-height: 500px;
    overflow-y: scroll;
  }
  .porfess {
    .porfess-title {
      width: 100%;
      padding: 16px 16px 0 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
    .equipType {
      .equipType-title {
        margin: 20px 0 20px 18px;
        cursor: pointer;
      }
      ul {
        li {
          width: 100%;
          height: 48px;
          display: flex;
          cursor: pointer;
          justify-content: space-around;
          align-items: center;
          &:hover {
            background: #f5f6f7;
          }
          .left {
            width: 60px;
            display: flex;
            height: 100%;
            align-items: center;
            .showEyes {
              width: 28px;
              height: 28px;
            }
            .icon {
              width: 28px;
              height: 28px;
              border-radius: 50% 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .right {
            padding: 4px;
            box-sizing: border-box;
            flex: 1;
            .t {
              font-size: 14px;
              color: #1f2429;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .b {
              font-size: 10px;
              color: #8d9399;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .icons {
            width: 28px;
            height: 28px;
          }
        }
      }
    }
  }

  .addbtn {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(-40%);
    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;
  }
}
.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>