<template>
  <div class="pipe-list" id="pipelist">
    <Input
      class="baseItemInput"
      :width="188"
      iconType="search"
      placeholder="搜索管线名称"
      v-model="getPressMsg"
      @pressEnter="pressEnter"
      @clear="pressEnter"
    />
    <div class="box-type" id="boxtype" v-show="!pressMsgData.length">
      <ul class="type" v-for="(item, key) in pipeList" :key="key">
        <li class="type-item">
          <div class="type-title" @click="collapse(item)">
                  <i
                  v-bind:class="[
                    item.showchild ? 'caret-icon-active' : 'caret-icon',
                    'el-icon-caret-bottom',
                  ]"
                ></i>
            <span>{{ item.name }}</span>
          </div>
          <el-collapse-transition>
            <ul class="itemList" v-show="item.showchild">
              <li
                v-for="(a, b) in item.categoryList"
                :key="b"
                @click="getPipe(a)"
              >
                <div :style="'background:' + a.color"></div>
                <span>{{ a.name }}</span>
              </li>
            </ul>
          </el-collapse-transition>
        </li>
      </ul>
    </div>
      <ul class="itemList" v-show="pressMsgData.length">
              <li
                v-for="(a, b) in pressMsgData"
                :key="b"
                @click="getPipe(a)"
              >
                <div :style="'background:' + a.color"></div>
                <span>{{ a.name }}</span>
              </li>
            </ul>
          </el-collapse-transition>
        </li>
      </ul>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import { queryPipeline } from "@/api/editer";

export default {
  data() {
    return {
      getPressMsg: "",
      pipeList: [],
      pressMsgData: [], //搜素搜到的数组
    };
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ"]),
    // 获取管道
    getPipe(item) {
      this.SETLEGENDOBJ(item);
      const cmd = "EditBasePipe";
      this.SETCHOICELEHEND(cmd);
    },
    // 搜索回车操作
    pressEnter() {
      const list = [];
      if (!this.getPressMsg) {
        this.pressMsgData = [];
        return;
      }
      // 对信息点相同得提取出来
      this.pipeList.forEach((item) => {
        item.categoryList.forEach((a) => {
          if (a.name.includes(this.getPressMsg)) {
            list.push(a);
          }
        });
      });
      this.pressMsgData = list;
    },
    // 折叠面板
    collapse(item) {
      item.showchild = !item.showchild;
    },
    // 获取管道数据
    getPipeList() {
      queryPipeline().then((res) => {
        this.pipeList = [];
        if (res.content && res.total) {
          this.pipeList = res.content.map((item) => {
            item.showchild = true;
            return item;
          });
        }
      });
    },
  },
  mounted() {
    const dombox = document.getElementById("pipelist");
    const boxPorfess = document.getElementById("boxtype");
    if (dombox) {
      boxPorfess.style.height = dombox.offsetHeight - 20 + "px";
    }
  },
  created() {
    this.getPipeList();
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.pipe-list {
  width: 100%;
  height: 100%;
  .box-type {
    min-height: 500px;
    overflow-y: scroll;
  }
  .type {
    padding: 12px;
    box-sizing: border-box;
    .type-item {
      .type-title {
        margin: 12px 0 14px 0;
        cursor: pointer;
        span {
          width: 14px;
          color: #1f2429;
          margin-left: 4px;
        }
      }
      .itemList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 60px;
          height: 62px;
          border-radius: 2px;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 4px;
          box-sizing: border-box;
          span {
            color: #646a73;
            font-size: 10px;
            line-height: 11px;
          }
          div {
            width: 32px;
            height: 4px;
            background: #fa9900;
            margin: 6px 0 8px 0;
          }
        }
        li:hover {
          background: #f5f6f7;
          cursor: pointer;
        }
      }
    }
  }
}
.itemList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 60px;
    height: 62px;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px;
    box-sizing: border-box;
    span {
      color: #646a73;
      font-size: 10px;
      line-height: 11px;
    }
    div {
      width: 32px;
      height: 4px;
      background: #fa9900;
      margin: 6px 0 8px 0;
    }
  }
  li:hover {
    background: #f5f6f7;
    cursor: pointer;
  }
}
.caret-icon {
  animation: nowhirling 0.2s linear forwards;
}
.caret-icon-active {
  animation: whirling 0.2s linear forwards;
}
@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>