<template>
  <div class="scene-mgr-page ops-console-page">
    <el-tabs v-model="activeTab" class="scene-tabs admin-tabs admin-tabs--ops" @tab-change="onTabChange">
      <el-tab-pane label="站点" name="site">
        <ReflectionManagerPanel
          ref="sitePanelRef"
          kind="site"
          kind-label="站点"
          title="站点管理"
          empty-text="当前没有站点；点击右上角「新建站点」按 x/y 坐标添加。"
          enable-project-save
        />
      </el-tab-pane>
      <el-tab-pane label="路径" name="track">
        <ReflectionManagerPanel
          ref="trackPanelRef"
          kind="track"
          kind-label="路径"
          title="路径管理"
          empty-text="当前没有路径；点击右上角「新建路径」选起止站点添加。"
          enable-project-save
        />
      </el-tab-pane>
      <el-tab-pane label="装饰物" name="special">
        <ReflectionManagerPanel
          ref="specialPanelRef"
          kind="special"
          kind-label="装饰物"
          title="装饰物管理"
          empty-text="当前没有装饰物；新建图片/文本/模型可用底部按钮，或先在地图编辑里上传资产。"
          enable-project-save
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
/**
 * 场景管理：3 个 ReflectionManagerPanel 分别承载 site/track/special。
 * Style A：外层 underline tabs + 紧凑运维控制台壳。
 */

import { ref } from 'vue'
import ReflectionManagerPanel from '@/components/reflection/ReflectionManagerPanel.vue'

const activeTab = ref<'site' | 'track' | 'special'>('site')

const sitePanelRef = ref<InstanceType<typeof ReflectionManagerPanel> | null>(null)
const trackPanelRef = ref<InstanceType<typeof ReflectionManagerPanel> | null>(null)
const specialPanelRef = ref<InstanceType<typeof ReflectionManagerPanel> | null>(null)

function onTabChange(name: string | number) {
  const target =
    name === 'site' ? sitePanelRef.value :
    name === 'track' ? trackPanelRef.value :
    name === 'special' ? specialPanelRef.value : null
  target?.refresh?.()
}
</script>

<style scoped>
.scene-mgr-page {
  height: calc(100vh - 56px);
  padding: 10px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.scene-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
</style>
