<template>
  <div id="left-menu" :class="leftShowType=='Menu'?'inShow':'outShow'">
    <div class="menu-content" ref="menuContent">
      <div class="menu-title">
        <span>
          图层应用
        </span>
      </div>
      <div class="current-layer" ref="current">
        <div class="current-title">
          <span class="current-icon">
            <img src="../../../assets/imgs/mainPage/图层.png"/>
            <span>当前图层</span>
          </span>
          <span  class="current-clear" @click="clearCurrentLayer">清空</span>
        </div>
        <div class="current-content">
          <el-divider></el-divider>
          <div class="current-list">
            <el-table
                :row-style="{height: '30px'}"
                :cell-style="{padding:'6px'}"
                class="current-table"
                :data="chosenLayerList"
                :show-header="false"
                style="width: 100%">
              <el-table-column
                  prop="label"
                  width="300"
                  label="图层名称">
              </el-table-column>
              <el-table-column
                  label="操作"
                  width="150">
                <template slot-scope="scope">
                  <div class="icon-list">
                    <i class="fa fa-spinner fa-spin  fa-fw" v-if="false" style="font-size: 1.2rem"></i>
                    <img @click="moveToTop(scope.row)" v-loading="true" src="../../../assets/imgs/mainPage/上移.png" />
<!--                    <img @click="setOpacity(scope.row)" src="../../../assets/imgs/mainPage/透明度.png" />-->

                    <el-popover
                        placement="right"
                        width="100"
                        trigger="hover">
<!--                      <el-slider @change="setOpacity(scope.row)" v-model="scope.row.opacity"></el-slider>-->
                      <el-slider  v-model="scope.row.opacity"></el-slider>
                      <img slot="reference" style="padding-left: 5px;padding-right: 5px;width: 19px;height: 19px"  src="../../../assets/imgs/mainPage/透明度.png" />
                    </el-popover>

                    <img @click="showDetail(scope.row)" src="../../../assets/imgs/mainPage/详情.png" />
                    <img @click="delLayer(scope.row)" src="../../../assets/imgs/mainPage/删除.png" />
                  </div>
                </template>

              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>
      <div class="layer-list">
        <div class="list-title">
          <span class="list-icon">
            <img src="../../../assets/imgs/mainPage/图层.png"/>
            <span>所有图层</span>
          </span>
        </div>
        <div class="list-content">
          <el-divider></el-divider>

          <div class="down-tree" :style="{height:tableHeight+'px'}">
            <el-tree :data="layerList" :props="treeProps" node-key="id"
                     show-checkbox class="content-tree"
                     :default-checked-keys="checkedKeysList"
                     @check="handleCheckChange" ref="layerList"></el-tree>
          </div>

        </div>
      </div>
    </div>
    <div class="menu-button" @click="changeMenuStatus">
      <img :src="imgSrc()" class="button-img" />
    </div>
  </div>
</template>

<script>
import {getLayerList} from '../../../service/show-platform'
import {addMapLayerMap, setMapClick} from "@/units/map/AddLayer";
import {createNamespacedHelpers} from "vuex";
import {CHANGE_MAIN_CATEGORY_ACTION,CHANGE_BOOKMARK_LAYER_LIST_ACTION,CHANGE_CURRENT_LAYER_LIST_ACTION} from "@/view/show-platform/store/action-constant";
const {mapState,mapActions}  = createNamespacedHelpers('platform')

export default {
  name: "LeftMenu",
  data(){
    return{
      treeProps: {
        children: 'children',
        label: 'label',
        isLeaf:'leaf',
      },
      chosenLayerList:[],
      layerList:[],
      allLayerList:[],
      tableHeight:0,
      checkedKeysList:[],
      opacityValue:100
    }
  },
  props:{
    leftShowType:{

    },
  },
  mounted(){
    this.changeTableHeight()
  },
  computed:{
    ...mapState({
      mainCategory:"mainCategory",
      bookmarkLayerList:"bookmarkLayerList"
    }),
    dataListNew(){
      return JSON.parse(JSON.stringify(this.chosenLayerList));
    }
  },
  methods:{
    ...mapActions({
      [CHANGE_MAIN_CATEGORY_ACTION]:CHANGE_MAIN_CATEGORY_ACTION,
      [CHANGE_BOOKMARK_LAYER_LIST_ACTION]:CHANGE_BOOKMARK_LAYER_LIST_ACTION,
      [CHANGE_CURRENT_LAYER_LIST_ACTION]:CHANGE_CURRENT_LAYER_LIST_ACTION,

    }),
    clearCurrentLayer(){
      for(let i=0;i<this.chosenLayerList.length;i++){
          addMapLayerMap(this.chosenLayerList[i].id,this.chosenLayerList[i].layertype, this.chosenLayerList[i].label,this.chosenLayerList[i].url,false);
      }
      this.chosenLayerList = [];
      this.getDefaultKeys()
      this.$refs.layerList.setCheckedKeys(this.checkedKeysList);
      setMapClick('','')
      this.changeTableHeight();
    },
    moveToTop(item){
      for(let i=0;i<this.chosenLayerList.length;i++){
        if(item.id ==this.chosenLayerList[i].id){
          this.chosenLayerList.splice(i,1);
          this.chosenLayerList.unshift(item);

          addMapLayerMap(item.id,item.layertype,item.label,item.url,false)
          addMapLayerMap(item.id,item.layertype,item.label,item.url,true)
          this.resetMapClick()
        }
      }
    },
    setOpacity(item){
      addMapLayerMap(item.id,item.layertype, item.label,item.url,true,item.opacity);
    },
    showDetail(item){
      this.$emit('setLayerDetailModelShow',item.id)
    },
    resetMapClick(){
      if(this.chosenLayerList.length> 0){
        setMapClick('','')
      }else{
        setMapClick('','')
      }
    },
    delLayer(item){
      //删除元素
      for(let i=0;i<this.chosenLayerList.length;i++){
        if(item.id ==this.chosenLayerList[i].id){
          this.chosenLayerList.splice(i,1);
          addMapLayerMap(item.id,item.layertype, item.label,item.url,false)
          this.resetMapClick();
          break;
        }
      }
      //更新索引数组
      this.getDefaultKeys();
      this.$refs.layerList.setCheckedKeys(this.checkedKeysList);
    },
    changeTableHeight(){
      this.$nextTick(function () {
        this.tableHeight = this.$refs.menuContent.offsetHeight - this.$refs.current.offsetHeight -70;
        // 监听窗口大小变化
        let layerSelf = this;
        window.onresize = function() {
          layerSelf.tableHeight = this.$refs.menuContent.offsetHeight - this.$refs.current.offsetHeight -70;
        }
      });
    },
    handleCheckChange(data,checkd) {
      debugger
      if(data.children !==undefined){
          if(this.allChosenJudge(checkd.checkedKeys,data.children)){
            for(let i=0;i<data.children.length;i++){
              if(data.children[i].url!==undefined){
                if(!this.getJudge(this.chosenLayerList,data.children[i].id).judgeState){
                  this.chosenLayerList.unshift(data.children[i]);
                  addMapLayerMap(data.children[i].id,data.children[i].layertype, data.children[i].label,data.children[i].url)
                  this.resetMapClick();
                }
              }
            }
          }else{
            for(let j=0;j<data.children.length;j++){
              if(data.children[j].url!==undefined){
                if(this.getJudge(this.chosenLayerList,data.children[j].id).judgeState){
                  this.chosenLayerList.splice(this.getJudge(this.chosenLayerList,data.children[j].id).location,1);
                  addMapLayerMap(data.children[j].id,data.children[j].layertype,data.children[j].label,data.children[j].url,false)
                  this.resetMapClick();
                }
              }
            }
          }
      }else{
        if(this.getJudge(this.chosenLayerList,data.id).judgeState){
          this.chosenLayerList.splice(this.getJudge(this.chosenLayerList,data.id).location,1);
          addMapLayerMap(data.id,data.layertype,data.label,data.url,false)
          this.resetMapClick();
        }else{
          this.chosenLayerList.unshift(data);
          addMapLayerMap(data.id,data.layertype,data.label,data.url)
          this.resetMapClick();
        }
      }

      this.getDefaultKeys()
      this.changeTableHeight()
    },
    allChosenJudge(existCodeList,allList){  //existCodeList:树所选中数组  allList：当前节点数组
      let message = false;
      for(let j=0;j<allList.length;j++){
        for(let i=0;i<existCodeList.length;i++){
          if(existCodeList[i]===allList[j].id){
            message = true
          }
        }
      }
      return message
    },
    getDefaultKeys(){
      let arr= [];
      this.chosenLayerList.forEach(item =>{
        arr.unshift(item.id)
      })
      this.checkedKeysList = arr;
      this[CHANGE_CURRENT_LAYER_LIST_ACTION](this.checkedKeysList)
    },
    getJudge(arr,value){
      let judge = {
        judgeState:false,
        location:null
      }
      for(let i=0;i<arr.length;i++){
        if(arr[i].id ==value){
          judge.judgeState =  true;
          judge.location =  i;
        }
      }
      return judge
    },
    getLayerData(type){
      getLayerList().then(res =>{
        let data = res.msg[0].Rows;
        this.getLayerList(data,type)
      })
    },
    getLayerList(data,type){
      let partData = [] //筛选出的分类无序数据
      let firstData = [] //分类后的一级节点数据
      let allData = [] //全部的分类无序数据
      let totalData = [] //全部的一级节点数据
      this.allLayerList = [];
      //筛选出指定大类数据
      for(let i=0;i<data.length;i++){
        allData.push(data[i])
        if(data[i].MAIN_TYPE ==type){
          partData.push(data[i])
        }
      }
      //获取分类后一级节点数据
      partData.forEach((item,index)=>{
        let obj = item;
        firstData.push({
          label:obj.SECOND_TYPE,
          id:obj.MAIN_CODE + obj.SECOND_CODE,
          pid:obj.MAIN_TYPE,
          type:"second",
          children: []
        })
      })
      //获取全部一级节点数据
      allData.forEach((item,index)=>{
        let obj = item;
        totalData.push({
          label:obj.SECOND_TYPE,
          id:obj.MAIN_CODE + obj.SECOND_CODE,
          pid:obj.MAIN_TYPE,
          type:"second",
          children: []
        })
      })
      firstData = this.uniqueFunc(firstData,'label');
      totalData = this.uniqueFunc(totalData,'label');

      //对于一级节点的children数据填充
      for(let j=0;j<firstData.length;j++){
       for(let k=0;k<partData.length;k++){
         if(firstData[j].label ==partData[k].SECOND_TYPE){
           let node = {
             id:partData[k].CODE,
             label:partData[k].TYPE_NAME,
             pid:partData[k].SECOND_CODE,
             type: "layer",
             opacity:100,    //设置默认的透明度
             url: partData[k].ADDRESS,
             layertype: partData[k].TYPE,
             u_code: partData[k].U_CODE,
             u_name: partData[k].U_NAME,
             time: partData[k].TIME,
             main: partData[k].MAIN_TYPE,
             disabled:partData[k].ADDRESS ===undefined?true:false
           }
           firstData[j].children.push(node)
         }
       }
      }
      //对于全部节点数据进行填充
      for(let j=0;j<totalData.length;j++){
        for(let k=0;k<allData.length;k++){
          if(totalData[j].label ==allData[k].SECOND_TYPE){
            let node = {
              id:allData[k].CODE,
              label:allData[k].TYPE_NAME,
              pid:allData[k].SECOND_CODE,
              type: "layer",
              opacity:100,    //设置默认的透明度
              url: allData[k].ADDRESS,
              layertype: allData[k].TYPE,
              u_code: allData[k].U_CODE,
              u_name: allData[k].U_NAME,
              time: allData[k].TIME,
              main: allData[k].MAIN_TYPE,
              disabled:allData[k].ADDRESS ===undefined?true:false
            }
            this.allLayerList.push(node)
          }
        }
      }
      this.layerList = firstData;

    },
    uniqueFunc(arr, uniId){
      const res = new Map();
      return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
    },
    imgSrc(){
      if(this.leftShowType =='Menu'){
        return require('../../../assets/imgs/mainPage/jiantou_left.png')
      }else{
        return require('../../../assets/imgs/mainPage/jiantou_right.png')
      }
    },
    changeMenuStatus(){
      if(this.leftShowType =='Menu'){
        this.$emit('setLeftShow','')
      }else{
        this.$emit('setLeftShow','Menu')
      }
    },
    setBookmark(val){
      this.clearCurrentLayer();
      for(let i=0;i<val.length;i++){
        for(let j=0;j<this.allLayerList.length;j++){
          if(val[i]==this.allLayerList[j].id){
            this.chosenLayerList.unshift(this.allLayerList[j]);
            addMapLayerMap(this.allLayerList[j].id,this.allLayerList[j].layertype, this.allLayerList[j].label,this.allLayerList[j].url)
            this.resetMapClick();
          }
        }
      };
      this.getDefaultKeys();
      this.$refs.layerList.setCheckedKeys(this.checkedKeysList);
    }
  },
  watch:{
    mainCategory:{
      immediate:true,
      handler(val){
        this.getLayerData(val)
      }
    },
    bookmarkLayerList:{
      handler(val){
        this.setBookmark(val)
      }
    },
    dataListNew:{
      handler(newV,oldV){
        newV.forEach(v =>{
          oldV.forEach(j =>{
            if(v.id===j.id){
              if(v.opacity !== j.opacity){
                addMapLayerMap(v.id,v.layertype, v.label,v.url,true,v.opacity);
              }
            }
          })
        })
      },
      deep:true
    }
  }
}
</script>
<style scoped lang="scss">
#left-menu{
  ::v-deep{
    .el-divider--horizontal{
      margin:8px 0;
      background: 0 0;
      border-top:1px dashed #56afe8;
    }
    .el-tree-node__content>label.el-checkbox{
      margin-right: 8px;
      position: absolute;
      right: 10px;
    }
    .el-tree{
      background: none;
      color: #fff;
    }
    .el-tree-node__expand-icon{
      color: #fff;
    }
    .el-tree-node__content{
      background: rgba(86, 175, 232, 0.15);
      border: 1px solid #066cae;
      padding:4px 0px 4px 0px;
      margin:4px 0px 4px 0px;
    }
    .el-tree-node__content:hover{
      background-color: rgba(0, 204, 255,0.7);
    }
    .el-tree-node__expand-icon{
      &.is-leaf{
        color: transparent;
      }
    }
    .el-checkbox__input.is-disabled .el-checkbox__inner::after {
      cursor: not-allowed;
      transform: rotate(45deg) scaleY(1);
    }
    .el-checkbox__input.is-disabled .el-checkbox__inner {
      background-color: #a4a6aa;
      border-color: #dcdfe6;
    }
    .el-checkbox__inner{
      background-color: transparent;
    }

    ::-webkit-scrollbar{
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-thumb{
      background-color: #028aab;
      border-radius: 3px;
    }
    .el-table{
      background-color: transparent;
      color: #fff;
    }
    .el-table tr{
      background-color: rgba(86, 175, 232, 0.15);
      border: 1px solid #066cae;
    }
    .el-table td:first-child{
      border-left: 1px solid #066cae;
      border-top: 1px solid #066cae;
      border-bottom: 1px solid #066cae;
    }
    .el-table td:nth-child(2){
      border-right: 1px solid #066cae;
      border-top: 1px solid #066cae;
      border-bottom: 1px solid #066cae;
    }
    .el-table::before{
      background-color: transparent;
    }
    .el-table__empty-text{
      color: #fff;
    }
    .el-table__body tr:hover >td{
      background-color: rgba(0, 204, 255,0.7) !important;
    }
    .el-table__body{
      border-collapse: separate !important;
      border-spacing: 0 4px !important;
      table-layout:auto !important;
    }
    .el-popover__reference-wrapper{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  position: absolute;
  left:0;
  top:120px;
  z-index: 1;
  text-align: center;
  width: 510px;
  @media screen and(max-height: 980px){
    height: 650px;
  }
  @media screen and(min-height: 980px){
    height: 805px;
  }
  background: url("../../../assets/imgs/mainPage/左侧背景.png") no-repeat;
  background-size: 100% 100%;
  .menu-content{
    width: 98%;
    height: 98%;
    padding-left: 1%;
    padding-top: 1%;
    display: flex;
    flex-direction: column;
    color: white;
    .menu-title{
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      >span{
      }
    }
    .current-layer{
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 30px;
      .current-title{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .current-icon{
          width: 30%;
          height: 100%;
          display: flex;
          align-items: center;
          >img{
            width: 22px;
            height: 18px;
          }
          >span{
            padding-left: 8px;
            font-size: 14px;
            color: #56afe8;
          }
        }
        .current-clear{
          font-size: 14px;
          cursor: pointer;
        }
      }
      .current-content{
        padding-left: 30px;
        .current-list{
          max-height: 250px;
          overflow: auto;
          .current-table{

            .icon-list{
              display: flex;
              justify-content: center;
              align-items: center;
              >img{
                padding-left: 5px;
                padding-right: 5px;
                width: 19px;
                height: 19px;
              }
            }
          }
        }
      }
    }
    .layer-list{
      width: 100%;
      .list-title{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .list-icon{
          width: 30%;
          height: 100%;
          display: flex;
          align-items: center;
          >img{
            width: 22px;
            height: 18px;
          }
          >span{
            padding-left: 8px;
            font-size: 14px;
            color: #56afe8;
          }
        }
      }
      .list-content{
        padding-left: 30px;
        .down-tree{
          overflow: auto;
          .content-tree{
            margin-right: 10px;
          }
        }
      }
    }
  }
  .menu-button{
    position: absolute;
    right: -26px;
    top:20px;
    width: 26px;
    height: 57px;
    background:url("../../../assets/imgs/mainPage/left_small.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .button-img{
      width: 9px;
      height: 26px;

    }
  }
}
.inShow{
  transition-property: transform;
  transition-duration:1s;
}
.outShow{
  transition-property: transform;
  transition-duration:1s;
  transform: translateX(-510px);
}
</style>
