<template>
  <div class="model3D">
    <div id="mapContainer" class="map_container"></div>
    <div class="info">
      <div class="right4">123</div>
      <div class="right3"> ASL: {{ asl }}m</div>
      <div class="right2"> HAE: {{ hae }}m</div>
      <div class="right1">
        <HeatMapOutlined style="margin-right: 15px; font-size: 20px" />
        WGS 84
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import * as Cesium from 'cesium';

  // 设置资源路径
  window.CESIUM_BASE_URL = '/node_modules/cesium/Build/Cesium/';
  const props = defineProps(['nowPreviewRecord']);

  // 保存原始模型矩阵
  let originalModelMatrix: any = null;
  // 声明Cesium Viewer实例
  let viewer,
    tileset: Cesium.Viewer | null = null;
  const asl = ref(0);
  const hae = ref(0);

  const initMap = async () => {
    const container = document.getElementById('mapContainer');
    if (!container) {
      console.error('地图容器未找到');
      return;
    }
    viewer = new Cesium.Viewer(container, {
      // 基础配置
      animation: false, // 动画小部件
      baseLayerPicker: false, // 底图选择器
      fullscreenButton: false, // 全屏按钮
      vrButton: false, // VR按钮
      geocoder: false, // 地理编码搜索框
      homeButton: false, // 主页按钮
      infoBox: false, // 信息框 - 禁用点击弹窗
      sceneModePicker: false, // 场景模式选择器
      selectionIndicator: false, // 选择指示器
      timeline: false, // 时间轴
      navigationHelpButton: false, // 导航帮助按钮
      navigationInstructionsInitiallyVisible: false, // 导航说明初始可见性
      scene3DOnly: false, // 仅3D场景
    });
    // 隐藏logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';
    viewer.scene.globe.enableLighting = true;
    // 取消天空盒显示
    // viewer.scene.skyBox.show = false;
    // 禁用大气层和太阳
    viewer.scene.skyAtmosphere.show = false;
    viewer.scene.sun.show = false;
    viewer.scene.moon.show = false;
    // 设置背景为黑色
    viewer.scene.backgroundColor = Cesium.Color.BLACK;
    //前提先把场景上的图层全部移除或者隐藏
    // viewer.scene.globe.baseColor = Cesium.Color.BLACK; //修改地图蓝色背景
    viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.1, 0.2, 1.0); //修改地图为暗蓝色背景
    // 设置抗锯齿
    viewer.scene.postProcessStages.fxaa.enabled = true;
    // 清除默认底图
    viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
    // 设置默认视图位置 - 默认显示全球视图
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 1000.0), // 中国中部上空
      orientation: {
        heading: 0.0,
        pitch: -Cesium.Math.PI_OVER_TWO,
        roll: 0.0,
      },
    });
    // 启用地形深度测试，确保地形正确渲染
    // viewer.scene.globe.depthTestAgainstTerrain = true;
    // // 清除默认地形
    const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(3956);
    viewer.terrainProvider = terrainProvider;
    // 开启帧率
    viewer.scene.debugShowFramesPerSecond = false;
    // 添加经纬网格图层
    viewer.imageryLayers.addImageryProvider(
      new Cesium.GridImageryProvider({
        color: Cesium.Color.WHITE,
        tileWidth: 1024,
        tileHeight: 1024,
      }),
    );

    viewer.scene.canvas.addEventListener('mousemove', function (event) {
      const position = {
        x: event.clientX,
        y: event.clientY,
      };
      // 使用 pickPosition 将屏幕坐标转换为世界坐标
      const cartesian = viewer.scene.pickPosition(position);
      if (Cesium.defined(cartesian)) {
        // 转换为地理坐标系(经纬度)
        const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
        // 计算相对于椭球面的高度(HAE)
        hae.value = Math.round(cartographic.height * 10) / 10;
        asl.value = hae.value + 3.5;
      }
    });

    try {
      const token: any =
        'MTc0NzAzNTY0MXxqTllDaTdBbWZ3V2xfeDVpdG9zeXBkMHhTdzFwTW52NVRVN1d0SlUzc0NtNEtoWjhvWHZoemZHMTdMSjNzV21oR2N2eG1DWTB0cWRNT0pHalVwZU44dDR2THQ0ZUoxNmdUNTYzanJHY0xDc1pHU21VaTRHaVRqSmRfTXRNWWpoUFZhSWlmM1ZxSF9mbmxpS0hnX01oM1AwNURXSW42bEF4ejhJakJHY0JrMVU3SW9DeUJjdjVPRjFSM2RXVWJxUGhxSG1zdmdzNGJkRUlqazg5RHR2ZU1ReUJoR2s1QUlza1ZsOHU3X09uZ0JXZ0JlRllGcGhYTm5GYVJHQ2xsSHFkUlNtT0ZIS0o5WVhUNXd4a2lRU2l3bEFBZy1lN2xQV1B6NDREVEw4VXUzbGhyTURZemhwdzBTWkx4VE4teUticnZ3Z1I2NDNTa2RPOXdJN2otTkl1d3Z6NW1WZUhBV2EtTEtkVTlNNUgwZlo2VWhmVHhpTTM5ZHhuSUpVcVdrZ25EbFJwX3hObVJDdXNjZV9YblZTMlIzQmJqVGVxeXBLTTZ0VjNiLUxSZTZlTDJwRGY3c2tzWkhDNnFYbjY4alF6ZWhWTGl2NVcxQ2puMmdZZnNLaWRpeEFFM1Bwc29fSHpnSG1JZlZJN1lpNHpySUkxQzJzQlpJblBxZUl1SWo1QnNYdFQzZz09fF0gZYXPxsQ97VL9k-DRWUeNh3Prfq8ceE2jnmaNJjuq';
      const resource = new Cesium.Resource({
        url: '/public/Project1 2/B3DM/Model_0/tileset.json',
        // url: 'https://file-storage.djicdn.com/model/19ba187f-7675-49de-b576-b00ffffba78d/dafdb629-18bf-4eb5-b33f-55fa27f1483d/dd091ab4-d8c9-4e14-9c05-bce61e8a0338/%E5%A4%A7%E7%96%86%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E_%E4%B8%89%E7%BB%B4%E6%A8%A1%E5%9E%8B%20%281%29/Project1%202/B3DM/ktx2_b3dms/BlockA/tileset-with-auth-key.json?auth_key=1746638980-0-0-4a3cf9893bb2e579e00633c51677db98&response-content-disposition=attachment&filename=%22tileset.json%22&filename*=utf-8%27%27tileset.json',
        // headers: {
        //   'x-auth-token': token,
        // },
      });
      const tileset = await Cesium.Cesium3DTileset.fromUrl(resource);
      console.log(tileset);
      // 设置3DTiles的样式，确保每个要素都有一个唯一的ID
      tileset.style = new Cesium.Cesium3DTileStyle({
        // 使用默认样式，但确保每个要素都可以被单独选择
        color: "color('white')",
      });
      // 保存原始模型矩阵，用于重置
      originalModelMatrix = Cesium.Matrix4.clone(tileset.modelMatrix);
      // 设置模型贴地
      // 启用贴地属性
      // tileset.clampToGround = true;
      viewer.scene.primitives.add(tileset);
      viewer.zoomTo(tileset);
    } catch (error) {
      console.error('加载3D Tiles数据集失败:', error);
    }
  };

  onMounted(() => {
    initMap();
  });
</script>

<style lang="less" scoped>
  .model3D {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .map_container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .info {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    position: absolute;
    width: 100%;
    height: 4%;
    bottom: 0px;
    left: 0px;
    display: flex;

    .left {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 150px;
      color: #ffffff;

      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right4 {
      position: absolute;
      top: 0px;
      right: 360px;
      width: 120px;
      color: #ffffff;

      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .right3 {
      position: absolute;
      top: 0px;
      right: 240px;
      width: 120px;
      color: #ffffff;

      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .right2 {
      position: absolute;
      top: 0px;
      right: 120px;
      width: 120px;
      color: #ffffff;

      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .right1 {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 120px;
      color: #ffffff;

      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  ::v-deep .cesium-widget-credits {
    display: none !important;
  }
</style>
