<template>
  <div id="single-screen-select" :style="{'--setLeft':position.x,'--setTop':position.y}">
    <el-select v-model="value" @change="selectChanged" :popper-append-to-body="false" multiple filterable collapse-tags style="width: 100%" placeholder="请选择">
      <el-option
          v-for="item in allLayerList"
          :key="item.id"
          :label="item.label"
          :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import {getLayerList} from "@/service/show-platform";
import {addMapLayerMap, setMapClick} from "@/units/map/AddLayer";

export default {
  name: "SingleScreenSelect",
  data() {
    return {
      allLayerList:[],
      showLayerList:[],
      value: ''
    }
  },
  props:{
    position:{

    },
    mapID:{

    },
    viewID:{

    }
  },
  mounted() {
    getLayerList().then(res =>{
      let data = res.msg[0].Rows;
      this.getLayerList(data)
    })
  },
  methods:{
    getLayerList(data){
      let allData = [] //全部的分类无序数据
      let totalData = [] //全部的一级节点数据
      this.allLayerList = [];
      //筛选出指定大类数据
      for(let i=0;i<data.length;i++){
        allData.push(data[i])
      }
      //获取全部一级节点数据
      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: []
        })
      })
      totalData = this.uniqueFunc(totalData,'label');

      //对于全部节点数据进行填充
      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)
          }
        }
      }
    },
    uniqueFunc(arr, uniId){
      const res = new Map();
      return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
    },
    selectChanged(items){
      for(let i=0;i<items.length;i++){
        for(let j=0;j<this.allLayerList.length;j++){
          if(this.allLayerList[j].id ===items[i]){
            if(this.showLayerList.indexOf(this.allLayerList[j]) > -1){   //如果已存在删除
              // this.showLayerList.splice(this.showLayerList.indexOf(this.allLayerList[j]),1);
              // addMapLayerMap(this.allLayerList[j].id,this.allLayerList[j].layertype,this.allLayerList[j].label,this.allLayerList[j].url,false,100, this.mapID)
            }else{   //不存在则添加
              this.showLayerList.push(this.allLayerList[j]);
              addMapLayerMap(this.allLayerList[j].id,this.allLayerList[j].layertype,this.allLayerList[j].label,this.allLayerList[j].url,true,100,this.mapID);
              this.resetMapClick()
            }
          }
        }
      }
      for(let i=0;i<this.showLayerList.length;i++){
        if(!this.allChosenJudge(this.showLayerList[i],items)){
          addMapLayerMap(this.showLayerList[i].id,this.showLayerList[i].layertype,this.showLayerList[i].label,this.showLayerList[i].url,false,100, this.mapID);
          this.resetMapClick()
          this.showLayerList.splice(i,1);
          i--;
        }
      }
    },
    allChosenJudge(showLayer,items){  //当前节点，所有已选择节点
      let message = false;
      for(let j=0;j<items.length;j++){
        if(showLayer.id===items[j]){
          message = true
        }
      }
      return message
    },
    resetMapClick(){
      if(this.showLayerList.length> 0){
        setMapClick(this.viewID,this.mapID)
      }else{
        setMapClick(this.viewID,this.mapID)
      }
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .el-select__tags{
    white-space: nowrap;
    overflow: hidden;
  }
  input[type="text"] {
    height: 38px;
    box-sizing: border-box;
    border: none;
    background: none;
    outline: #00aaff;
  }
  .el-select__input{
    color: #fff;
  }
  .el-select-dropdown{
    position: absolute !important;
    left: 0px !important;
    border: 1px solid #00a1ff !important;
    background-color: rgba(0, 31, 112, 0.6) !important;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: rgba(0, 31, 112, 0.8);
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
    background-color: rgba(0, 31, 112, 0.8);
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
    background-color: rgba(0, 31, 112, 0.8);
  }
  .el-tag.el-tag--info .el-tag__close{
    color: transparent !important;
  }
  .el-select .el-tag__close.el-icon-close{
    color: #409EFF  !important;
    background-color: transparent  !important;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: rgba(0, 31, 112, 1);
  }
  .el-tag.el-tag--info {
    background-color: rgba(0, 31, 112, 0.8);
    border-color: #00a1ff;
    color: #409EFF;
  }
  .el-select-dropdown__item{
    color:#fff
  }
}
#single-screen-select{
  position: absolute;
  left:var(--setLeft);
  top:var(--setTop);
  z-index: 1;
  text-align: center;
  background: rgba(0, 31, 112, 0.6);
  border-radius: 4px;
  border: 1px solid #00a1ff;
  color: #fff;
  width: 300px;
}

</style>
