<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const tabs = [
  { label: '数据文件', path: '/data-management' },
  { label: '数据包', path: '/package-management' },
  { label: '模型训练', path: '/model-training' },
  { label: '模型库', path: '/model-list' },
  { label: '模型评估', path: '/model-evaluation' },
  { label: '试验管理', path: '/realtime-monitor' },
  { label: '实时监控', path: '/live-monitor' },
]

const activeTab = computed(() => {
  const matched = tabs.find((item) => route.path.startsWith(item.path))
  return matched?.path ?? '/data-management'
})

const handleTabChange = (path) => {
  router.push(path)
}
</script>

<template>
  <div class="app-shell">
    <header class="top-header">
      <div class="project-title">热试验温度控制系统</div>
      <div class="header-divider"></div>
      <el-tabs class="top-tabs" :model-value="activeTab" @tab-change="handleTabChange">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.path"
          :label="tab.label"
          :name="tab.path"
        />
      </el-tabs>
    </header>

    <main class="app-main">
      <router-view />
    </main>
  </div>
</template>

<style lang="scss" scoped>
.app-shell {
  min-height: 100vh;
  background: var(--bg-page);
}

.top-header {
  display: flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 20px 0 4px;
  flex-shrink: 0;
}

.project-title {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.top-tabs {
  flex: 1;
  min-width: 0;

  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }

  :deep(.el-tabs__nav-wrap) {
    height: 52px;
  }

  :deep(.el-tabs__item) {
    height: 52px;
    line-height: 52px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.15s;

    &:hover {
      color: var(--primary);
      background: var(--primary-light);
    }

    &.is-active {
      color: var(--primary);
      font-weight: 600;
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: var(--primary);
    height: 2px;
    border-radius: 0;
    bottom: 0;
  }
}

.app-main {
  height: calc(100vh - 52px);
}

@media (max-width: 980px) {
  .top-header {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 10px 16px;
  }

  .header-divider {
    display: none;
  }

  .top-tabs {
    width: 100%;
  }

  .app-main {
    height: auto;
    min-height: calc(100vh - 100px);
  }
}
</style>
