<!-- 设备列表 -->
<template>
  <div class="equip-list" id="equiplist">
    <!-- 筛选 -->
    <div class="clp">
      <Input
        class="baseItemInput"
        :width="188"
        iconType="search"
        placeholder="请搜索实例名称"
        v-model="getPressMsg"
        @pressEnter="pressEnter"
        @clear="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 ref="localDom" class="box-porfess" id="boxPorfess">
      <div
        class="porfess"
        v-show="!pressMsgData.length"
        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
                    v-for="(a, b) in item.children"
                    :key="b"
                    @mouseover="sethover(index, i, b)"
                    @click="clickEquipItem(a)"
                    v-bind:class="[a.selected ? 'li-active' : '']"
                  >
                    <div class="left">
                      <div class="showEyes">
                        <Icon
                          v-show="hoverIndex == '' + index + i + b"
                          :name="a.visible ? 'preview' : 'hide'"
                          @click="ShowItem(a)"
                        />
                      </div>
                      <div class="icon">
                        <img width="28" height="28" :src="a.img.url" alt="" />
                      </div>
                    </div>
                    <div class="right">
                      <div class="t" :title="a.legendData.properties.localName">
                        {{
                          a.legendData.properties.localName
                            ? a.legendData.properties.localName
                            : "--"
                        }}
                      </div>
                      <div class="b" :title="a.legendData.properties.localId">
                        {{
                          a.legendData.properties.localId
                            ? a.legendData.properties.localId
                            : "--"
                        }}
                      </div>
                    </div>
                    <div class="icons">
                      <Popover
                        v-show="hoverIndex == '' + index + i + b"
                        type="base"
                        placement="top-center"
                      >
                        <template slot="content">
                          <Button @click="deleteItem(a)" type="text" icon="edit"
                            >删除</Button
                          >
                        </template>
                        <Icon name="more" />
                      </Popover>
                    </div>
                  </li>
                </ul>
              </el-collapse-transition>
            </div>
          </div>
        </el-collapse-transition>
      </div>
      <ul class="choiceEquip" v-show="pressMsgData.length">
        <li
          v-for="(a, b) in pressMsgData"
          :key="b"
          @mouseover="sethover(10000, 10000, b)"
          @click="clickEquipItem(a)"
          v-bind:class="[a.selected ? 'li-active' : '']"
        >
          <div class="left">
            <div class="showEyes">
              <Icon
                v-show="hoverIndex == '' + 10000 + 10000 + b"
                :name="a.visible ? 'preview' : 'hide'"
                @click="ShowItem(a)"
              />
            </div>
            <div class="icon">
              <img width="28" height="28" :src="a.img.url" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="t" :title="a.legendData.properties.localName">
              {{
                a.legendData.properties.localName
                  ? a.legendData.properties.localName
                  : "--"
              }}
            </div>
            <div class="b" :title="a.legendData.properties.localId">
              {{
                a.legendData.properties.localId
                  ? a.legendData.properties.localId
                  : "--"
              }}
            </div>
          </div>
          <div class="icons">
            <Popover
              v-show="hoverIndex == '' + 10000 + 10000 + b"
              type="base"
              placement="top-center"
            >
              <template slot="content">
                <Button @click="deleteItem(a)" type="text" icon="edit"
                  >删除</Button
                >
              </template>
              <Icon name="more" />
            </Popover>
          </div>
        </li>
      </ul>
    </div>

    <!-- 添加设备 -->
    <div class="addbtn" v-show="equipmentTree.length" @click="openAddEqupModle">
      <i class="el-icon-plus"></i>
      添加设备示例
    </div>
    <!-- 没有任何设备的效果图 -->
    <div class="no-equip" v-show="!equipmentTree.length">
       <img src="./../../../assets/images/no-data.png" alt="">
       <p>点击下方按钮，可添加实例对象</p>
       <el-button  @click="openAddEqupModle" type="primary">添加实例对象</el-button>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import { queryCategory } from "@/api/editer";
import bus from "@/bus/bus";
export default {
  data() {
    return {
      cascaderData6: [], // 筛选待定
      hoverIndex: -1,
      getPressMsg: "", //搜索框
      pressMsgData: [], //搜索对应得数组
      equipmentTree: [], //三级设备树
      local: null, //table loading
    };
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ"]),
    // 打开添加弹窗
    openAddEqupModle() {
      this.$emit("openAddEqupModle");
    },
    // 设置hover显示
    sethover(a, b, c) {
      this.hoverIndex = "" + a + b + c;
    },
    deletehover() {
      this.hoverIndex = -1;
    },
    // 是否展示图例
    ShowItem(a) {
      a.visible = !a.visible;
    },
    // 删除Item
    deleteItem(a) {
      bus.$emit("deleteItem", a);
    },
    // 获取设备图例
    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;
    },
    //  局部加载
    localLoading() {
      // 为了解决 v-if refs获取不到dom
      setTimeout(() => {
        this.local = this.$loading({
          el: this.$refs.localDom,
          type: "local",
          size: "min",
        });
      });
    },
    //
    changeItem() {},
    // 搜索回车操作
    pressEnter() {
      const list = [];
      if (!this.getPressMsg) {
        this.pressMsgData = [];
        return;
      }
      // 对信息点相同得提取出来
      this.equipmentTree.forEach((item) => {
        item.children.forEach((a) => {
          console.log("a.name", a);
          a.children.forEach((b) => {
            console.log("b.name", b);
            if (b.legendData.properties.localName.includes(this.getPressMsg)) {
              list.push(b);
            }
          });
        });
      });
      this.pressMsgData = list;
    },
    // 获取设备相关的专业以及设备类型
    getCategory(itemList) {
      // id 数组
      const idList = [];
      itemList.forEach((item) => {
        idList.push(item.legendData.attachObjectIds[0]);
      });
      queryCategory(idList)
        .then((res) => {
          // 返回专业及其类型，根据类型 添加设备
          let category = res.content ? res.content : [];
          category.forEach((item) => {
            item.isShow = true;
            if (item.children && item.children.length) {
              item.children.map((child) => {
                let obj = [];
                child.isShow = true;
                this.equipmentItemList.forEach((choiceItem) => {
                  if (
                    choiceItem.legendData.properties.classCode ==
                    child.aliasCode
                  ) {
                    obj.push(choiceItem);
                  }
                });
                if (obj.length) {
                  child.children = obj;
                }
                return child;
              });
            }
          });
          this.equipmentTree = category;
          // $loading结束
          this.$loading.close(this.local);
        })
        .catch((err) => {
          console.log("接口问题：", err);
          // $loading结束
          this.$loading.close(this.local);
        });
    },
    // 点击设备实例
    clickEquipItem(item) {
      console.log("item", item);
      // 选中 item
      bus.$emit("chioceItem", item);
    },
  },
  computed: {
    ...mapState(["editCmd", "equipmentItemList", "equipmentItemNum"]),
  },
  watch: {
    equipmentItemNum: {
      handler: function (val) {
        this.localLoading();
        this.getCategory(this.equipmentItemList);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    const dombox = document.getElementById("equiplist");
    const boxPorfess = document.getElementById("boxPorfess");
    if (dombox) {
      boxPorfess.style.height = dombox.offsetHeight - 90 + "px";
    }
  },
};
</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;
          }
        }
        .li-active {
          background: #f5f6f7;
        }
      }
    }
  }

  .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;
  }
  // 没有设备状态
  .no-equip{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    img{
      width: 80px;
      height: 80px;
    }
    p{
      font-size: 14px;
    }

  }
}
.choiceEquip {
  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;
    }
  }
}
.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>