<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)"
        :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>
    <div class="border-line"></div>
    <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>
    <div class="border-line"></div>
    <!--    提取-->
    <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" v-model="drawerVisible">
      <template slot="content">
        <itemTree
          @getSelectId="getSelectId"
          :drawerVisible="drawerVisible"
          :categoryIdS="categoryIdS"
        ></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"
          :mask="false"
          :wrapClassName="isExtract?'edit-drawer':''"
        >
          <a-spin :spinning="spinning">
            <div class="drawer-model-body" v-if="!isExtract">
              <div class="btn-list">
                <Tabs
                  type="card"
                  v-if="showDrawerItem.type == 'Zone'"
                  :data="tabData"
                  v-model="tabActive"
                />
              </div>
              <div class="list" v-for="(item,index) in itemList" :key="index">
                <div class="title" v-show="item.GraphElements.length">{{item.Name}}</div>
                <ul class="example">
                  <li
                    @click="getexampleItem(items,indexs,index)"
                    v-for="(items,indexs) in item.GraphElements"
                    :key="indexs"
                    :class="[activeIndexs==indexs &&activeIndex==index ?'active-li':'']"
                    :title="items.Name"
                  >
                    <img
                      :class="['item',`item-${items.Type}`]"
                      :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
                      alt
                    />
                    <div class="text">{{items.Name}}</div>
                  </li>
                </ul>
              </div>
            </div>
            <div v-else class="drawer-model-body drawer-model-body-extract">
              <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
                <template slot="age" slot-scope="text, record, index">
                  <div>
                    <img
                      :class="['item',`item-${text.Type}`, 'exportImg']"
                      :src="'/serve/topology-wanda/Picture/query/'+ text.Url"
                      alt
                      v-if="text.Url"
                    />
                    <span v-else>无对应图例</span>
                  </div>
                </template>
                <template slot="address" slot-scope="text, record, index">
                  <div
                    style="color:#0091FFFF;cursor:pointer;"
                    @click="pickUp(text, record, index)"
                  >{{ text }}</div>
                </template>
              </a-table>
            </div>
          </a-spin>
        </a-drawer>
      </div>
    </transition>
  </div>
</template>
<script>
import itemTree from "./leftbar_components/itemTree";
import { graphElementGroup, graphElementSearch } from "@/api/editer.js";
import bus from "@/bus";
import { queryGroup } from "@/api/editer.js";
import { mapState, mapActions } from "vuex";
const columns = [
  {
    title: "名称",
    dataIndex: "name"
  },
  {
    title: "图例",
    dataIndex: "age",
    scopedSlots: { customRender: "age" }
  },
  {
    title: "数量",
    dataIndex: "number"
  },
  {
    title: "操作",
    dataIndex: "address",
    scopedSlots: { customRender: "address" }
  }
];
const data = [];

export default {
  components: { itemTree },
  props: {
    cmdType: {
      type: String,
      default: "",
      required: false
    }
  },
  data() {
    return {
      // 基础选择
      baseChoice: [
        {
          img: "t-select.png", //logo
          hoverImg: "t-select-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: true,
          name: "选择", //类型
          type: "choice"
        },
        {
          img: "t-line.png", //logo
          hoverImg: "t-line-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "画线", //类型
          type: "baseLine"
        },
        {
          img: "t-text.png", //logo
          hoverImg: "t-text-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "画文字", //类型
          type: "baseText"
        },
        {
          img: "t-img.png", //logo
          hoverImg: "t-img-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "画图片", //类型
          type: "baseImage"
        }
      ],
      // 系统选择
      systemChoice: [
        {
          img: "t-position.png", //logo
          hoverImg: "t-position-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "位置区域", //类型
          type: "Zone"
        },
        {
          img: "t-equipment.png", //logo
          hoverImg: "t-equipment-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "设备设施", //类型
          type: "Image"
        },
        {
          img: "t-papeline.png", //logo
          hoverImg: "t-papeline-hover.png", //hoverlogo
          isHover: false, //是否hover
          isChoice: false,
          name: "管线桥架", //类型
          type: "Line"
        }
      ],
      visible: false,
      //提取
      extractChoice: [
        {
          img: "t-slices.png", //logo
          hoverImg: "t-slices-hover.png", //hoverlogo
          isHover: false, //是否hover
          name: "提取" //类型
        }
      ],
      isExtract: false, //是否为提取框
      data,
      columns,
      itemList: [], //图例数组
      categoryIdS: [],
      categoryId: "",
      activeIndex: -1, //选中的图例的父级
      activeIndexs: -1, //选中的图例
      drawerVisible: false,
      spinning: false,
      showDrawerItem: {},
      tabData: [
        { name: "绘制", id: "draw" },
        { name: "点选", id: "select" }
      ],
      tabActive: "select"
    };
  },
  computed: {
    ...mapState({
      GraphCategoryIds: "GraphCategoryIds",
      TypeIdToGraphElement: "TypeIdToGraphElement"
    })
  },
  methods: {
    // 触入
    mouseoverActive(item) {
      item.isHover = true;
    },
    mouseoutActive(item) {
      item.isHover = false;
    },
    toolActionClick(items) {
      this.visible = false;
      this.baseChoice.map(item => {
        item.isChoice = false;
      });
      this.systemChoice.map(a => {
        a.isChoice = false;
      });
      items.isChoice = true;
      this.$emit("setCmdType", items.type);
    },
    showDrawer(item) {
      this.showDrawerItem = item;
      this.isExtract = false;
      if (item.isChoice) {
        item.isChoice = false;
        this.visible = false;
      } else {
        this.baseChoice.map(a => {
          a.isChoice = false;
        });
        this.systemChoice.map(a => {
          a.isChoice = false;
        });
        this.visible = true;
        item.isChoice = true;
        // 打开侧边框
        // 接口请求
        this.itemList = [];
        this.spinning = true;
        const data = {
          GraphCategoryIds: this.categoryId,
          Type: item.type
        };

        queryGroup(data).then(res => {
          this.itemList = res.Data;
        });
        const arr = {
          InfoSystems: this.categoryIdS,
          Type: item.type
        };

        graphElementGroup(arr).then(res => {
          this.spinning = false;
          res.Data.map(item => {
            this.itemList.push(item);
          });
        });
      }
    },
    getSelectId(data) {
      this.categoryIdS = data;
      this.drawerVisible = false;
    },
    onClose() {
      this.visible = false;
      this.systemChoice.forEach(a => {
        a.isChoice = false;
      });
    },
    getexampleItem(item, indexs, index) {
      if (this.showDrawerItem.type == "Zone") {
        if (
          (item.SubType && item.SubType == "SCPZ") ||
          (item.SubType && item.SubType == "FHFQ")
        ) {
          this.tabActive = "draw"; //
        } else {
          this.tabActive = "select";
        }
      }
      this.activeIndex = index;
      this.activeIndexs = indexs;
      this.$emit("toolActionClick", item);
    },
    // 提取元素
    extractItem() {
      // 打开提取元素列表
      let isChoice = false;
      this.baseChoice.map(item => {
        if (item.isChoice) {
          isChoice = true;
        }
        item.isChoice = false;
      });
      this.systemChoice.map(a => {
        if (a.isChoice) {
          isChoice = true;
        }
        a.isChoice = false;
      });
      this.isExtract = true;
      if (isChoice) {
        this.visible = true;
      } else {
        this.visible = !this.visible;
      }
      bus.$emit("extractItem");
    },
    getBus() {
      bus.$on("exportItem", data => {
        this.data = [];
        if (data.length) {
          data.forEach(t => {
            const pa = {
              Deleted: false,
              InfoTypeIds: [t.key],
              PageSize: 1000,
              Type: t.type
            };
            this.spinning = true;
            graphElementSearch(pa).then(res => {
              this.spinning = false;
              if (res.Content && res.Content.length) {
                t.age = res.Content[0];
                t.name = this.TypeIdToGraphElement[t.key].Name;
                t.properties = this.TypeIdToGraphElement[t.key];
                this.data.push(t);
              }
            });
          });
        }
      });
    },
    pickUp(text, record, index) {
      bus.$emit("exportByKey", record);
    },
    changeDrawType(v) {
      // bus.$emit("changeDrawType", v.target.value);
      bus.$emit("changeDrawType", v);
    }
  },
  watch: {
    cmdType(cmd) {
      this.baseChoice.forEach(item => {
        item.isChoice = false;
        if (item.type == cmd) {
          item.isChoice = true;
        }
      });
      if (cmd == "choice") {
        this.activeIndex = -1;
      }
    },
    drawerVisible(val) {
      if (this.visible) {
        this.showDrawer(this.showDrawerItem);
      }
    },
    tabActive: {
      handler: function(val) {
        this.changeDrawType(val);
      },
      immediate: true
    }
  },
  mounted() {
    const ele = document.getElementById("drawer-model");
    ele.style.width = "270px";
    this.getBus();
  },
  created() {
    const href = window.location.href;
    // 路由
    // const route = href.split("?")[0];
    // 参数处理
    let params = href.split("?")[1];
    if (!params) {
      // 参数有问题
      return false;
    }
    params = decodeURIComponent(params);
    // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
    const paramsArr = params.split("&");
    const obj = {};
    paramsArr.map(item => {
      const arr = item.split("=");
      obj[arr[0]] = arr[1];
    });
    this.categoryId = obj.categoryId;
    this.categoryIdS.push(obj.categoryId);
    this.categoryId;
  }
};
</script>
<style lang="less" scoped>
/deep/ .ant-spin-nested-loading {
  height: 100% !important;
  .ant-spin-container {
    height: 100% !important;
  }
}
/deep/ .ant-drawer-body {
  height: 100% !important;
  padding: 12px;
}
/deep/ .ant-drawer-content-wrapper{
  width: 270px !important;
}
#left_toolbar {
  min-width: 80px;
  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;
      cursor: pointer;
      .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: 4px;
        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: 80px;
    border-left: 1px solid #e8e8e8;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 0;
    .drawer-model-body {
      width: 100%;
      .btn-list {
        width: 123px;
        margin: 0 auto;
      }
      .list {
        .title {
          font-size: 16px;
          border-left: 4px solid #0091ff;
          margin-top: 20px;
          text-indent: 8px;
          height: 20px;
          line-height: 20px;
          color: #1f2329;
          margin-bottom: 12px;
        }
        .example {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          li {
            width: 80px;
            height: 60px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            border: 1px solid #ffffff;
            cursor: pointer;
            &:hover {
              background: #F5F6F7;
              border: 1px solid #D9DBDE;
              border-radius: 5px;
            }
            .item {
              width: 30px;
              height: 22px;
              margin: 0 auto;
            }
            .item-Image {
              width: 18px;
              height: 18px;
              margin: 0 auto;
            }
            .item-Line {
              width: 40px;
              height: 30px;
              margin: 0 auto;
            }
            .item-pip {
              width: 28px;
              height: 16px;
              border: #0091ff solid 1px;
              margin: 0 auto;
              background: #fff;
            }
            .text {
              width: 100%;
              padding:6px 2px 0;
              font-size: 12px;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .active-li {
            background: #DFEFFE;
            border: 1px solid #98C8FA ;
            border-radius: 5px;
          }
        }
      }
    }
    /deep/ .edit-drawer .ant-drawer-body {
      padding: 0;
      .ant-table-small {
        border-left: none;
        border-right: none;
        border-radius: 0;
      }
      .ant-table-small > .ant-table-content > .ant-table-body {
        margin: 0;
        .ant-table-thead {
          font-size: 12px;
        }
      }
    }
    .drawer-model-body-extract {
      padding: 0;
      position: absolute;
      left: 0;
      right: 0;
      /deep/ .ant-table-thead tr th {
        background: #f8f9fa;
      }
      .exportImg.item-Zone {
        width: 28px;
        height: 16px;
      }
      .exportImg.item-Image {
        width: 20px;
        height: 20px;
      }
      .ant-table-small {
        border: none !important;
      }
    }
  }
  .border-top {
    /*border-top: 1px solid #c3c7cb;*/
  }
  .border-line {
    width: 48px;
    height: 2px;
    background: #c3c7cb;
    margin: 0 auto;
  }
}
</style>