<script setup lang="ts">
import type { HCesiumManagerSatelliteState, HCesiumManagerStationState } from './useHCesiumManager.types';

import { useHCesiumManager } from './useHCesiumManager';
import { useHCesiumManagerSatellite } from './useHCesiumManager.卫星';
import { useHCesiumManagerStation } from './useHCesiumManager.站点';

import 'cesium/Build/Cesium/Widgets/widgets.css';

const props = defineProps<{
  satelliteState: HCesiumManagerSatelliteState;
  stationState: HCesiumManagerStationState;
}>();

// 1. 管理 Cesium Viewer 实例生命周期
const { hCesiumViewerManager } = useHCesiumManager('cesium-container'); // 获取新的 Manager 实例

// 2. 同步地面站实体
useHCesiumManagerStation(
  () => hCesiumViewerManager.value,
  () => props.stationState,
);

// 3. 同步卫星实体
useHCesiumManagerSatellite(
  () => hCesiumViewerManager.value,
  () => props.satelliteState,
);
</script>

<template>
  <div id="cesium-container" class="relative inset-0 isolate h-full w-full">
    <slot></slot>
  </div>
</template>

<style scoped>
#cesium-container {
  min-height: 100px;
  background-color: #000;
}
</style>
