<script setup lang="ts">
import 'orbpro/style/widgets.css';
import {
  Viewer,
  GoogleMaps,
  Math as CesiumMath,
  Cartographic,
  Cartesian3,
  viewerReferenceFrameMixin,
  TileMapServiceImageryProvider,
  ImageryLayer,
  // VERSION,
  EmbeddedTileServiceImageryProvider,
  DynamicTimeline,
  SpaceEntity,
} from 'orbpro';

import { demoOrbitGeneration } from './fns';

let viewer: Viewer;

onMounted(() => {
  viewer = new Viewer('cesiumContainer', {
    // globe: false, // 地球
    baseLayerPicker: true,
    homeButton: true, // Home按钮
    fullscreenButton: !true, // 全屏按钮
    geocoder: true, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false，则不会创建Geocoder小部件。
    infoBox: true, // InfoBox小部件。
    navigationHelpButton: !true, // 是否显示导航帮助按钮
    projectionPicker: !true, // 投影选择器
    sceneModePicker: true, // 是否显示场景模式选择器(2D/3D切换)
    animation: true, // 是否创建动画小部件
    animationContainer: !true,
    timeline: !true, // If set to false, the Timeline widget will not be created.
    timelineContainer: true,
    selectionIndicator: true,
    requestRenderMode: !true, // 如果为真，渲染帧将仅在场景内部发生变化时需要时发生。启用此功能可以减少应用程序的CPU/GPU使用率，并在移动设备上节省更多电量，但在此模式下需要使用{@link Scene#requestRender}显式渲染新帧。在API的其他部分对场景进行更改后，在许多情况下都需要这样做。请参阅{@link https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/|使用显式渲染提高性能}。
    showRenderLoopErrors: true, // 如果为真，当发生渲染循环错误时，此小部件将自动向用户显示包含错误的HTML面板。
    bottomContainer: document.createElement('p'), // The DOM element or ID that will contain the bottomContainer.  If not specified, the bottomContainer is added to the widget itself.
    orderIndependentTranslucency: false, // 顺序无关透明度
    shadows: true, // Determines if shadows are cast by light sources.
  });
  viewer.scene.debugShowFramesPerSecond = true;

  new DynamicTimeline(viewer.timeline.container, viewer);

  // @ts-expect-error Open console to debug app
  globalThis.viewer = viewer;

  /* if ($__DEV__)  */ demoOrbitGeneration(viewer);
});
</script>

<template>
  <div class="h-full flex flex-col gap-2">
    <div class="shrink-0">
      <Button @click="demoOrbitGeneration(viewer)">轨道生成</Button>
    </div>
    <div id="cesiumContainer" class="flex-1" />
  </div>
  <!--
  {#if $selectedEntity}
    <SelectionWidget {viewer} />
  {/if}
  -->
</template>

<style>
#cesiumContainer {
  width: 100%;
}
</style>
