<template>
  <div class="plant-gs-warp">
    <div ref="viewwarp" class="plant-gs-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg1.png') + ')' }">
      <vc-config-provider :cesium-path="vcConfig.cesiumPath" :access-token="vcConfig.accessToken">
        <vc-viewer ref="viewerRef" @ready="onViewerReady">
          <vc-layer-imagery :minimum-level="12" :maximum-level="18" :contrast="1.8" :saturation="1" :alpha="1">
            <vc-imagery-provider-amap :key="'c843a50db7157faf295c6fa37c48719f'"></vc-imagery-provider-amap>
          </vc-layer-imagery>

          <!-- 蒙版层 -->
          <vc-entity>
            <vc-graphics-polygon
              ref="polygon4"
              :hierarchy="hierarchy4"
              :material="[110, 161, 153, 150]"
              :height="0"
              :outline="false"
            ></vc-graphics-polygon>
          </vc-entity>
        </vc-viewer>
      </vc-config-provider>
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, computed, nextTick, getCurrentInstance } from 'vue';
import {
  VcViewer,
  VcConfigProvider,
  VcImageryProviderAmap,
  VcLayerImagery,
  VcGraphicsPlane,
  VcEntity,
  VcGraphicsPolygon,
  VcGraphicsRectangle,
} from 'vue-cesium';
import 'vue-cesium/dist/index.css';

const vcConfig = reactive({
  cesiumPath: 'https://cdn.bootcdn.net/ajax/libs/cesium/1.80.0/Cesium.js',
  accessToken:
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNjJjZTUxYi1lOTQ3LTQ3YjctOGI3ZS02ZGUzY2E4YWFkNDkiLCJpZCI6Mjg4MjAxLCJpYXQiOjE3NDMwNTY0MzN9.rjHQiqf7Y8bccaqsapqveULVAUH6M1QkeFp-AKG-frA',
});
const viewerRef = ref(null);
const viewwarp = ref(null);
let polygon4 = ref(null);

onMounted(() => {
  console.info('onMounted', viewerRef);
  Promise.all([polygon4.value.creatingPromise]).then((instances) => {
    console.info('instances');
    // instances[0].viewer.zoomTo(instances[0].viewer.entities);
  });
});

const hierarchy4 = reactive({
  positions: [
    [99.406653, 23.534142], // 左下角
    [99.706653, 23.534142], // 右下角
    [99.706653, 23.834142], // 右上角
    [99.406653, 23.834142], // 左上角
  ],
  holes: [
    {
      positions: [
        [99.506653, 23.634142], // 耿马镇边界点 1
        [99.606653, 23.634142], // 耿马镇边界点 2
        [99.606653, 23.734142], // 耿马镇边界点 3
        [99.506653, 23.734142], // 耿马镇边界点 4
      ],
    },
  ],
});

const onViewerReady = (readyObj) => {
  console.info('readyObj', readyObj.Cesium); // Cesium namespace object
  console.log(readyObj.viewer); // instanceof Cesium.Viewer

  const { Cesium, viewer } = readyObj;

  // 将耿马县和耿马镇的所有边界点合并
  const allPositions = [...hierarchy4.positions, ...hierarchy4.holes[0].positions].map((coord) => Cesium.Cartesian3.fromDegrees(coord[0], coord[1]));

  // 计算所有边界点的包围球
  const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);

  // 设置相机视角
  viewer.camera.setView({
    destination: boundingSphere.center, // 目标中心点
    orientation: {
      // heading: Cesium.Math.toRadians(-10), // 方向角
      // pitch: Cesium.Math.toRadians(-90), // 俯仰角
      // roll: 0, // 滚动角
      heading: Cesium.Math.toRadians(6), //
      pitch: Cesium.Math.toRadians(-25), //
      roll: Cesium.Math.toRadians(6), //
    },
  });

  // 动态调整相机高度，确保整个区域可见
  const radius = boundingSphere.radius; // 包围球半径
  const cameraHeight = radius * 1; // 根据经验公式调整高度
  viewer.camera.moveBackward(cameraHeight); // 向后移动相机

  // viewer.camera.changed.addEventListener(() => {
  //   console.log('Camera changed:', viewer.camera);
  // });
};
</script>
<style lang="scss" scoped>
.plant-gs-warp {
  height: 100%;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
  .plant-gs-content {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    overflow: hidden;
    ::v-deep() {
      .vc-viewer {
        height: calc(100% - 30px) !important;
        width: calc(100% - 20px) !important;
        margin: 20px 10px 10px 10px !important;
      }
      canvas {
        border-radius: 10px !important;
      }
      .cesium-viewer-bottom {
        display: none !important;
      }
    }
  }
}
</style>
