<template>
  <div class="config-hub-page">
    <el-tabs v-model="activeTab" class="hub-tabs">
      <el-tab-pane name="playback" label="调度回放">
        <div class="config-pane"><PlaybackView /></div>
      </el-tab-pane>
      <el-tab-pane name="ops" label="运营维护" lazy>
        <div class="config-pane"><OpsConfigView /></div>
      </el-tab-pane>
      <el-tab-pane name="logs" label="日志管理" lazy>
        <div class="config-pane"><LogManagementView /></div>
      </el-tab-pane>
      <el-tab-pane name="map-monitor" label="地图监控配置" lazy>
        <div class="config-pane"><MapMonitorConfigView /></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PlaybackView from '@/views/admin/PlaybackView.vue'
import OpsConfigView from '@/views/admin/config/OpsConfigView.vue'
import LogManagementView from '@/views/admin/LogManagementView.vue'
import MapMonitorConfigView from '@/views/admin/config/MapMonitorConfigView.vue'

// 聚合页：运维与回放（调度回放从顶级菜单移入此处）。Tab 与 URL ?tab= 同步。
const route = useRoute()
const router = useRouter()
const TAB_NAMES = ['playback', 'ops', 'logs', 'map-monitor'] as const
type TabName = (typeof TAB_NAMES)[number]
function readTab(): TabName {
  const q = route.query.tab
  return typeof q === 'string' && (TAB_NAMES as readonly string[]).includes(q) ? (q as TabName) : 'playback'
}
const activeTab = ref<TabName>(readTab())
watch(activeTab, (t) => {
  if (route.query.tab !== t) router.replace({ query: { ...route.query, tab: t } })
})
watch(() => route.query.tab, () => {
  const next = readTab()
  if (next !== activeTab.value) activeTab.value = next
})
</script>

<style scoped>
.config-hub-page {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hub-tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
:deep(.el-tabs__content) {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
:deep(.el-tab-pane) { height: 100%; }
.config-pane {
  height: 100%;
  overflow: auto;
}
:deep(.el-tabs__item) {
  color: var(--mg-text-muted, rgba(255, 255, 255, 0.65));
}
:deep(.el-tabs__item.is-active) {
  color: var(--mg-text-light, #fff);
}
:deep(.el-tabs__active-bar) {
  background-color: var(--mg-accent, var(--el-color-primary));
}
:deep(.el-tabs__nav-wrap::after) {
  background-color: rgba(255, 255, 255, 0.08);
}
</style>
