<template>
  <div :id="mapId" class="map"> </div>
</template>

<script setup lang="ts">
  import { defineProps, ref, onMounted, onUnmounted, defineEmits, computed } from 'vue';
  import { v4 as uuidv4 } from 'uuid';
  import mapboxgl, { Map } from 'mapbox-gl';
  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
  import axios from 'axios';
  import {
    ExpandOutlined,
    CompressOutlined,
    PlusOutlined,
    MinusOutlined,
    HeatMapOutlined,
  } from '@ant-design/icons-vue';

  const props = defineProps(['nowPreviewRecord']);
  const emits = defineEmits(['getMap']);

  const mapId = `modal-map-${uuidv4()}`;
  const networkType = ref('WAN');
  let map: Map;

  const initMap = () => {
    let mapDataSources: any = {
      'raster-tiles': {
        type: 'raster',
        tiles: [
          `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
        ],
        tileSize: 256,
        minzoom: 1,
        maxzoom: 17,
      },
      'raster-tiles-font': {
        type: 'raster',
        tiles: [
          `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
        ],
        tileSize: 256,
      },
    };
    let mapDataLayers: any = [
      {
        id: 'tdt-vec-tiles',
        type: 'raster',
        source: 'raster-tiles-font',
      },
      {
        id: 'tdt-img-tiles',
        type: 'raster',
        source: 'raster-tiles',
      },
    ];

    return new mapboxgl.Map({
      container: mapId,
      language: 'zh-cmn',
      projection: 'equirectangular', // wgs84参考系
      style: {
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
        version: 8,
        sources: mapDataSources,
        layers: mapDataLayers,
      },
      maxZoom: 22,
      minZoom: 8,
      pitch: 0,
      zoom: 14,
      center: [117.984425, 35.270654],
    });
  };

  onMounted(() => {
    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
    // 获取网络环境后加载地图
    map = initMap();
  });

  onUnmounted(() => {
    map && map.remove();
  });
</script>

<style lang="scss" scoped>
  .map {
    position: relative;
    width: 100%;
    height: 100%;
  }

  ::v-deep .mapboxgl-ctrl {
    display: none !important;
  }
</style>
