<!--
  组件名称：App.vue
  组件描述：应用根组件，包含整体布局和路由出口

  @author czj
  @date 2026-07-09
-->

<template>
  <el-config-provider :locale="zhCn">
    <div class="app-container">
      <!-- 侧边栏 -->
      <el-aside width="220px" class="app-aside">
        <div class="logo">
          <el-icon :size="24"><Monitor /></el-icon>
          <span>测试管理平台</span>
        </div>

        <el-menu
          :default-active="currentRoute"
          class="app-menu"
          router
          unique-opened
        >
          <el-menu-item index="/">
            <el-icon><DataBoard /></el-icon>
            <span>总览</span>
          </el-menu-item>

          <!-- 模块管理（父菜单） -->
          <el-sub-menu index="/modules">
            <template #title>
              <el-icon><Folder /></el-icon>
              <span>模块管理</span>
            </template>
            <el-menu-item index="/modules/standard">标准模块</el-menu-item>
            <el-menu-item index="/modules/custom">项目定制模块</el-menu-item>
          </el-sub-menu>

          <!-- 用例管理（父菜单） -->
          <el-sub-menu index="/cases">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>用例管理</span>
            </template>
            <el-menu-item index="/cases/ui">UI自动化</el-menu-item>
            <el-menu-item index="/cases/api">接口自动化</el-menu-item>
            <el-menu-item index="/cases/security">安全自动化测试</el-menu-item>
            <el-menu-item index="/cases/deploy">自动化部署测试</el-menu-item>
            <el-menu-item index="/cases/performance">性能测试</el-menu-item>
            <el-menu-item index="/cases/functional">功能测试</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/recorder">
            <el-icon><VideoCamera /></el-icon>
            <span>用例录制</span>
          </el-menu-item>

          <!-- 执行中心（父菜单，6 种类型） -->
          <el-sub-menu index="/execution">
            <template #title>
              <el-icon><VideoPlay /></el-icon>
              <span>执行中心</span>
            </template>
            <el-menu-item index="/execution/ui">UI自动化</el-menu-item>
            <el-menu-item index="/execution/api">接口自动化</el-menu-item>
            <el-menu-item index="/execution/security">安全自动化测试</el-menu-item>
            <el-menu-item index="/execution/deploy">自动化部署测试</el-menu-item>
            <el-menu-item index="/execution/performance">性能测试</el-menu-item>
            <el-menu-item index="/execution/functional">功能测试</el-menu-item>
          </el-sub-menu>

          <!-- 报告中心（父菜单，5 种类型，无部署） -->
          <el-sub-menu index="/reports">
            <template #title>
              <el-icon><DataLine /></el-icon>
              <span>报告中心</span>
            </template>
            <el-menu-item index="/reports/ui">UI自动化测试</el-menu-item>
            <el-menu-item index="/reports/api">接口测试</el-menu-item>
            <el-menu-item index="/reports/security">安全测试</el-menu-item>
            <el-menu-item index="/reports/performance">性能测试</el-menu-item>
            <el-menu-item index="/reports/functional">功能测试</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/settings">
            <el-icon><Setting /></el-icon>
            <span>系统配置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-container class="main-container">
        <!-- 顶部栏 -->
        <el-header class="app-header">
          <div class="header-left">
            <span class="page-title">{{ pageTitle }}</span>
          </div>
          <div class="header-right">
            <el-select v-model="currentEnv" placeholder="选择环境" size="small" style="width: 120px">
              <el-option label="测试环境" value="test" />
              <el-option label="开发环境" value="dev" />
              <el-option label="生产环境" value="prod" />
            </el-select>
            <el-avatar :size="32" class="user-avatar">U</el-avatar>
          </div>
        </el-header>

        <!-- 内容区 -->
        <el-main class="app-main">
          <router-view />
        </el-main>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
/**
 * App 根组件
 *
 * 功能：
 * 1. 整体布局（侧边栏 + 顶部栏 + 内容区）
 * 2. 导航菜单
 * 3. 环境切换
 */

import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import {
  Monitor,
  DataBoard,
  Folder,
  Document,
  VideoCamera,
  VideoPlay,
  DataLine,
  Setting
} from '@element-plus/icons-vue'

// ==================== 响应式数据 ====================
/** 当前环境 */
const currentEnv = ref('test')

// 在 setup 顶层调用 useRoute
const route = useRoute()

// ==================== 计算属性 ====================

/** 分类标签映射：用例管理/执行中心 */
const CASE_TYPE_LABELS: Record<string, string> = {
  ui: 'UI自动化',
  api: '接口自动化',
  security: '安全自动化测试',
  deploy: '自动化部署测试',
  performance: '性能测试',
  functional: '功能测试',
}

/** 分类标签映射：报告中心（不含部署） */
const REPORT_TYPE_LABELS: Record<string, string> = {
  ui: 'UI自动化测试',
  api: '接口测试',
  security: '安全测试',
  performance: '性能测试',
  functional: '功能测试',
}

/** 模块类型标签映射 */
const MODULE_TYPE_LABELS: Record<string, string> = {
  standard: '标准模块',
  custom: '项目定制模块',
}

/** 当前激活菜单项（无 type 时回退到默认子项以保持高亮） */
const currentRoute = computed(() => {
  const seg = route.path.split('/').filter(Boolean)
  const root = '/' + (seg[0] || '')
  // 无 type 参数时回退到默认子项，保证菜单高亮
  if (seg.length === 1 && ['/modules', '/cases', '/execution', '/reports'].includes(root)) {
    const defaultType = root === '/modules' ? 'standard' : 'ui'
    return `${root}/${defaultType}`
  }
  return route.path
})

/** 页面标题 */
const pageTitle = computed(() => {
  const seg = route.path.split('/').filter(Boolean)
  const root = '/' + (seg[0] || '')
  const baseMap: Record<string, string> = {
    '/': '测试总览',
    '/modules': '模块管理',
    '/cases': '用例管理',
    '/recorder': '用例录制',
    '/execution': '执行中心',
    '/reports': '报告中心',
    '/settings': '系统配置'
  }
  const base = baseMap[root] || '测试管理平台'
  const type = seg[1]
  if (!type) return base

  let typeLabel = ''
  if (root === '/modules') typeLabel = MODULE_TYPE_LABELS[type]
  else if (root === '/reports') typeLabel = REPORT_TYPE_LABELS[type]
  else if (root === '/cases' || root === '/execution') typeLabel = CASE_TYPE_LABELS[type]

  return typeLabel ? `${base} - ${typeLabel}` : base
})
</script>

<style lang="scss">
/**
 * 应用样式
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.app-container {
  display: flex;
  height: 100vh;
  background: #f5f7fa;
}

.app-aside {
  background: #304156;
  color: #fff;

  .logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    background: #263445;
    color: #fff;
  }

  .app-menu {
    border-right: none;
    background: transparent;

    // 顶级菜单项
    .el-menu-item {
      color: #bfcbd9;

      &:hover,
      &.is-active {
        background: #263445;
        color: #409eff;
      }
    }

    // 父菜单标题（el-sub-menu）
    .el-sub-menu {
      .el-sub-menu__title {
        color: #bfcbd9;

        &:hover {
          background: #263445;
        }

        .el-sub-menu__icon-arrow {
          color: #bfcbd9;
        }
      }

      // 嵌套子菜单容器背景（比侧边栏略深，体现层级）
      .el-menu {
        background: #1f2d3d;
      }

      // 子菜单项
      .el-menu-item {
        color: #bfcbd9;
        background: transparent;

        &:hover,
        &.is-active {
          background: #263445;
          color: #409eff;
        }
      }
    }
  }
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e6ebf5;

  .header-left {
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;

    .user-avatar {
      background: #409eff;
      cursor: pointer;
    }
  }
}

.app-main {
  flex: 1;
  padding: 20px;
  overflow: auto;
  background: #f5f7fa;
}
</style>