<template>
  <div>
    <div class="common-menu-btn">
      <common-btn id="layerBtn" :bg="layerBg" :bg-hover="layerBgHover" width="5" height="5" text-hover="图层管理" @click="btnClick" />
      <common-btn id="initBtn" :bg="initBg" :bg-hover="initBgHover" width="5" height="5" text-hover="初始化" @click="btnClick" />
      <common-btn id="flyBtn" :bg="flyBg" :bg-hover="flyBgHover" width="5" height="5" text-hover="漫 游" @click="btnClick" />
      <common-btn id="clearBtn" :bg="clearBg" :bg-hover="clearBgHover" width="5" height="5" text-hover="清 屏" @click="btnClick" />
    </div>
    <el-tree
      ref="layertree"
      class="layer-tree"
      v-show="showLayerTree"
      :data="tree"
      show-checkbox
      node-key="id"
      :default-expand-all="true"
      :default-checked-keys="checkedLayers"
      @check-change="handleCheckChange"
      :props="defaultProps">
    </el-tree>
  </div>
 </template>

<script>

import CommonBtn from "../CommonBtn";
import { clearUpMap } from '@/utils/freedo/index'
import {initPosition} from "../../utils/freedo";
import mapJson from "@/assets/mapJson/map.json";
import {eventBus} from "../../main";

export default {
  name: 'CommonFunction',
  components: {CommonBtn},
  data() {
    return {
      tree: [{
        "id": 1,
        "label": "CIM1",
        "children": [
          {"id": 12, "label": "蓉江新区正射影像" },
          {"id": 13, "label": "蓉江新区边界" },
        ]
      },{
        "id": 2,
        "label": "CIM2",
        "children": [
          {"id": 21, "label": "CIM2建筑（带纹理）" },
          {"id": 22, "label": "CIM2建筑（纯白色）" },
        ]
      },{
        "id": 3,
        "label": "CIM3",
        "children": [
          {"id": 31, "label": "倾斜" },
        ]
      },{
        "id": 4,
        "label": "CIM4",
        "children": [
          {"id": 41, "label": "智慧教育-手工模型" },
          {"id": 42, "label": "智慧停车云-手工模型" },
          {"id": 43, "label": "智慧社区-手工模型" },
          {"id": 44, "label": "智慧工地-手工模型" },
          {"id": 45, "label": "智慧交通-手工模型" },
          {"id": 46, "label": "智慧园林-手工模型" }
        ]
      }, {
          "id": 5,
          "label": "地形"
      }],
      checkedLayers:[5],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      layerBg: require('../../assets/images/function/通用功能/图层管理未选中.png'),
      layerBgHover: require('../../assets/images/function/通用功能/图层管理选中.png'),
      initBg: require('../../assets/images/function/通用功能/刷新未选中.png'),
      initBgHover: require('../../assets/images/function/通用功能/刷新选中.png'),
      flyBg: require('../../assets/images/function/通用功能/漫游未选中.png'),
      flyBgHover: require('../../assets/images/function/通用功能/漫游选中.png'),
      clearBg: require('../../assets/images/function/通用功能/清除未选中.png'),
      clearBgHover: require('../../assets/images/function/通用功能/清除选中.png'),
      showLayerTree: false
    }
  },
  mounted() {
    eventBus.$on('change-layer', this.setCheck);
  },
  methods: {
    setCheck(item) {
      this.$refs.layertree.setChecked(item.id, item.checked, true)
    },
    // 图层控制节点选择
    handleCheckChange(data, checked, indeterminate) {
      if(!data.hasOwnProperty('children')) {
        if(data.id.toString()==='12' || data.id.toString()==='13') {
          window.imageryManager.setLayerProperty(window.imageryManager.getAllLayers().findIndex(item => item.name === data.label), 'show', checked)
        } else if(data.id.toString()==='5') {
          window.terrainManager.visible = checked
        } else {
          let pmts = pmtsManager.getPmts( data.label).pModelInfos;
          for (var i = 0; i < pmts.length; i++) {
            pmts[i].pModel.show = checked
          }
        }
      }
    },
    btnClick(e) {
      this.showLayerTree = false
      if(e.target.id === 'initBtn') {
        initPosition()
      } else if(e.target.id === 'clearBtn') {
        clearUpMap()
      } else if(e.target.id === 'layerBtn') {
        // clearUpMap()
        this.showLayerTree = true
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.el-tree-node__content:hover {
  background-color: #337fff !important;
  border-radius: 10px;
}
.el-tree-node__label {
  font-size: 18px;
  letter-spacing: 1px;
}
.el-tree-node__content {
  padding: 3px 0px;
}
</style>

<style scoped>
  .common-menu-btn {
    position: absolute;
    right: 20px;
    top: 1rem;
    display: flex;
    width: 20rem;
    height: 5rem;
    z-index: 1111111111;
  }
  .layer-tree {
    position: absolute;
    width: 250px;
    right: 20px;
    top: 6.5rem;
    font-size: 18px !important;
    background-color: rgba(7, 62, 107, 0.82);
    color: white;
    border-radius: 10px;
    padding: 10px;
    -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  }
</style>