<template>
  <div class="room-layers-container">
    <template v-for="roomKey in Object.keys(Layers)">
      <el-tag
        @click="()=>roomTagClick(Layers[roomKey])"
        :class="Layers[roomKey].id === activeTag? 'selected':''"
      >
        {{ Layers[roomKey].label }}
      </el-tag>
    </template>
  </div>
</template>

<script>
const Layers = {
  cyy: {
    id: 'cyy',
    bizId: 2,
    label: '创研院',
    layer: "http://bd.xt.wenhq.top:8083/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=bdlayers:bdl_cyy_pingmian&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&Format=image/png&TILECOL={x}&TILEROW={y}",
  },
  cyy1: {
    id: 'cyy1',
    bizId: 1,
    label: '创研院1',
    layer: "http://bd.xt.wenhq.top:8083/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=bdlayers:bdl_cyy_pingmian&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&Format=image/png&TILECOL={x}&TILEROW={y}",
  }
}
export default {
  name: 'room-layer',
  components: {},
  props: {
    onclick: {
      type: Function,
      default: () => {
      },
      required: false,
    },
  },
  data() {
    return {
      Layers,
      layerId: 'blayer_ng_s',
      activeTag: '',
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    window.map.removeLayersById(this.layerId);
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    roomTagClick(layer) {
      window.map.removeLayersById(this.layerId);
      const vtLayer = new BDLayers.Lib.Layer.CBTileLayer(this.layerId, {
        url: layer.layer,
        minZoom: 15,
        maxZoom: 24,
      });
      window.map.addCustomLayers(vtLayer);
      window.map.setPitch(0);
      this.activeTag = layer.id;
      this.onclick(layer);
    },
    init() {
      this.roomTagClick(Layers['cyy']);
    }
  },
};
</script>
<style lang="scss" src="./index.scss"/>
