<template>
  <div class="car-page">
    <SetupGuideAlert
      title="必须添加车辆并补齐参数"
      desc="至少添加 1 辆车，并在车辆属性中填写 IP（字段 address）和端口（字段 Port，默认 5000）。配完后返回初始配置查看进度。"
    />
    <el-tabs v-model="tab" class="car-tabs admin-tabs admin-tabs--ops" @tab-change="onTabChange">
      <el-tab-pane label="车辆列表" name="list">
        <ReflectionManagerPanel
          v-if="tab === 'list'"
          kind="car"
          kind-label="车辆"
          title="车辆管理"
          empty-text="当前没有车辆；点击右上角「新建车辆」从已加载的 CarType 中选一个实例化。"
          enable-project-save
        />
      </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'
import SetupGuideAlert from '@/components/setup/SetupGuideAlert.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: 10px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.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>
