<template>
  <div :id="mapContainerName" class="map-container">
    <div class="search-container-box">
      <SearchComponent
        @toPosition="toPosition"
        @handlerFilter="handlerFilter"
        :layerSettings="layerSettings"
      ></SearchComponent>
    </div>
    <div class="home-button" @click="handlerInitialize"></div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineExpose, defineEmits, defineProps, watch } from 'vue';
  import { generateUUID } from '@/components/MapboxMaps/src/tool';
  import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import mapboxgl, { Map, Popup } from 'mapbox-gl';
  import { MAPBOX_TOKEN, TINADITU_TOKEN, MAP_VIEWER } from './config.js';
  import axios from 'axios';
  import SearchComponent from './SearchComponent.vue';
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_API_URL,VITE_GLOB_LAN_API_URL } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
  const mapContainerName = ref<String>();
  mapContainerName.value = 'mapContainer-' + generateUUID();
  const { VITE_GLOB_YINGXIANG_SERVER, VITE_GLOB_YAOGANYINGXIANG_SERVER } = getAppEnvConfig();
  import { getUserOrgs } from '@/api/tiankongdi';

  const networkType = ref("WAN");

  
  //
  import { TableOutlined, GlobalOutlined, HomeOutlined } from '@ant-design/icons-vue';

  // 图层控制 历史影像
  import { message, Modal } from 'ant-design-vue';
  import U from 'mapbox-gl-utils';
  import { MP } from './src/MP.js';
  import { GeojsonToWkt } from './src/WktGeojsonTransform.js';

  const emits = defineEmits([
    'onload',
    'handlerGetDetails',
    'showMonitor',
    'handlerQueryIntersectTif',
  ]);

  let isZoomVisible: any = false;
  let map: Map;
  let mp: any = null;
  const props = defineProps({
    layer: Object,
    defaultColor: String,
  });
  const layerSettings = ref<any>({});
  const layerDefaultColor = ref<String>();
  watch(
    () => props.layer,
    (val) => {
      layerSettings.value = val;
      layerDefaultColor.value = props.defaultColor;
    },
  );
  const initMap = () => {
    return new mapboxgl.Map({
      container: mapContainerName.value,
      language: 'zh-cmn',
      projection: 'globe', // wgs84参考系
      style: {
        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
        version: 8,
        sources: {
          'raster-tiles': {
            type: 'raster',
            tiles: [
              `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_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=${TINADITU_TOKEN}`,
            ],
            tileSize: 256,
          }
        },
        layers: [
          {
            id: 'tdt-vec-tiles',
            type: 'raster',
            source: 'raster-tiles-font',
            maxZoom: 32,
          },
          {
            id: 'tdt-img-tiles',
            type: 'raster',
            source: 'raster-tiles',
            maxZoom: 32,
          }
          // {
          //     id: 'tdt-wms-tiles',
          //     type: 'raster',
          //     source: 'raster-tiles-geo',
          // },
        ],
      },
      maxZoom: 22,
      minZoom: 8,
      zoom: 8,
      pitch: 0,
      center: [118.30207505530701, 35.30123435040745],
    });
  };

  function loadMapInfo(){

    map = initMap();

    map.on('load', () => {
      //挂载mapbox-gl-utils
      U.init(map);
      mp = new MP(map);

      // 添加地形数据
      map.addSource('mapbox-dem', {
        type: 'raster-dem',
        tiles: [VITE_GLOB_API_URL_VAR.value + '/mapbox_terrain/{z}/{x}/{y}.png'],
        tileSize: 256,
        maxzoom: 13,
        minzoom: 10,
      });
      // map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });

      // 设置2D地图
      map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
      map.dragRotate.disable(); // 禁用拖动旋转
      map.pitchWithRotate = false; // 禁用旋转时俯仰变化
      
      handlerCheckUserOrgs()
      getMaskData()
      handlerDealStreet()
      handlerDealCountry();
    });

    
  }
  onMounted(() => {
    mapboxgl.accessToken = MAPBOX_TOKEN;

    // 获取网络环境后加载地图

    loadMapInfo();

  })
    // 回到初始视角
  const handlerInitialize = () => {
    map.flyTo({
      center: [118.30207505530701, 35.30123435040745], // 设置中心点坐标
      zoom: 8, // 设置缩放等级
      pitch: 0,
      bearing: 0,
      duration: 1000,
    });
  };

  function toPosition(item) {
    handlerLocation(item, 17.2);
  }
  function handlerFilter(item) {
    // handlerLoadPolygon("",item);
    // if (isRootLevel.value) {
    //   handlerLoadPolygon('', item, '', '1');
    // } else {
    //   handlerLoadPolygon('', item, '', '');
    // }
  }
  const polygonVisibility = ref<String>('visible');
  const isRootLevel = ref<Boolean>(false);
  async function handlerCheckUserOrgs() {
    let orgs = await getUserOrgs({});
    let isLevel = orgs.find((item, index) => {
      return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
    });
    if (isLevel) {
      isRootLevel.value = true;
      handlerLoadPolygon('', '', '', '1');
    } else {
      isRootLevel.value = false;
      handlerLoadPolygon();
    }
  }
  function getMaskData() {
    axios({
      method: 'get',
      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
    }).then((res) => {
      let geojson = { DATA: res.data.features[0].geometry.coordinates[0][0] };

      handlerLoadMaskLayer(geojson);
    });
  }
  // 加载地图遮罩
  function handlerLoadMaskLayer(geojson) {
    map.addLayer({
      //蒙版图层   //通过边界数据反选 达到挖洞效果
      id: 'mb-tag',
      type: 'fill',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                [-180, 90],
                [180, 90],
                [180, -90],
                [-180, -90],
              ],
              geojson.DATA,
            ],
          },
        },
      },
      paint: {
        'fill-color': '#ffffff',
        'fill-opacity': 1 /* 透明度 */,
      },
      layout: {
        visibility: 'visible',
      },
    });
  }
  const handlerGetDetails = (e) => {
    emits('handlerGetDetails', e.features[0].properties);
  }
  function handlerLoadPolygon(code = '', filter = '', type = '', level = '', urlFilter='&filter="RelationType" IN (-1)') {
    let map_filter;
    let table_filter = 'idle_shp';
    let field_filter = '&field="RelationId","RelationType","Id",';
    let color_filter: any = [];
    let url_filter = urlFilter;
    if (filter && filter != '全部') {
      map_filter = ['all', ['==', ['get', 'RelationType'], filter]];
    } else {
      map_filter = ['!=', ['get', 'Id'], 0];
    }
    color_filter = [
      "case",
      ['all', ['==', ['get', 'RelationType'], 0]],
      "#0AF703",
      ['all', ['==', ['get', 'RelationType'], 1]],
      "#F70303",
      ['all', ['==', ['get', 'RelationType'], 2]],
      "#F4E004",
      ['all', ['==', ['get', 'RelationType'], 3]],
      "#0382F7",
      "#FFFFFF"
    ]
    
    if (map.getLayer('historyLayerLine')) {
      map.removeLayer('historyLayerLine');
      map.removeLayer('historyLayerFill');
      map.removeSource('historyLayerLine');
      map.removeSource('historyLayerFill');
    }
    map.addLayer({
      id: 'historyLayerLine',
      type: 'line',
      source: {
        type: 'vector',
        tiles: [
          VITE_GLOB_API_URL_VAR.value +
            '/api/IdleShp/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
            table_filter +
            field_filter +
            url_filter,
        ],
        minzoom: 1,
        maxzoom: 20,
        cluster: true, // 启用聚合
        clusterMaxZoom: 0, // 最大聚合缩放级别
        clusterRadius: 0, // 聚合半径
      },
      'source-layer': table_filter,
      layout: {
        'line-join': 'round',
        'line-cap': 'round',
        visibility: polygonVisibility.value,
      },
      filter: map_filter,
      paint: {
        'line-color': color_filter,
        'line-width': 5,
      },
    });
    map.addLayer({
      id: 'historyLayerFill',
      type: 'fill',
      source: {
        type: 'vector',
        tiles: [
          VITE_GLOB_API_URL_VAR.value +
            '/api/IdleShp/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
            table_filter +
            field_filter +
            url_filter,
        ],
        minzoom: 1,
        maxzoom: 20,
        cluster: false,
      },
      'source-layer': table_filter,
      filter: map_filter,
      layout: {
        visibility: polygonVisibility.value,
      },
      paint: {
        'fill-color': color_filter,
        'fill-opacity': 0.5,
      },
    });
    emits('onload');
    map.off('click', 'historyLayerFill', handlerGetDetails)
    map.on('click', 'historyLayerFill', handlerGetDetails);
  }
    // 获取乡镇数据
  const handlerDealStreet = (countyName: String = '临沂市'): void => {
    
    axios({
      method: 'get',
      url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Azhenjie&maxFeatures=10000&outputFormat=application%2Fjson`,
    }).then((res) => {
      handlerLoadStreetLayer(res.data);
    });
  };
  // 渲染乡镇边界数据
  const handlerLoadStreetLayer = (geojson) => {
    // 绘制线
    if (map.getSource('streetSource')) {
      map.getSource('streetSource').setData(geojson);
    } else {
      map.addSource('streetSource', {
        type: 'geojson',
        data: geojson,
      });
      map.addLayer({
        id: 'streetLayer',
        type: 'line',
        source: 'streetSource',
        paint: {
          'line-color': '#42befb', // 设置线的颜色
          'line-width': 2, // 设置线的宽度
        },
        minzoom: 10,
        maxzoom: 24,
      });

      map.addLayer({
        id: 'streetLabelLayer',
        type: 'symbol',
        source: 'streetSource',
        layout: {
          'text-field': ['get', 'xzqmc'],
          'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
          'text-size': 12,
          'text-anchor': 'center',
        },
        paint: {
          'text-color': '#041B36',
          'text-halo-color': '#fff',
          'text-halo-width': 2,
        },
        minzoom: 10,
        maxzoom: 24,
      });
    }
  };
  // 获取县区边界数据
  const handlerDealCountry = (countyName: String = '临沂市'): void => {
    let center = {};
    let zoom;
    let filterName = '';
    if (countyName == '临沂市') {
      center = { lng: 118.72504868812163, lat: 35.180072027132915 };
      zoom = 7.848587811931849;
      handlerLocation([center['lng'], center['lat']], zoom);
    } else if (countyName) {
      center = MAP_VIEWER[countyName].center;
      zoom = MAP_VIEWER[countyName].zoom;
      handlerLocation([center['lng'], center['lat']], zoom);
      filterName = countyName;
    }
    axios({
      method: 'get',
      // url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson`,
    }).then((res) => {
      handlerLoadPanelLayer(res.data);
      handlerLoadCountyLayer(res.data);
    });
  };
  // 地图定位
  function handlerLocation(lngLat, zoom) {
    map.flyTo({
      center: lngLat,
      zoom: zoom,
      bearing: 0,
      speed: 1, // 飞行速度
      curve: 2, // 飞行曲线
      essential: true,
      easing(t) {
        // 飞行动画函数
        return t;
      },
    });
  }
  // 渲染县界白板图层
  const handlerLoadPanelLayer = (geojson) => {
    if (map.getSource('countyPanelLayer')) {
      map.getSource('countyPanelSource').setData(geojson);
    } else {
      map.addSource('countyPanelSource', {
        type: 'geojson',
        data: geojson,
      });
      map.addLayer({
        id: 'countyPanelLayer',
        type: 'fill',
        source: 'countyPanelSource',
        layout: {
          visibility: 'none',
        },
        paint: {
          'fill-color': [
            'case',
            ['==', ['get', 'xzqdm_1'], '371302'],
            '#49B0F9',
            ['==', ['get', 'xzqdm_1'], '371311'],
            '#3EABFA',
            ['==', ['get', 'xzqdm_1'], '371312'],
            '#27A2FB',
            ['==', ['get', 'xzqdm_1'], '3713122'],
            '#34E6B1',
            ['==', ['get', 'xzqdm_1'], '3713001'],
            '#1099FB',
            ['==', ['get', 'xzqdm_1'], '3713271'],
            '#0695FB',
            ['==', ['get', 'xzqdm_1'], '371321'],
            '#058DEE',
            ['==', ['get', 'xzqdm_1'], '371322'],
            '#09C78E',
            ['==', ['get', 'xzqdm_1'], '371323'],
            '#047DD4',
            ['==', ['get', 'xzqdm_1'], '371324'],
            '#94D515',
            ['==', ['get', 'xzqdm_1'], '371325'],
            '#0568B0',
            ['==', ['get', 'xzqdm_1'], '371326'],
            '#3EABFA',
            ['==', ['get', 'xzqdm_1'], '371327'],
            '#49B0F9',
            ['==', ['get', 'xzqdm_1'], '371328'],
            '#27A2FB',
            ['==', ['get', 'xzqdm_1'], '371329'],
            '#94D515',
            '#1099FB',
          ],
          'fill-opacity': 0.9,
        },
      });
    }
  };
  // 渲染县区边界数据
  const handlerLoadCountyLayer = (geojson) => {
    // 绘制线
    if (map.getSource('countySource')) {
      map.getSource('countySource').setData(geojson);
    } else {
      map.addSource('countySource', {
        type: 'geojson',
        data: geojson,
      });
      map.addLayer({
        id: 'countyLayer',
        type: 'line',
        source: 'countySource',
        paint: {
          'line-color': '#6f7ff4', // 设置线的颜色
          'line-width': 3, // 设置线的宽度
        },
      });
      if (map.getLayer('countyPanelLayer')) {
        map.moveLayer('countyLayer', 'countyPanelLayer');
      }
    }
  };
  const handlerChangeLayer = (list) => {
    let filterJosn = `&filter="RelationType" IN (${list.length > 0? list.join(','): -1})`
    handlerLoadPolygon("","","","",filterJosn)
  }
  // 抛出函数
  defineExpose({
      handlerChangeLayer,
  });
</script>
<style type="less" scoped>
  .map-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .search-container-box {
    position: absolute;
    width: 330px;
    height: 40px;
    top: 72px;
    left: 73px;
    z-index: 9999;
  }

  .map-type-switch-container {
    width: 208px;
    height: 40px;
    position: absolute;
    top: 72px;
    right: 23px;
    z-index: 9999;
    font-size: 22px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  .map-type-switch-container .switch-button {
    line-height: 40px;
    width: 150px;
    height: 40px;
    float: left;
    background: url(/map/change-view-btn.png);
    background-size: 100% 100%;
  }

  .map-type-switch-container .switch-button span {
    font-size: 14px;
  }

  .home-button {
    width:40px;
    height:40px;
    background: url(/map/home-btn.png);
    background-size: 100% 100%;
    float: right;
    position: relative;
    text-align: center;
    z-index: 10;
    top: 72px;
    right: 23px;
  }
  ::v-deep .mapboxgl-ctrl-logo {
    display: none !important;
  }
</style>
