<template>
  <div class="w-full">
    <MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" />
  </div>
</template>
<script lang="ts" setup>
  import rodeImg from '@/assets/images/icon_fly2.png';
  import { ref, watch } from 'vue';
  import MapboxMaps from '@/components/MapboxMaps/index.vue';
  import { getDroneGeoJson } from '@/api/monitor/index';
  const detailMap = ref();
  const props = defineProps({
    ruleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const geojson = ref();
  const droneMarker = ref();
  const mapBox = ref();

  const mapOptions = {
    center: [117.84714891969796, 35.22152309532066],
    zoom: 10,
  };
  watch(
    () => props.ruleForm,
    (newVal, oldVal) => {
      console.log(newVal);
      loadCaseGeoJson();
      detailMap.value.flyTo({
        center: [newVal.lng, newVal.lat], // 中心点
        zoom: 18, // 缩放比例
        pitch: 0, // 倾斜度
      });
      loadDroneMarker(newVal.lng, newVal.lat);
    },
  );
  const mapOnLoad = (map) => {
    mapBox.value = map;
    // 测试地址
    const testSource =
      'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
    map.U.addVector('name', testSource);
    map.U.addLineLayer('ffff', {
      source: 'name',
      'source-layer': 'lindi',
    });
    detailMap.value = map;
    loadImageLayer();
    loadStreetBorderLayer();
    loadCaseGeoJson();
  };
  //   费县图斑
  function loadImageLayer() {
    detailMap.value.addLayer({
      id: 'wms-test-layer',
      type: 'raster',
      source: {
        type: 'raster',
        tiles: [
          'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
        ],
        tileSize: 256,
      },
      paint: {},
    });
  }
  // 费县镇界
  function loadStreetBorderLayer() {
    detailMap.value.addLayer({
      id: 'street-border',
      type: 'raster',
      source: {
        type: 'raster',
        tiles: [
          'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
        ],
        tileSize: 256,
      },
      paint: {},
      layout: {
        visibility: 'visible',
      },
    });
    detailMap.value.resize();
  }
  //   获取GeoJSON图层
  async function loadCaseGeoJson() {
    const data = await getDroneGeoJson({ id: props.ruleForm.info.id });
    console.log(data);
    geojson.value = data;
    if (geojson.value.features.length == 0) {
      detailMap.value.addLayer({
        id: 'points',
        type: 'symbol',
        source: {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [props.ruleForm.info.lng, props.ruleForm.info.lng],
                },
                properties: {
                  title: 'Mapbox DC',
                  icon: 'monument',
                },
              },
            ],
          },
        },
        layout: {},
      });
    }
    // 报错的修改方法There is already a source with ID "geojsonfill"
    if (detailMap.value.getLayer('geojsonfill')) {
      detailMap.value.removeLayer('geojsonfill');
      detailMap.value.removeSource('geojsonfill');
    }
    if (detailMap.value.getLayer('geojsonline')) {
      detailMap.value.removeLayer('geojsonline');
      detailMap.value.removeSource('geojsonline');
    }

    detailMap.value.addLayer({
      id: 'geojsonfill',
      type: 'fill',
      source: {
        type: 'geojson',
        data: geojson.value,
      },
      paint: {
        'fill-color': '#FE9003',
        'fill-opacity': 0.2,
        'fill-outline-color': '#FE9003',
      },
    });

    detailMap.value.addLayer({
      id: 'geojsonline',
      type: 'line',
      source: {
        type: 'geojson',
        data: geojson.value,
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round',
      },
      paint: {
        'line-color': '#FE9003',
        'line-width': 4,
      },
    });
  }
  //   图斑位置显示无人机图标
  function loadDroneMarker(lng, lat) {
    if (detailMap.value.getLayer('cat-on-building')) {
      detailMap.value.removeLayer('cat-on-building');
      detailMap.value.removeSource('cat-on-building');
      detailMap.value.removeImage('cat');
    }
    detailMap.value.loadImage(rodeImg, (error, image) => {
      detailMap.value.addImage('cat', image);
      detailMap.value.addLayer({
        id: 'cat-on-building',
        source: {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [lng, lat],
                },
              },
            ],
          },
        },
        slot: 'top',
        type: 'symbol',
        layout: {
          'icon-image': 'cat',
          'icon-size': 0.05,
          'symbol-placement': 'point',
          'symbol-z-elevate': true,
        },
      });
    });
  }
</script>
<style scoped lang="less">
  .w-full {
    width: 100%;
    height: 50vh;
  }
</style>
