<template>
    <div class="map-container">
      <div id="mapContainer" class="map-box"></div>
      <!-- <div class="map-control">
        <img
          v-for="(item, index) in nextMapControl"
          :key="index"
          :src="item.icon"
          :title="item.title"
          @click="handlerMapControlClick(item.handler)"
        />
        <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
      </div> -->
      <LayerComponent
        @changeOpenModal="changeOpenModal"
        @changeOpenInsertShpModal="changeOpenInsertShpModal"
      />
      <LayerControl @draw="handlerDrawPolygon" />
      <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
      <InsertShp v-model:openModal="insertShpModal" />
      <DataListComponent />
      <RightShowInfo v-model:openModal="openRightInfo" />
    </div>
  </template>
  
  <script lang="ts" setup>
    import { onMounted, onUnmounted, defineProps, reactive, ref } from 'vue';
    import { useMessage } from '@/hooks/web/useMessage';
    import mapboxgl, { Map, Popup } from 'mapbox-gl';
  
    // 图形绘制工具类
    import MapboxDraw from '@mapbox/mapbox-gl-draw';
  
    import U from 'mapbox-gl-utils';
    import 'mapbox-gl/dist/mapbox-gl.css';
    import './src/index.less';
    import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
    import { MP } from './src/MP';
    import { DrawingType } from '@/enums/mapEnum';
  
    import {
      SnapPolygonMode,
      SnapPointMode,
      SnapLineMode,
      SnapModeDrawStyles,
      SnapDirectSelect,
    } from 'mapbox-gl-draw-snap-mode';
    import LayerComponent from './LayerComponent/index.vue';
    import LayerControl from './LayerControl/index.vue';
    import UseModal from './Modal/index.vue';
    import InsertShp from './InsertShp/index.vue';
    import DataListComponent from './DataListComponent/index.vue';
    import RightShowInfo from './RightShowInfo/index.vue';
  
    const openModal = ref(false);
    const insertShpModal = ref(false);
    const openRightInfo = ref(false);
    const changeOpenModal = (value) => {
      openModal.value = value;
    };
    const changeOpenInsertShpModal = (value) => {
      insertShpModal.value = value;
    };
  
    // map参数类型
    interface MapboxOptionsInterface {
      mapOptions: mapboxgl.MapboxOptions;
      control: DrawingType[];
    }
    const props = defineProps<MapboxOptionsInterface>();
  
    let nextMapControl: Array<any> = reactive([]);
    nextMapControl = props.control
      ? props.control.map((item) => {
          console.log('item::: ', item);
          return MapControlConfig[item];
        })
      : [];
  
    console.log('nextMapControl::: ', nextMapControl);
  
    // 定义地图容器
    let map: Map;
    let popup: Popup;
    let clickPoisition: Array<number> = [];
    let selectFeature: Object = {};
    let mp: any = null;
  
    const { createConfirm, createMessage } = useMessage();
  
    // 定义地图回调emit
    // 地图加载完成回调
    const emit = defineEmits(['mapOnLoad', 'mapDraw']);
  
    onMounted(() => {
      mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
      map = initMap();
      map.on('load', () => {
        //挂载mapbox-gl-utils
        // U.init(map);
        mp = new MP(map);
        emit('mapOnLoad', map);
  
        // 初始化绘图空间
        handlerInitDrawTool();
  
        map.on('click', (e) => {
          clickPoisition = e.lngLat;
        });
  
        map.on('draw.selectionchange', (e) => {
          handlerCopyToTargetLayer(e);
        });
  
        window.handlerCopyFeature = handlerCopyFeature;
      });
    });
    // 销毁地图
    // 移除地图实例
    onUnmounted(() => {
      map ? map.remove() : null;
    });
    // 初始化地图
    // 返回地图实例
    const initMap = () => {
      return new mapboxgl.Map({
        container: 'mapContainer',
        language: 'zh-cmn',
        projection: 'equirectangular', // wgs84参考系
        style: MapboxDefaultStyle,
        maxZoom: 22,
        minZoom: 6,
        ...props.mapOptions,
      });
    };
  
    const handlerMapControlClick = (handler: string) => {
      handler === 'handlerDrawPoint' && handlerDrawPoint();
      handler === 'handlerDrawLineString' && handlerDrawLineString();
      handler === 'handlerDrawPolygon' && handlerDrawPolygon();
    };
    //绘制点
    const handlerDrawPoint = () => {
      mp.draw('Point');
      mp.on('Point', function (e) {
        emit('mapDraw', 'Point', e);
      });
    };
    //绘制线
    const handlerDrawLineString = () => {
      mp.draw('LineString');
      mp.on('LineString', function (e) {
        emit('mapDraw', 'LineString', e);
      });
    };
    //绘制面
    const handlerDrawPolygon = () => {
      mp.draw('Polygon');
      mp.on('Polygon', function (e) {
        emit('mapDraw', 'Polygon', e);
      });
    };
    //删除标记
    const handlerUnDraw = () => {
      mp.deleteDraw();
      emit('mapDraw', 'cancel');
    };
  
    // 初始化绘图空间
    const handlerInitDrawTool = () => {
      let drawTool = new MapboxDraw({
        modes: {
          ...MapboxDraw.modes,
          draw_point: SnapPointMode,
          draw_polygon: SnapPolygonMode,
          draw_line_string: SnapLineMode,
          direct_select: SnapDirectSelect,
        },
        // Styling guides
        styles: SnapModeDrawStyles,
        userProperties: true,
        // Config snapping features
        snap: true,
        snapOptions: {
          snapPx: 15, // defaults to 15
          snapToMidPoints: true, // defaults to false
          snapVertexPriorityDistance: 0.0025, // defaults to 1.25
        },
        guides: true,
      });
  
      map.addControl(drawTool, 'top-right');
    };
  
    // 将图斑复制到指定图层
    const handlerCopyToTargetLayer = (e) => {
      if (e.features.length > 0) {
        if (popup) {
          popup.remove();
          popup = null;
        }
  
        selectFeature = e.features[0];
  
        popup = new mapboxgl.Popup({
          closeButton: false,
          closeOnClick: false,
        });
  
        // 设置 popup 的位置和内容
        popup
          .setLngLat(clickPoisition)
          .setHTML(
            `
                  <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
          )
          .addTo(map);
      } else {
        popup.remove();
      }
    };
  
    const handlerCopyFeature = () => {
      console.log(selectFeature);
      popup.remove();
      createMessage.success('复制成功！');
    };
  </script>
  
  <style>
    .mapboxgl-ctrl-group:not(:empty) {
      box-shadow: none;
    }
    .mapboxgl-ctrl-group {
      background: none !important;
    }
    .mapbox-gl-draw_ctrl-draw-btn {
      width: 40px !important;
      height: 40px !important;
      float: left;
      border-radius: 50%;
    }
    .mapboxgl-ctrl-top-right {
    }
  
    .mapboxgl-ctrl-group button + button {
      border: 0px;
      margin: 0px 3px;
    }
  
    .mapbox-gl-draw_ctrl-draw-btn:hover {
      transform: scale(1.2);
    }
    .mapbox-gl-draw_polygon {
      background-image: url(/polygon.png);
      background-size: 100% 100%;
      width: 100px;
      height: 100px;
    }
    .mapbox-gl-draw_point {
      background-image: url(/point.png);
      background-size: 100% 100%;
      width: 100px;
      height: 100px;
    }
    .mapbox-gl-draw_line {
      background-image: url(/line.png);
      background-size: 100% 100%;
      width: 100px;
      height: 100px;
    }
  
    .mapbox-gl-draw_trash {
      background-image: url(/del.png);
      background-size: 100% 100%;
      width: 100px;
      height: 100px;
    }
  
    .mapbox-gl-draw_combine {
      background-image: url(/combine.png);
      background-size: 100% 100%;
      width: 100px;
      height: 100px;
    }
  
    .mapbox-gl-draw_uncombine {
      background-image: url(/uncombine.png);
      background-size: 100% 100%;
      width: 100px;
      height: 100px;
    }
  </style>
  