<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, initPage } 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",
        disabled: true,
        "children": [
          { "id": 12, "label": "蓉江新区正射影像", disabled: true, },
          { "id": 13, "label": "蓉江新区边界", disabled: true, },
        ]
      }, {
        "id": 2,
        "label": "CIM2",
        disabled: true,
        "children": [
          { "id": 21, "label": "CIM2建筑（带纹理）", disabled: true },
          { "id": 22, "label": "CIM2建筑（纯白色）", disabled: true },
        ]
      }, {
        "id": 3,
        "label": "CIM3",
        disabled: true,
        "children": [
          { "id": 31, "label": "倾斜", disabled: true },
        ]
      }, {
        "id": 4,
        "label": "CIM4",
        disabled: true,
        "children": [
          { "id": 41, "label": "智慧教育-手工模型", disabled: true },
          { "id": 42, "label": "智慧停车云-手工模型", disabled: true },
          { "id": 43, "label": "智慧社区-手工模型", disabled: true },
          { "id": 44, "label": "智慧工地-手工模型", disabled: true },
          { "id": 45, "label": "智慧交通-手工模型", disabled: true },
          { "id": 46, "label": "智慧园林-手工模型", disabled: true }
        ]
      }, {
        "id": 5,
        "label": "地形",
        disabled: true
      }],
      checkedLayers: [],
      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,
      isInit: false,
    }
  },
  mounted() {
    eventBus.$on('change-layer', this.setCheck);
    setTimeout(() => {
      window.terrainManager.visible = false
    })
    setTimeout(() => {
      this.tree.forEach((item) => {
        item.disabled = false
        if (item.children) {
          item.children = item.children.map((item) => ({ ...item, disabled: false }))
        }
      })
    }, 5000)
  },
  methods: {
    setCheck(item) {
      this.$refs.layertree.setChecked(item.id, item.checked, true)
    },
    // 图层控制节点选择
    handleCheckChange(data, checked, indeterminate) {
      const handler = (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
            }
          }
        }
      }
      if (this.isInit) {
        handler(data, checked, indeterminate)
      }
      else {
        if (data.id.toString() === '5' && checked) {
          window.terrainManager.visible = true
          return
        }
        initPosition()
        setTimeout(() => {
          handler(data, checked, indeterminate)
          this.isInit = true
        }, 1500)
      }
      if (!this.$refs.layertree.getCheckedNodes().length) {
        this.isInit = false
        // 恢复蓝色球体
        initPage()
      }
    },
    btnClick(e) {
      this.showLayerTree = false
      this.clearDialog()
      if (e.target.id === 'initBtn') {
        initPosition()
      } else if (e.target.id === 'clearBtn') {
        clearUpMap()
      } else if (e.target.id === 'layerBtn') {
        this.showLayerTree = true
      }
    },
    // 清空地图弹窗
    clearDialog() {
      this.$bus.$emit('clear')
    }
  }
}
</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: 15rem;
  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>