<template>
  <div class="layer_tree" style="padding: 0 5px;height: 100%;width: 100%;box-sizing: border-box">
    <!--过滤框-->
    <el-input placeholder="请输入关键字" v-model="map_layer_filter_Text" size="small" style="margin: 10px 0;"
              clearable=""></el-input>
    <!--图层树-->
    <el-scrollbar class="blue_scrollvar_box" style="height: calc(100% - 70px)">
      <el-tree
        :data="layerdata"
        show-checkbox
        node-key="id"
        :expand-on-click-node="false"
        @check="layerTreeNodeChange"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedFolders"
        :filter-node-method="filterNode"
        ref="layertree"><!--默认展开(必须设置node-key) -->
        <span class="custom-tree-node" slot-scope="{ node, data }" :tilte="data.id">
           <label class="nodename">{{ data.id }}</label>

           <span v-if="data.is_leaf_node && data.metadata && data.metadata.legend">
                    <el-button @click="show_layer_legend(data.id)" type="text" style="cursor: pointer; color: #0268fb"
                               size="mini">图例</el-button>
           </span>

    </span>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import MapCommon from "../../common/MapCommon";
import { Button, Tree,Scrollbar,Input } from 'element-ui';

export default {
  name: "LayerControl",
  components: {ElButton:Button,ElTree:Tree,ElInput:Input,ElScrollbar:Scrollbar},
  props: {
    map: {
      type: Object,
      default: null
    },
    ignoreLayers:{
      type:Array,
      default: []
    }
  },
  data() {
    return {
      dialogVisible: false,
      layerdata: [],/*图层数据，供tree使用*/
      defaultCheckedKeys: [],/*图层树默认选中的节点*/
      defaultExpandedFolders: [],/*图层默认展开的文件夹*/
      map_layer_filter_Text: "",/*过滤图层的文本*/
      ignoreDefault:["dt_cy_fill_search","dt_xzy_fill_search","dt_xy_fill_search","dt_dsy_fill_search","dt_sy_fill_search",],
    }
  },
  watch: {
    map_layer_filter_Text(val) {
      this.$refs.layertree.filter(val);
    },
    map(val){
      if(val){
        this.initLayerTree(val.getStyle())
      }
    },
  },


  mounted(){
    if(this.map){
      this.initLayerTree(this.map.getStyle())
    }
  },
  methods: {
    filterNode(value, data, node) {
      if (!value) return true;
      return data.id.indexOf(value) !== -1;
    },
    /*图层树节点change事件*/
    layerTreeNodeChange(checkedNodes, checkedKeys) {
      let showArr = [];
      let hideArr = [];

      /*把需要显示和隐藏的图层id找出来，分别存放*/
      if (checkedNodes.children) {/*判断当前节点是否是 文件夹*/
        /*根据id,和已勾选数组，获取当前勾选状态*/
        if (this.getTreeNodeCheckedByID(checkedNodes.id, checkedKeys.checkedKeys)) {
          checkedNodes.children.map((node) => {
            showArr.push(node.id)
          });
        } else {
          checkedNodes.children.map((node) => {
            hideArr.push(node.id)
          })
        }
      } else {
        /*根据id,和已勾选数组，获取当前勾选状态*/
        if (this.getTreeNodeCheckedByID(checkedNodes.id, checkedKeys.checkedKeys)) {
          showArr.push(checkedNodes.id)
        } else {
          hideArr.push(checkedNodes.id)
        }
      }

      /*loop 显示图层*/
      MapCommon.showLayers(showArr, this.map);

      /*loop 隐藏图层*/
      MapCommon.hideLayers(hideArr, this.map);

    },

    /*根据id,和已勾选数组，获取当前勾选状态*/
    getTreeNodeCheckedByID(id, checkedKeys) {
      return checkedKeys.find(item => item == id) == undefined ? false : true;
    },

    /*初始化图层树*/
    initLayerTree(style) {
      console.log("初始化设置")
      let folders = style['metadata'] ? (style['metadata']['mapbox:groups'] ? style['metadata']['mapbox:groups'] : {}) : {}
      let folderIndex = -1
      let layers = style.layers.reverse();
      let mylayers = [];

      for (let i = 0; i < layers.length; i++) {
        let layer = layers[i];
        layer.is_leaf_node = true;
        let ignore=this.ignoreLayers.concat(this.ignoreDefault)
        if (ignore.indexOf(layer.id) > -1) {
          continue;
        }


        /*图层显示标记   'visible'显示，'none'隐藏*/
        layer.visibility = layer.layout ? (layer.layout.visibility ? layer.layout.visibility : 'visible') : 'visible';
        if (layer.visibility === 'visible') {
          this.defaultCheckedKeys.push(layer.id);
        }

        /*图层有文件夹信息*/
        if (layer['metadata'] && layer['metadata']['mapbox:group']) {
          let layername = folders[layer['metadata']['mapbox:group']].name;
          let collapsed = folders[layer['metadata']['mapbox:group']].collapsed;/*是否展开文件夹，collapsed=true不展开*/
          if (mylayers[folderIndex] && mylayers[folderIndex]['id'] === layername) {
            //layer级别
            mylayers[folderIndex]['children'].push(layer);
          } else {
            //文件夹级别
            folderIndex++;
            mylayers[folderIndex] = {};
            mylayers[folderIndex]['visibility'] = 'none';
            mylayers[folderIndex]['children'] = [];
            mylayers[folderIndex]['id'] = layername;
            mylayers[folderIndex]['collapsed'] = collapsed;
            mylayers[folderIndex]['children'].push(layer);
            mylayers[folderIndex]['groupid'] = layer['metadata']['mapbox:group'];

            /*当前文件夹是否展开*/
            if (!collapsed) {//collapsed=false时，文件夹默认展开
              this.defaultExpandedFolders.push(layername);
            }
          }

          /*文件夹下有一个图层显示，文件夹就显示*/
          if (!layer.layout || layer.layout.visibility !== 'none') {
            mylayers[folderIndex]['visibility'] = 'visible';
          }
        } else {
          folderIndex++;
          mylayers[folderIndex] = layer;
        }
      }
      this.layerdata = mylayers;
    },
  }
}
</script>

<style scoped lang="less">
.layer_tree {
  /*图层树背景*/
   background-color: white;
  .el-tree {
    background: transparent;
    font-size: 14px;

    /*图层名称 过长省略*/

    .nodename {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 90px;
      display: inline-block;
      text-align: left;
      vertical-align: sub;
      line-height: 17px;
    }
  }

  /*图层树复选框颜色*/

  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0268fb;
    border-color: #0268fb;
  }
}
</style>
