<template>
  <div class="config-hub-page">
    <el-tabs v-model="activeTab" class="hub-tabs">
      <el-tab-pane name="routing" label="路径规划">
        <div class="config-pane"><RoutingPolicyView /></div>
      </el-tab-pane>
      <el-tab-pane name="task" label="任务分配" lazy>
        <div class="config-pane"><TaskAllocationView /></div>
      </el-tab-pane>
      <el-tab-pane name="traffic" label="交通管制" lazy>
        <div class="config-pane"><TrafficRuleView /></div>
      </el-tab-pane>
      <el-tab-pane name="charge" label="充电策略" lazy>
        <div class="config-pane"><ChargePolicyView /></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import RoutingPolicyView from '@/views/admin/config/RoutingPolicyView.vue'
import TaskAllocationView from '@/views/admin/config/TaskAllocationView.vue'
import TrafficRuleView from '@/views/admin/config/TrafficRuleView.vue'
import ChargePolicyView from '@/views/admin/config/ChargePolicyView.vue'

// 聚合页：调度运行策略统一入口。Tab 与 URL ?tab= 同步，旧的独立配置路由 redirect 到此页对应 tab。
const route = useRoute()
const router = useRouter()
const TAB_NAMES = ['routing', 'task', 'traffic', 'charge'] 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) : 'routing'
}
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>
