<template>
  <div class="orchestration-page">
    <el-tabs v-model="tab" class="orch-tabs" type="border-card" @tab-change="onTabChange">
      <el-tab-pane label="车辆" name="cars">
        <CarPanelView v-if="tab === 'cars'" />
      </el-tab-pane>
      <el-tab-pane label="进程" name="process">
        <MissionEditorView v-if="tab === 'process'" />
      </el-tab-pane>
      <el-tab-pane label="脚本" name="script">
        <ReflectionKindTable
          v-if="tab === 'script'"
          kind="script"
          empty-text="脚本（继承 CarProgram 的子类型）未发现可暴露条目"
        />
      </el-tab-pane>
      <el-tab-pane label="任务流" name="taskflow">
        <ReflectionKindTable
          v-if="tab === 'taskflow'"
          kind="mission"
          extra-filter="taskflow"
          empty-text="未发现任务流条目"
        />
      </el-tab-pane>
      <el-tab-pane label="触发器" name="trigger">
        <ReflectionKindTable
          v-if="tab === 'trigger'"
          kind="mission"
          extra-filter="trigger"
          empty-text="未发现触发器条目"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CarPanelView from '@/views/admin/CarPanelView.vue'
import MissionEditorView from '@/views/admin/MissionEditorView.vue'
import ReflectionKindTable from '@/components/orchestration/ReflectionKindTable.vue'

const tab = ref<'cars' | 'process' | 'script' | 'taskflow' | 'trigger'>('cars')

function onTabChange(name: string | number) {
  tab.value = name as typeof tab.value
}

onMounted(() => {
  const cached = sessionStorage.getItem('orchestration.tab')
  if (cached) tab.value = cached as typeof tab.value
})
</script>

<style scoped>
.orchestration-page {
  height: calc(100vh - 56px);
  padding: 12px;
}
.orch-tabs {
  height: 100%;
}
.orch-tabs :deep(.el-tabs__content) {
  height: calc(100% - 40px);
  overflow: auto;
}
</style>
