<template>
  <div>
    <div class="video-menu">
      <layer-manager :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="menuClick"/>
    </div>
    <div v-if="id==='CIM4'" class="cim4">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          style="display:block;margin-top: 10px;width: 200px"
          v-for="(item,index) in cim4"
          :id="item"
          :key="'layercheckbox'+ index"
          :label="item"
          @change="changeCIM4(item)"
          border/>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManager from "@/components/LayerManager";
import KeywordManager from "@/components/KeywordManager";
import TimeManager from "@/components/TimeManager";
import mapJson from "@/assets/mapJson/map.json";
import { clearUpMap } from '@/utils/freedo/index'
import { eventBus } from "../../../main";
export default {
  name: 'Geo',
  components: {TimeManager, KeywordManager, LayerManager, CommonBtn },
  data() {
    return {
      cim4: [],
      checkList: [],
      ktSelect: '',
      id: '',
      selectIndex: 'layerBtn',
      menuTab: [{
        name: '地理信息数据',
        value: 'scene'
      }],
      menus: {
        scene: [
          {type: "1",typename: "CIM1地表模型",total: ""},
          {type: "2",typename: "CIM2框架模型",total: ""},
          {type: "3",typename: "CIM3标准模型",total: ""},
          {type: "4",typename: "CIM4精细模型",total: ""},
        ]
      }
    }
  },
  mounted() {
    for(let key in mapJson['CIM4']) {
      this.cim4.push(key)
    }
    this.checkList = this.cim4
  },
  methods: {
    btnClick(e) {
        this.selectIndex = e.target.id
    },
    menuClick(id) {
      id = id.typename
      clearUpMap()
      this.addCIM(id.substring(0, 4))
    },
    addCIM(id) {
      this.id = id
      switch (id) {
        case 'CIM1':
          eventBus.$emit('change-layer', { id:1, checked: true});
          eventBus.$emit('change-layer', { id:2, checked: false});
          eventBus.$emit('change-layer', { id:3, checked: false});
          eventBus.$emit('change-layer', { id:4, checked: false});
          break
        case 'CIM2':
          eventBus.$emit('change-layer', { id:2, checked: true});
          eventBus.$emit('change-layer', { id:1, checked: false});
          eventBus.$emit('change-layer', { id:3, checked: false});
          eventBus.$emit('change-layer', { id:4, checked: false});
          eventBus.$emit('change-layer', { id:5, checked: true});
          break
        case 'CIM3':
          eventBus.$emit('change-layer', { id:3, checked: true});
          eventBus.$emit('change-layer', { id:1, checked: false});
          eventBus.$emit('change-layer', { id:2, checked: false});
          eventBus.$emit('change-layer', { id:4, checked: false});
          eventBus.$emit('change-layer', { id:5, checked: true});
          break
        case 'CIM4':
          eventBus.$emit('change-layer', { id:4, checked: true});
          eventBus.$emit('change-layer', { id:1, checked: false});
          eventBus.$emit('change-layer', { id:2, checked: false});
          eventBus.$emit('change-layer', { id:3, checked: false});
          eventBus.$emit('change-layer', { id:5, checked: true});
          break
      }
    },
    changeCIM4(id) {
      const isShow = this.checkList.includes(id)
      let pModelInfos = pmtsManager.getPmts(id).pModelInfos
      for(var pModelInfo of pModelInfos) {
        let tileset = pModelInfo.pModel
        tileset.show = isShow
      }
      // console.log(window.pmtsManager)
    },
    changeState(v) {
      this.ktSelect = v
    }
  }
}
</script>

<style>
.video-menu {
  display: flex;
  z-index: 111111111;
  width: 40rem;
  height: 5rem;
  position: absolute;
  left: 20px;
  top: 1rem;
}
.cim4 {
  z-index: 111111111;
  width: 20rem;
  height: 20rem;
  position: absolute;
  left: 380px;
  top: 7.5rem;
}
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
  margin-left: 0px;
}
.el-checkbox__label {
  color: white !important;
  font-size: 17px !important;
}
</style>