<template>
  <div class="map-viewer">
    <!-- Cesium 地图容器 -->
    <MapViewport />

    <!-- 地图控制工具 - 使用 Teleport 传送到更高层级 -->
    <!-- 延迟渲染确保目标元素已存在 -->
    <Teleport to="#sa-controls" v-if="isMounted">
      <MapControls
        :active-tool-key="activeToolKey"
        @tool-change="handleToolChange"
        @device-watch="handleDeviceWatch"
      />
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { MapViewport } from '@/map'
import MapControls from './MapControls.vue'

// 定义props
const props = defineProps({
  // 当前激活的工具键
  activeToolKey: {
    type: String,
    default: null
  }
})

/**
 * 向外抛出的事件
 * @event tool-change - 地图工具变化事件，包含 { tool: string, active: boolean }
 * @event device-watch - 卫星设备观看状态变化事件，包含 boolean
 */
const emit = defineEmits(['tool-change', 'device-watch'])

// 延迟标志，确保 Teleport 目标元素已存在
const isMounted = ref(false)

/**
 * 处理地图工具变化
 * 将 MapControls 的工具变化事件向上传递给父组件
 *
 * @param {Object} payload - 工具变化事件载荷
 * @param {string} payload.tool - 工具标识（如 'modelCompare', 'measure' 等）
 * @param {boolean} payload.active - 工具是否激活
 */
const handleToolChange = (payload) => {
  emit('tool-change', payload)
}

/**
 * 处理卫星设备观看状态变化
 * 将 MapControls 的设备观看事件向上传递给父组件
 *
 * @param {boolean} isWatching - 是否正在观看卫星设备
 */
const handleDeviceWatch = (isWatching) => {
  emit('device-watch', isWatching)
}

onMounted(() => {
  // 使用 nextTick 确保 DOM 完全渲染
  setTimeout(() => {
    isMounted.value = true
  }, 0)
})
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.map-viewer {
  position: relative;
  width: 100%;
  height: 100%;

  // MapViewport 会自动填满父容器
  // 地图相关的样式由 MapViewport 组件内部处理
}
</style>
