<template>
  <div class="w-full">
    <MapboxMaps
      :mapOptions="mapOptions"
      @map-on-load="mapOnLoad"
      :control="mapControl"
      @map-draw="handlerMapDraw"
    />
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import rodeImg from '@/assets/images/icon_fly2.png';
  import MapboxMaps from '@/components/MapboxMaps/index.vue';
  import { DrawingType } from '@/enums/mapEnum';

  const mapControl: DrawingType[] = [DrawingType.Polygon];
  const emit = defineEmits(['setArea']);
  const mapOptions = {
    center: [117.84714891969796, 35.22152309532066],
    zoom: 10,
  };
  const detailMap = ref();
  const mapBox = ref();
  const ruleForm = ref({});
  const props = defineProps({
    interpretData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  console.log(props.interpretData);
  ruleForm.value = props.interpretData;
  watch(
    () => props.interpretData,
    (newVal) => {
      ruleForm.value = newVal;
      detailMap.value.flyTo({
        center: [newVal.lng, newVal.lat], // 中心点
        zoom: 16, // 缩放比例
        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;
  };
  //地图绘制的回调
  const handlerMapDraw = (type: string, data: any) => {
    console.log('data::: ', data);
    console.log('type::: ', type);
    emit('setArea', data);
  };
  //   案件位置显示无人机图标
  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%;
    position: relative;
    height: 90vh;
  }
</style>
