<template>
  <div ref="vChartRef" :id="'mars3d-container-' + name"></div>
  <EditModal @register="editModal" @success="editSuccess" />
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { isArray } from '@/utils';
  import * as mars3d from 'mars3d';
  import { EditModal } from './index';
  import { useModal } from '@/components/Modal';

  const [editModal, { openModal: openEidtModal }] = useModal();

  let map: mars3d.Map; // 地图对象

  let mapIns: any = null;
  let markers: any = [];
  let AMapIns: any = null;

  const vChartRef = ref<HTMLElement>();
  const props = defineProps({
    name: {
      type: String,
      default: '',
    },
  });
  onMounted(() => {
    let options = {
      scene: {
        center: {
          lat: 35.362625,
          lng: 118.033886,
          alt: 8306.3,
          heading: 360,
          pitch: -45,
        },
        scene3DOnly: false,
        shadows: false,
        removeDblClick: true,
        sceneMode: 3,
        showSun: true,
        showMoon: true,
        showSkyBox: true,
        showSkyAtmosphere: true,
        fog: true,
        fxaa: true,
        requestRenderMode: true,
        contextOptions: {
          requestWebgl1: false,
          webgl: {
            preserveDrawingBuffer: true,
            alpha: false,
            stencil: true,
            powerPreference: 'high-performance',
          },
        },
        globe: {
          depthTestAgainstTerrain: false,
          baseColor: '#546a53',
          showGroundAtmosphere: true,
          enableLighting: false,
        },
        cameraController: {
          zoomFactor: 3,
          minimumZoomDistance: 1,
          maximumZoomDistance: 50000000,
          enableRotate: true,
          enableTranslate: true,
          enableTilt: true,
          enableZoom: true,
          enableCollisionDetection: true,
          minimumCollisionTerrainHeight: 15000,
        },
      },
      control: {
        homeButton: false,
        baseLayerPicker: false,
        sceneModePicker: false,
        vrButton: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        infoBox: false,
        geocoder: false,
        selectionIndicator: false,
        showRenderLoopErrors: true,
        contextmenu: {
          hasDefault: true,
        },
        mouseDownView: true,
        zoom: {
          insertIndex: 1,
        },
      },
      method: {
        templateValues: {
          dataServer: '//data.mars3d.cn',
          gltfServerUrl: '//data.mars3d.cn/gltf',
        },
      },
      terrain: {
        url: '//data.mars3d.cn/terrain',
        show: true,
        clip: true,
      },
      basemaps: [
        {
          id: 10,
          name: '地图底图',
          type: 'group',
          opacity: 1,
        },
        {
          id: 2021,
          pid: 10,
          name: '天地图影像',
          icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
          type: 'group',
          layers: [
            {
              name: '底图',
              type: 'tdt',
              layer: 'img_d',
              eventParent: {
                id: 2021,
                pid: 10,
                name: '天地图影像',
                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                type: 'group',
                layers: [
                  {
                    name: '底图',
                    type: 'tdt',
                    layer: 'img_d',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              private: false,
              id: 'm-a57ecb7d-ba05-47a3-b1be-2e28411a5954',
              opacity: 1,
              pid: 2021,
              parent: {
                id: 2021,
                pid: 10,
                name: '天地图影像',
                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                type: 'group',
                layers: [
                  {
                    name: '底图',
                    type: 'tdt',
                    layer: 'img_d',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              zIndex: 1,
            },
            {
              name: '注记',
              type: 'tdt',
              layer: 'img_z',
              eventParent: {
                id: 2021,
                pid: 10,
                name: '天地图影像',
                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                type: 'group',
                layers: [
                  {
                    name: '底图',
                    type: 'tdt',
                    layer: 'img_d',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              private: false,
              id: 'm-671f9d42-dda7-45ec-9d0f-4259c915b2cb',
              opacity: 1,
              pid: 2021,
              parent: {
                id: 2021,
                pid: 10,
                name: '天地图影像',
                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
                type: 'group',
                layers: [
                  {
                    name: '底图',
                    type: 'tdt',
                    layer: 'img_d',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              zIndex: 2,
            },
          ],
          show: true,
          opacity: 1,
        },
      ],
      layers: [],
    };
    initMap(options);
  });

  const isFirstLoad = ref(true);
  const initMap = (newData: any) => {
    // 第一次加载
    if (isFirstLoad.value) {
      map = new mars3d.Map(vChartRef.value, newData);
    } else {
      // 之后更新
      // map.setOptions(newData);
      map.setSceneOptions(newData.scene);
    }
    isFirstLoad.value = false;
    // 初始化矢量图层
    handlerInitEntityLayer();
    const mapContextmenuItems = [
      {
        text: '在此处添加打卡点',
        icon: `<svg class="iconsvg" aria-hidden="true">
              <use xlink:href="#marsgis-qjsjdb"></use>
            </svg>`, // 支持iconfont的symbol方式图标（svg）
        callback: (e) => {
          const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian);
          openEidtModal(true, {
            isUpdate: false,
            lat: mpt.lat,
            lng: mpt.lng,
          });
        },
      },
    ];
    map.bindContextMenu(mapContextmenuItems);
  };

  const dataHandle = (newData: any) => {
    if (!mapIns && !AMapIns) {
      // initMap(props.chartConfig.option)
      return;
    }
    if (isArray(newData.markers)) {
      // 先清除旧标记
      mapIns.remove(markers);
      markers = [];
      // 记录新标记
      if (mapMarkerType.value === 'Marker') {
        newData.markers.forEach((markerItem: any) => {
          const markerInstance = new AMapIns.Marker({
            position: [markerItem.position[0], markerItem.position[1]],
            offset: new AMapIns.Pixel(-13, -30),
          });
          markers.push(markerInstance);
          markerInstance.setMap(mapIns);
        });
      } else if (mapMarkerType.value === 'CircleMarker') {
        newData.markers.forEach((markerItem: any) => {
          const markerInstance = new AMapIns.CircleMarker({
            center: [markerItem.position[0], markerItem.position[1]],
            radius: markerItem.value,
            ...marker.value,
          });
          markers.push(markerInstance);
          markerInstance.setMap(mapIns);
        });
      }
    }
  };

  let graphicLayer = null;
  //  地球创建完成后默认加载矢量数据图层
  const handlerInitEntityLayer = () => {
    if (graphicLayer == null) {
      graphicLayer = new mars3d.layer.GraphicLayer({ id: 999 });
    }
  };

  // 点击获取点击位置点位信息  用于常见的下发火点、下发任务点等使用

  const handlerDrawPoint = async () => {
    const graphic = await graphicLayer.startDraw({
      type: 'point',
    });

    let position = graphic.toJSON().position;

    let res = {
      lng: position[0],
      lat: position[1],
      alt: position[0],
    };

    graphicLayer.removeGraphic(graphic);

    return res;
  };

  // 添加Entity
  const handlerAddEntity = (data) => {
    let graphicOptions = {
      id: data.id,
      position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
      style: {
        image: data.image.generalIcon,
        clampToGround: true,
        scale: 0.5,
        label: {
          text: data.attribute.label,
          font_size: 14,
          color: '#ffffff',
          pixelOffsetY: 10,
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 500000,
          distanceDisplayCondition_near: 0,
        },
      },
      popup: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
          <div class="marsTiltPanel-wrap">
              <div class="area">
                  <div class="arrow-lt"></div>
                  <div class="b-t"></div>
                  <div class="b-r"></div>
                  <div class="b-b"></div>
                  <div class="b-l"></div>
                  <div class="arrow-rb"></div>
                  <div class="label-wrap">
                      <div class="title">火点信息</div>
                      <div class="label-content">
                          <div class="data-li">
                              <div class="data-label">火点地址：${data.attribute.address}</div>
                          </div>
                          <div class="data-li">
                              <div class="data-label">上报时间：</div>
                              <div class="data-value"><span id="lablYeWei"  class="label-num">2025-2-11 12:00:00</span><span class="label-unit"></span>
                              </div>
                          </div>
                          <div class="data-li">
                              <div class="data-value">
                                  <span id="lablCSFM3" onclick="aroundYuAn([${data.position.lng},${data.position.lat}])"  class="label-tag data-value-status-2" >防灭火资源</span>
                                  <span id="lablCSFM2" onclick="delFirePoint(${data.id})"  class="label-tag data-value-status-3" title="删除火点">删除火点</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
          </div>
          <div class="arrow" ></div>
      </div>`,
      popupOptions: {
        offsetY: -30,
        template: '{content}',
        horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
        verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
      },
    };

    let graphic = graphicLayer.getGraphicById(data.id);

    if (graphic) {
      graphic.setStyleOptions(graphicOptions);
    } else {
      graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
      graphicLayer.addGraphic(graphic);
    }
  };

  const handlerHiddenEntity = (data) => {
    let graphic = graphicLayer.getGraphicById(data.id);
    if (graphic) {
      graphic.show = false;
    }
  };

  const handlerRemoveEntity = (data) => {
    let graphic = graphicLayer.getGraphicById(data.id);
    if (graphic) {
      graphicLayer.removeGraphic(graphic);
    }
  };

  const handlerFlyToEntity = (data) => {
    let graphic = graphicLayer.getGraphicById(data.id);

    if (graphic) {
      if (data.image.activeIcon) {
        grasphic.setStyle({
          image: data.image.activeIcon,
        });
      }

      window.globalMap.flyToGraphic(graphic);
    }
  };

  // 清空所有适量图标
  const handlerClearEntityLayer = () => {
    graphicLayer.clear();
  };

  // 隐藏所有矢量图标
  const handlerHiddenEntityLayer = () => {
    graphicLayer.show = false;
  };

  // yi
</script>
<style lang="less" scoped></style>
