<template>
  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
    <div class="mapInfo">
      <span> {{ props.nowPreviewRecord.lat }}°N</span>
      <span> {{ props.nowPreviewRecord.lng }}°E</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineEmits } from 'vue';

  import * as mars3d from 'mars3d';
  import * as Cesium from 'mars3d-cesium';

  const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
  const emits = defineEmits(['chooseNowPreviewRecord', 'reloadTable', 'mapOnLoad']);

  let map: mars3d.Map; // 地图对象
  let graphicData: any = [];
  let graphicLayers = new mars3d.layer.GraphicLayer();

  const vChartRef: any = ref<HTMLElement>();

  onMounted(() => {
    initMap();
    addImage();
  });

  const initMap = () => {
    map = new mars3d.Map(vChartRef.value, {
      scene: {
        center: {
          lat: parseFloat(props.nowPreviewRecord.lat),
          lng: parseFloat(props.nowPreviewRecord.lng),
          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: true,
        baseLayerPicker: false,
        sceneModePicker: false,
        vrButton: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        infoBox: false,
        geocoder: false,
        selectionIndicator: false,
        showRenderLoopErrors: false,
        contextmenu: {
          hasDefault: false,
        },
        mouseDownView: false,
        zoom: false,
        compass: false,
        distanceLegend: false,
      },
      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-770c35e7-9054-4259-b5ee-c15f108becd0',
              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-3b881368-574b-48a5-88b2-8b3c2c48fd62',
              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: [],
    });
    emits('mapOnLoad', map);
  };

  const addImage = () => {
    // 删除旧数据
    graphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    // 图层
    map.addLayer(graphicLayers);
    // 图层数据
    graphicData = [];
    props.previewRecordList.forEach((item) => {
      let graphic = new mars3d.graphic.BillboardEntity({
        id: item.id,
        position: [parseFloat(item.lng), parseFloat(item.lat)],
        style: {
          // image: '@/assets/images/point.png',
          image: '../point.png',
          clampToGround: true,
          scale: 1,
          label: {
            text: item.name,
            font_size: 12,
            color: '#ffffff',
            pixelOffsetY: -30,
            pixelOffsetX: 0,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 6000,
            distanceDisplayCondition_near: 0,
          },
        },
        popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                    <div style="postion: relative; padding: 60px; max-width: 500px; overflow: hidden;">

                    </div>
                    <div style="position: absolute; bottom: 0; left: 0; width: 85px; height: 2px; transform: rotate(-45deg) translate(15px, -25px); background-color: #15babc;" ></div>
                </div>`,
        popupOptions: {
          offsetY: 0,
          offsetX: 0,
          template: '{content}',
          horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
          verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
        },
        pointerEvents: true,
      });
      // 将新图形添加到图层中
      graphicLayers.addGraphic(graphic);
      graphicData.push(graphic);
    });
  };
</script>
<style lang="less" scoped>
  .mars3d-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .mapInfo {
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0px;
    left: 0px;
    background: #3d3f3aaa;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;

    span {
      height: 100%;
      width: 30%;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      font-size: 15px;
      margin-left: 10px;
    }
  }
</style>
