<template>
  <div class="car-page">
    <el-tabs v-model="tab" type="border-card" class="car-tabs admin-tabs" @tab-change="onTabChange">
      <el-tab-pane label="车辆列表" name="list">
        <ReflectionManagerPanel
          v-if="tab === 'list'"
          kind="car"
          kind-label="车辆"
          title="车辆管理（Car / AbstractCar，含模拟车、插件车型 reflectionApi 实例化）"
          empty-text="当前没有车辆；点击右上角「新建车辆」从已加载的 CarType 中选一个实例化。"
        />
      </el-tab-pane>
      <el-tab-pane label="车型样式 / 报警颜色" name="style">
        <CarStyleEditor v-if="tab === 'style'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ReflectionManagerPanel from '@/components/reflection/ReflectionManagerPanel.vue'
import CarStyleEditor from './CarStyleEditor.vue'

const tab = ref<'list' | 'style'>('list')

function onTabChange(name: string | number) {
  tab.value = name as typeof tab.value
  sessionStorage.setItem('admin.cars.tab', tab.value)
}

onMounted(() => {
  const cached = sessionStorage.getItem('admin.cars.tab')
  if (cached === 'list' || cached === 'style') tab.value = cached
})
</script>

<style scoped>
.car-page {
  height: calc(100vh - 56px);
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.car-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.car-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
  padding: 0;
}
.car-tabs :deep(.el-tab-pane) {
  height: 100%;
  overflow: hidden;
}
</style>
