<!-- 添加基础实例 -->

<template>
  <div class="base-item-list">
    <Input
      class="baseItemInput"
      :width="188"
      placeholder="请搜索元素名称"
      iconType="search"
      v-model="baseItemVal"
      @pressEnter="pressEnter"
      @clear="pressEnter"
    />
    <div
      v-show="!baseItemList.length"
      class="lengend-item"
      v-for="(item, index) in baseEditItems"
      :key="index"
    >
      <div class="legend-title" @click="collapse(item)">
        <span>{{ item.title }}</span
        ><i
          :class="[
            item.isClip ? 'caret-icon-active' : 'caret-icon',
            'el-icon-arrow-down',
          ]"
        ></i>
      </div>
      <el-collapse-transition>
        <div v-show="item.isClip">
          <div
            class="legend-content"
            v-for="(itemList, i) in item.itemList"
            :key="i"
          >
            <div @click="collapse(itemList)" class="title">
              {{ itemList.title }}
              <i
                v-bind:class="[
                  itemList.isClip ? 'caret-icon-active' : 'caret-icon',
                  'el-icon-caret-bottom ',
                ]"
              ></i>
            </div>
            <el-collapse-transition>
              <ul v-show="itemList.isClip">
                <li
                  :class="{ 'btn-active': editCmd == baseItem.id }"
                  v-for="(baseItem, k) in itemList.itemList"
                  :key="k"
                  @click="drawItem(baseItem.id)"
                  :title="baseItem.name"
                >
                  <img class="icon" :src="baseItem.icon" />
                  <span class="iconName">{{ baseItem.name }}</span>
                </li>
              </ul>
            </el-collapse-transition>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <ul class="baseItems" v-show="baseItemList.length">
      <li
        :class="{ 'btn-active': editCmd == baseItem.id }"
        v-for="(baseItem, k) in baseItemList"
        :key="k"
        @click="drawItem(baseItem.id)"
        :title="baseItem.name"
      >
        <img class="icon" :src="baseItem.icon" />
        <span class="iconName">{{ baseItem.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { baseEditItems } from "./data";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      baseEditItems,
      baseItemVal: "", //基础组件搜索
      baseItemList: [], // 搜索后返回得数组
    };
  },
  computed: {
    ...mapState(["editCmd"]),
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND"]),
    drawItem(item) {
      this.SETCHOICELEHEND(item);
    },
    pressEnter() {
      const list = [];
      if (!this.baseItemVal) {
        this.baseItemList = [];
        return;
      }
      // 对信息点相同得提取出来
      this.baseEditItems[0].itemList.forEach((item) => {
        item.itemList.forEach((a) => {
          if (a.name.includes(this.baseItemVal)) {
            list.push(a);
          }
        });
      });
      this.baseItemList = list;
    },
    // /是否下拉折叠
    collapse(item) {
      item.isClip = !item.isClip;
    },
  },
};
</script>
<style lang="less" scoped>
.base-item-list {
  .baseItemInput {
    margin: 12px 16px;
  }
  .lengend-item {
    width: 100%;
    .legend-title {
      display: block;
      font-size: 14px;
      padding: 0 10px 0 10px;
      box-sizing: border-box;
      color: #8d9399;
      border-top: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      span {
        height: 38px;
        line-height: 38px;
      }
    }
    .legend-content {
      padding: 0 10 10px 10px;
      box-sizing: border-box;
      .title {
        margin-left: 10px;
        font-weight: bold;
        color: #1f2429;
        font-size: 14px;
        padding-top: 16px;
        padding-bottom: 16px;
        cursor: pointer;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee;
        li {
          font-size: 12px;
          width: 52px;
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding: 4px;
          box-sizing: border-box;
          margin: 0 10px 16px 10px;
          .icon {
            width: 28px;
            height: 28px;
            // background: red;
          }
          .iconName {
            width: 100%;
            display: flex;
            justify-content: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          cursor: pointer;
        }
        li:hover {
          background: #f5f6f7;
        }
        .btn-active {
          background: #e1f2ff !important;
        }
      }
    }
  }
}
.baseItems {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  li {
    font-size: 12px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 4px;
    box-sizing: border-box;
    margin: 0 10px 16px 10px;
    .icon {
      width: 28px;
      height: 28px;
      // background: red;
    }
    .iconName {
      width: 100%;
      display: flex;
      justify-content: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    cursor: pointer;
  }
  li:hover {
    background: #f5f6f7;
  }
  .btn-active {
    background: #e1f2ff !important;
  }
}
.caret-icon {
  animation: nowhirling 0.2s linear forwards;
}
.caret-icon-active {
  animation: whirling 0.2s linear forwards;
}
@keyframes whirling {
  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(180deg);
    -ms-transform: rotate(180deg); /* Internet Explorer */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    -o-transform: rotate(180deg); /* Opera */
  }
}
@keyframes nowhirling {
  0% {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* Internet Explorer */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    -o-transform: rotate(180deg); /* 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 */
  }
}
</style>