<template>
  <div class="scene-mgr-page">
    <el-tabs v-model="activeTab" type="border-card" class="scene-tabs admin-tabs" @tab-change="onTabChange">
      <el-tab-pane label="站点" name="site">
        <ReflectionManagerPanel
          ref="sitePanelRef"
          kind="site"
          kind-label="站点"
          title="站点管理（Site / UISite，含禁用/启用、必空点等动作）"
          empty-text="当前没有站点；点击右上角「新建站点」按 x/y 坐标添加。"
        />
      </el-tab-pane>
      <el-tab-pane label="路径" name="track">
        <ReflectionManagerPanel
          ref="trackPanelRef"
          kind="track"
          kind-label="路径"
          title="路径管理（Track / UITrack，含方向、冲突、投影、二分等动作）"
          empty-text="当前没有路径；点击右上角「新建路径」选起止站点添加。"
        />
      </el-tab-pane>
      <el-tab-pane label="装饰物" name="special">
        <ReflectionManagerPanel
          ref="specialPanelRef"
          kind="special"
          kind-label="装饰物"
          title="装饰物管理（UI_Image / UI_Text / UI_Model）"
          empty-text="当前没有装饰物；新建图片/文本/模型可用底部按钮，或先在地图编辑里上传资产。"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
/**
 * 场景管理：用 3 个 ReflectionManagerPanel 实例承载 site/track/special 三个 subKind。
 *
 * 这里之所以用三个独立 panel 而不是单一 panel + 顶部切换：
 *   - 每个 subKind 列字段、可创建子类型完全不同（site 要 x/y、track 要 siteA/siteB、
 *     装饰物要 imagePath/modelPath 等），共享一组 ref 会让创建表单状态错乱；
 *   - ReflectionManagerPanel 已经把 list/详情/方法/字段/SSE 全部包好，三份实例几乎零边际成本。
 *
 * SceneManagerView 自己只负责 tab 切换 + 默认走 site tab。
 */

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) {
  // 切到对应 tab 时主动 refresh 一次，确保 SSE 没接的情况下也能拿到最新列表。
  const target =
    name === 'site' ? sitePanelRef.value :
    name === 'track' ? trackPanelRef.value :
    name === 'special' ? specialPanelRef.value : null
  target?.refresh?.()
}
</script>

<style scoped>
/* 会话 N+2：tabs 通用样式提到全局 `.admin-tabs`（见 styles/theme.css），
   这里只保留容器布局，避免 scoped 选择器把全局规则压住。 */
.scene-mgr-page {
  height: calc(100vh - 56px);
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scene-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
