<template>
  <div class="gis-layout">
    <EasyMapComponent
        class="map"
        @easyMapLoad="mapLoad"
    />
    <div class="gis-menu">
      <template v-for="item in menuCpt">
        <div class="gis-menu-item __hover" :class="{active: $route.name === item.name}" @click="$router.push({name: item.name})">
          {{item.meta.title}}
        </div>
      </template>
    </div>
    <div class="gis-content">
      <RouterViewCom/>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";
import RouterViewCom from '@/layout/router-view.vue'
import store from "@/store";
import * as source from "ol/source";
import * as layer from "ol/layer";
import * as proj from "ol/proj";
import * as extent from "ol/extent";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import WMTSSource from "ol/source/WMTS";

export default defineComponent({
  name: '',
  components: {
    RouterViewCom
  },
  props: {},
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      map: <any>null,
      mapFunc: <any>null,
    })
    const mapLoad = (map, func) => {
      state.map = map
      state.mapFunc = func
      // initWMSElement3()
    }
    const initWMSElement = () => {
      const p = 'EPSG:4326'
      // 切片方案（0-18级
      const projection = proj.get(p);
      const projectionExtent = projection.getExtent();
      const size = extent.getWidth(projectionExtent) / 256;
      const resolutions = new Array(19);
      const matrixIds = new Array(19);
      for (let z = 0; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
      }
      const _tileWMS = new WMTSSource({
        // url: 'http://192.168.31.19:8082/poiwmts/color/getTile2', // 这里需要替换成你的 WMTS 服务的 URL
        url: 'https://t4.tianditu.gov.cn/cva_w/wmts?tk=3cac3e6d53faf0377fa96bad29f03d2d', // 这里需要替换成你的 WMTS 服务的 URL
        // layer: 'your_layer_name', // 替换为你的图层名称
        layer: 'cva', // 替换为你的图层名称
        matrixSet: 'w',
        format: 'tiles',
        // format: 'image/png',
        projection: p,
        tileGrid: new WMTSTileGrid({
          origin: extent.getTopLeft(projectionExtent),
          resolutions: resolutions, // 这里填写你的分辨率数组
          matrixIds: matrixIds, // 这里填写你的矩阵ID数组
        }),
        style: 'default', // 样式
        wrapX: true
      })
      const layer_Debug = new layer.Tile({
        source: new source.TileDebug({
          projection: projection,
          tileGrid: _tileWMS.getTileGrid(),
        }),
        zIndex: 3
      })
      const wmts = new layer.Tile({
        source: _tileWMS,
        zIndex: 2,
      })
      state.map.addLayer(wmts)
      // state.map.addLayer(layer_Debug)
    }
    const initWMSElement3 = () => {
      const wmts = new layer.Tile({
        source: new source.XYZ({
          projection: "EPSG:4326",
          url: `http://59.255.48.160:81/vec_c/wmts?tk=您的密钥&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=vec&style=default&opacity=1&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}
`,
        }),
      })
      const wmts2 = new layer.Tile({
        source: new source.XYZ({
          projection: "EPSG:4326",
          url: `http://59.212.37.22/mapserver/vmap/hn_bigdata_2018dt/getMAP?x={x}&y={y}&l={z}&styleId=hn_bigdata_2018dtys1&ratio=1&tilesize=256&clientVersion=jssdk_bate@%20leaflet%202.1.5`,
        }),
        // extent: [109.04065590655215,18.651584245734945,110.3178165510834,19.541476823859945]
      })
      const wmts3 = new layer.Tile({
        source: new source.XYZ({
          projection: "EPSG:4326",
          url: `http://59.255.48.160:81/cva_c/wmts?tk=您的密钥&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=cva&style=default&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
        }),
      })
      state.map.addLayer(wmts)
      // state.map.addLayer(wmts2)
      state.map.addLayer(wmts3)
    }
    const menuCpt = computed(() => {
      return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children
    })
    onMounted(() => {
    })
    return {
      ...toRefs(state),
      mapLoad,
      menuCpt
    }
  },
})
</script>

<style scoped lang="scss">
.gis-layout {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  .map {
    z-index: 1;
  }
  .gis-menu {
    position: absolute;
    z-index: 2;
    bottom: 0;
    .gis-menu-item {
      &.active {
        color: red;
      }
    }
  }
  .gis-content {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
  }
}
</style>
