<template>
  <div id="left_toolbar">
    <ul class="list-1">
      <li
        v-on:mouseout="mouseoutActive(item)"
        v-on:mouseover="mouseoverActive(item)"
        v-for="(item,i) in baseChoice"
        :key="i"
        @click="toolActionClick(item)"
        v-bind:class="{ actives:item.isChoice}"
      >
        <div class="item">
          <img
            v-show="!item.isHover && !item.isChoice"
            :src="require(`./../../assets/images/${item.img}`)"
            alt
          />
          <img
            v-show="item.isHover || item.isChoice "
            :src="require(`./../../assets/images/${item.hoverImg}`)"
            alt
          />
        </div>
      </li>
    </ul>
    <ul class="list-2">
      <li
        v-on:mouseout="mouseoutActive(item)"
        v-on:mouseover="mouseoverActive(item)"
        v-for="(item,i) in systemChoice"
        @click="showDrawer(item)"
        :key="i"
        v-bind:class="{ actives:item.isChoice}"
      >
        <div class="item">
          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
          <div>{{item.name}}</div>
        </div>
      </li>
    </ul>
    <!--    提取-->
    <ul class="list-2 border-top">
      <li
        v-on:mouseout="mouseoutActive(item)"
        v-on:mouseover="mouseoverActive(item)"
        v-for="(item,i) in extractChoice"
        :key="i"
        @click="extractItem"
      >
        <div class="item">
          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
          <div>{{item.name}}</div>
        </div>
      </li>
    </ul>

    <a-popover trigger="click" placement="rightBottom">
      <template slot="content">
        <itemTree></itemTree>
      </template>
      <div class="bottom-item">
        <a-icon type="ellipsis" />
        <span>选择原件</span>
      </div>
    </a-popover>

    <!-- 打开弹窗 -->
    <transition name="fade">
      <div class="drawer-model" id="drawer-model" v-show="visible">
        <a-drawer
          placement="left"
          :closable="false"
          :visible="visible"
          :wrap-style="{ position: 'absolute',}"
          @close="onClose"
          :getContainer="false"
        >
          <div class="drawer-model-body" v-show="activeItem ==1 || activeItem ==2">
            <div class="btn-list">
              <a-button-group>
                <a-button type="primary">绘制</a-button>
                <a-button>点选</a-button>
              </a-button-group>
            </div>
            <div class="list" v-show="activeItem ==1">
              <div class="title">消防系统</div>
              <ul class="example">
                <li @click="getexampleItem">
                  <div class="item"></div>
                  <div class="text">防火风区</div>
                </li>
              </ul>
            </div>
            <div class="list" v-show="activeItem ==2">
              <div class="title">消防系统</div>
              <ul class="example">
                <li @click="getexampleItem">
                  <div class="item-pip"></div>
                  <div class="text">防火风区</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
            <a-table :columns="columns" :data-source="data" size="small" :pagination="false" />
          </div>
        </a-drawer>
      </div>
    </transition>
  </div>
</template>
<script>
import itemTree from "./leftbar_components/itemTree";
import {queryByGroup} from "@/api/editer.js"
import bus from "@/bus";
const columns = [
  {
    title: "名称",
    dataIndex: "name"
  },
  {
    title: "图例",
    dataIndex: "age"
  },
  {
    title: "数量",
    dataIndex: "number"
  },
  {
    title: "操作",
    dataIndex: "address"
  }
];
const data = [
  {
    key: "1",
    name: "电梯",
    age: 32,
    number: 123,
    address: "提取"
  },
  {
    key: "2",
    name: "防火风区",
    age: 42,
    number: 123,
    address: "提取"
  }
];

export default {
  components: { itemTree },
  props: {
    cmd: {
      type: Number,
      default: 0,
      required: false
    }
  },
  data() {
    return {
      // 基础选择
      baseChoice: [
        {
          img: "t-select.png", //logo
          hoverImg: "t-select-hover.png", //hoverlogo
          isHover: true, //是否hover
          isChoice: true,
          name: "选择", //类型
          cmd: 0
        },
        {
          img: "t-line.png", //logo
          hoverImg: "t-line-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "画线", //类型
          cmd: 1
        },
        {
          img: "t-text.png", //logo
          hoverImg: "t-text-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "画文字", //类型
          cmd: 2
        },
        {
          img: "t-img.png", //logo
          hoverImg: "t-img-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "画图片", //类型
          cmd: 3
        }
      ],
      // 系统选择
      systemChoice: [
        {
          img: "t-position.png", //logo
          hoverImg: "t-position-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "位置区域" //类型
        },
        {
          img: "t-equipment.png", //logo
          hoverImg: "t-equipment-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "设备设施" //类型
        },
        {
          img: "t-papeline.png", //logo
          hoverImg: "t-papeline-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "管线桥架" //类型
        }
      ],
      visible: false,
      activeItem: 1,
      //提取
      extractChoice: [
        {
          img: "t-slices.png", //logo
          hoverImg: "t-slices-hover.png", //hoverlogo
          isHover: false, //是否hover
          name: "提取" //类型
        }
      ],
      data,
      columns
    };
  },
  methods: {
    // 触入
    mouseoverActive(item) {
      item.isHover = true;
    },
    mouseoutActive(item) {
      item.isHover = false;
    },
    toolActionClick(item) {
      this.visible = false;
      this.baseChoice.forEach(item => {
        item.isChoice = false;
      });
      this.systemChoice.forEach(a => {
        a.isChoice = false;
      });
      item.isChoice = true;
      this.$emit("setCmd", item.cmd);
    },
    showDrawer(item) {
      if (item.isChoice) {
        this.systemChoice.forEach(a => {
          a.isChoice = false;
        });
        this.visible = false;
      } else {
        this.systemChoice.forEach(a => {
          a.isChoice = false;
        });
        item.isChoice = true;
        if (this.visible) {
          this.visible = false;
          setTimeout(() => {
            if (item.name == "管线桥架") {
              this.activeItem = 2;
            } else {
              this.activeItem = 1;
            }
            this.visible = true;
          }, 300);
        } else {
          if (item.name == "管线桥架") {
            this.activeItem = 2;
          } else {
            this.activeItem = 1;
          }
          this.visible = true;
        }
      }
    },
    onClose() {
      this.visible = false;
      this.systemChoice.forEach(a => {
        a.isChoice = false;
      });
    },
    getexampleItem() {
      this.visible = false;
      let item = 5;
      if (this.activeItem == 1) {
        item = 4;
      } else {
        item = 5;
      }
      this.$emit("toolActionClick", item);
    },
    // 提取元素
    extractItem() {
      this.visible = !this.visible;
      this.activeItem = 3;
      bus.$emit("extractItem")
    },
    getBus(){
      bus.$on("exportItem", data => {
        this.data = data;
      })
    }
  },
  watch: {
    cmd(cmd) {
      this.baseChoice.forEach(item => {
        item.isChoice = false;
        if (item.cmd == cmd) {
          item.isChoice = true;
        }
      });
    }
  },
  mounted() {
    const ele = document.getElementById("drawer-model");
    ele.style.width = document.body.offsetWidth - 70 + "px";

    this.getBus();
  }
};
</script>
<style lang="less">
#left_toolbar {
  min-width: 68px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
  padding: 0 0 12px 0;
  box-sizing: border-box;
  position: relative;

  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .list-1 {
    padding-top: 1px;
    box-sizing: border-box;
    border-bottom: 1px solid #c3c7cb;
    li {
      width: 64px;
      min-height: 42px;
      margin: 6px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .item {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        font-size: 12px;
        img {
          width: 25px;
          height: 25px;
        }
      }
      &:hover {
        background: #e1f2ff;
        border-radius: 8px;
        opacity: 0.89;
        color: #fff;
      }
      .tooltip {
        position: absolute;
        left: 90px;
        top: 0;
      }
    }
  }
  .list-2 {
    padding-top: 1px;
    box-sizing: border-box;
    li {
      width: 64px;
      min-height: 42px;
      margin: 6px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .item {
        margin: 0 auto;
        height: 54px;
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        align-items: center;
        font-size: 12px;
        img {
          width: 25px;
          height: 25px;
          margin-top: 6px;
        }
      }
      &:hover {
        background: #e1f2ff;
        border-radius: 8px;
        opacity: 0.89;
        color: #0091ff;
      }
      .tooltip {
        position: absolute;
        left: 90px;
        top: 0;
      }
    }
  }
  .bottom-item {
    position: absolute;
    font-size: 18px;
    width: 100%;
    bottom: 12px;
    height: 54px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    span {
      font-size: 12px;
    }
    &:hover {
      background: #e1f2ff;
      border-radius: 8px;
      opacity: 0.89;
      color: #0091ff;
      height: 54px;
    }
  }
  .actives {
    background: #e1f2ff;
    border-radius: 8px;
    opacity: 0.89;
    color: #0091ff;
  }
  .fade-enter,
  .fade-leave-to {
    transition: all 0.3s ease;
  }
  .drawer-model {
    position: absolute;
    left: 70px;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    .drawer-model-body {
      width: 100%;
      .btn-list {
        margin: 0 auto;
      }
      .list {
        .title {
          font-size: 18px;
          border-left: 4px solid #0091ff;
          margin-top: 20px;
        }
        .example {
          width: 100%;
          display: flex;
          li {
            width: 72px;
            height: 60px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;
            &:hover {
              background: #e1f2ff;
            }
            .item {
              width: 28px;
              height: 16px;
              background: #bbdfff;
              border: #0091ff solid 1px;
              margin: 0 auto;
            }
            .item-pip {
              width: 28px;
              height: 16px;
              border: #0091ff solid 1px;
              margin: 0 auto;
              background: #fff;
            }
            .text {
              font-size: 12px;
              margin: 0 auto;
            }
          }
        }
      }
    }
    .drawer-model-body-extract {
      padding: 0;
      position: absolute;
      left: 0;
      right: 0;
      .ant-table-small {
        border: none !important;
      }
    }
  }
  .border-top {
    border-top: 1px solid #c3c7cb;
  }
}
</style>