<template>
  <div class="map-index">
    <!-- 加载地图 -->
    <div id="mapContainer"></div>
  </div>
</template>

<script>
import { createApp, nextTick, onBeforeUnmount, onMounted, reactive, ref, toRefs } from 'vue';
import MapboxUtils from '@/utils/gis/mapbox';
import bus from '@/utils/util';
import Popup from './Popup.vue';
import { RainStationFindall, getAllRainValue, rainAnalyse } from '@/services';

import bjGeoJSON from '@/assets/json/bianjie.json';
import { getKrigingByPoints } from '@/utils/gis/rainkriging';

export default {
  name: 'Mapbox',
  components: { Popup },
  setup(props) {
    const allData = reactive({
      overlay: {},
      pointKey: [],
      rainAnalyses: {},
      index: 0,
    });

    const initMap = () => {
      window.mapbox = new MapboxUtils({
        container: 'mapContainer',
        pitch: 25,
        //bearing: -17.6,
        zoom: 12,
        center: [114.277596, 30.620028],
        antialias: true,
      });
      //添加比例尺
      // var scale = new mapboxgl.ScaleControl({
      //   maxWidth: 100,
      //   unit: 'metric'
      // });
      // window.mapbox._map.addControl(scale, "bottom-left");
    };

    const getAllRainValueRequest = async (time, time2) => {
      let { code, data } = await getAllRainValue({ startTime: time, endTime: time2 });
      if (!(code == 200)) return;
      let result1 = [];
      let datelist = [];
      data.forEach((item) => {
        result1.push(item.list);
        datelist.push(item.date);
      });
      bus.emit('datelist', datelist);
      window.rainstationlen = null;
      result1.map((item) => {
        item.map((reainitem) => {
          let { point } = reainitem;
          let lngLat = point.replace('POINT(', '').replace(')', '').split(' ');
          reainitem.lng = lngLat[0];
          reainitem.lat = lngLat[1];
        });
      });

      allData.rainAnalyses = result1;
      window.rainstationlen = result1.length;
      return Promise.resolve();
    };

    // 降水分布图
    const initKriging = async (hour) => {
      // allData.index = allData.index == 30 ? 0 : allData.index + 1;
      // hour = allData.index;
      let layerId = `kriging_layer`;
      let sourceId = `kriging_source`;
      let markerLayerId = `marker_kriging_layer`;
      let markerSourceId = `marker_kriging_source`;
      let data = allData.rainAnalyses[hour];
      if (!!data) return tokriging(data);

      function initLayer(kriging, marker) {
        !mapbox._map.getSource(sourceId) && mapbox._map.addSource(sourceId, { type: 'geojson', data: kriging });
        !mapbox._map.getSource(markerSourceId) && mapbox._map.addSource(markerSourceId, { type: 'geojson', data: marker });
        !mapbox._map.getLayer(layerId) &&
          mapbox._map.addLayer({
            id: layerId,
            type: 'fill',
            source: sourceId,
            layout: {},
            paint: {
              'fill-color': { type: 'identity', property: 'color' },
              'fill-opacity': 0.6,
            },
          });
        mapbox._map.moveLayer(layerId, 'bulding_layer');
        !mapbox._map.getLayer(markerLayerId) &&
          mapbox._map.addLayer({
            id: markerLayerId,
            type: 'symbol',
            source: markerSourceId,
            layout: {
              'text-field': ['get', 'name'],
              'text-variable-anchor': ['top'],
              'text-radial-offset': 0.5,
              'text-justify': 'auto',
            },
            paint: {
              'text-color': 'rgba(229,229,229,1)',
              'text-halo-color': 'rgba(0, 0, 0, 0.8)',
              'text-halo-width': 3,
            },
          });
      }

      function tokriging(data) {
        let layerSource = mapbox._map.getSource(sourceId);
        let markerSource = mapbox._map.getSource(markerSourceId);
        let geoJson = turf.featureCollection(
          data.map((item) =>
            turf.point([Number(item.lng), Number(item.lat)], {
              value: item.value,
              name: `${item.value}mm`,
            })
          )
        );

        let kriging = getKrigingByPoints(geoJson, bjGeoJSON);
        if (!!!layerSource || !!!markerSource) return initLayer(kriging, geoJson);
        layerSource.setData(kriging);
        markerSource.setData(geoJson);
      }
    };

    // 加载不同图层 e.imgUrl图片地址  e.key图层id
    bus.on('imageLayer', (e) => {
      let layer = mapbox._map.getLayer(e.key + '_layer');
      if (layer == undefined) {
        // 加载对应图层
        mapbox.loadBasicalmapLayer(e.imgUrl, e.key, true);
      } else {
        // 显示对应图层
        mapbox.setLayerVisible([e.key], true);
      }
    });
    onMounted(() => {
      initMap();
      nextTick(() => {});
    });
    onBeforeUnmount(() => {
      bus.off('imageLayer');
    });
    return {
      ...toRefs(allData),
      initKriging,
      getAllRainValueRequest,
      //createPopup,
    };
  },
};
</script>

<style lang="less" scoped>
.map-index {
  width: 100%;
  height: 100%;
}

#mapContainer {
  width: 100%;
  height: 100%;
}

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