<!--
  组件名称：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>

          <!-- 自动化测试（父菜单，UI 自动化） -->
          <el-sub-menu index="/auto">
            <template #title>
              <el-icon><VideoPlay /></el-icon>
              <span>自动化测试</span>
            </template>

            <!-- 模块管理（并入自动化测试，第一位） -->
            <el-menu-item index="/modules">
              <el-icon><Folder /></el-icon>
              <span>模块管理</span>
            </el-menu-item>

            <!-- 用例管理 -->
            <el-menu-item index="/cases/ui">
              <el-icon><Document /></el-icon>
              <span>用例管理</span>
            </el-menu-item>

            <!-- 执行中心 -->
            <el-menu-item index="/execution/ui">
              <el-icon><VideoPlay /></el-icon>
              <span>执行中心</span>
            </el-menu-item>

            <!-- 报告中心 -->
            <el-menu-item index="/reports/ui">
              <el-icon><DataLine /></el-icon>
              <span>报告中心</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 安全测试（一级菜单，含用例/执行/报告） -->
          <el-sub-menu index="/security">
            <template #title>
              <el-icon><Lock /></el-icon>
              <span>安全测试</span>
            </template>
            <el-menu-item index="/cases/security">用例管理</el-menu-item>
            <el-menu-item index="/execution/security">执行中心</el-menu-item>
            <el-menu-item index="/reports/security">报告中心</el-menu-item>
          </el-sub-menu>

          <!-- 性能测试（父菜单，含三个子页面） -->
          <el-sub-menu index="/performance">
            <template #title>
              <el-icon><Odometer /></el-icon>
              <span>性能测试</span>
            </template>
            <el-menu-item index="/performance/tasks">任务管理</el-menu-item>
            <el-menu-item index="/performance/monitor">执行监控</el-menu-item>
            <el-menu-item index="/performance/report">报告查看</el-menu-item>
            <el-menu-item index="/performance/presets">接口预设</el-menu-item>
          </el-sub-menu>

          <!-- 自动化部署测试（父菜单） -->
          <el-sub-menu index="/deploy">
            <template #title>
              <el-icon><Promotion /></el-icon>
              <span>自动化部署测试</span>
            </template>
            <el-menu-item index="/deploy/servers">服务器管理</el-menu-item>
            <el-menu-item index="/deploy/scripts">部署脚本</el-menu-item>
            <el-menu-item index="/deploy/executions">部署执行</el-menu-item>
          </el-sub-menu>

          <!-- 设备模拟（独立一级菜单） -->
          <el-sub-menu index="/device-sim">
            <template #title>
              <el-icon><Iphone /></el-icon>
              <span>设备模拟</span>
            </template>
            <el-menu-item index="/device-sim/settings">环境配置</el-menu-item>
            <el-menu-item index="/device-sim/door">门口屏模拟</el-menu-item>
            <el-menu-item index="/device-sim/paperless">无纸化模拟</el-menu-item>
            <el-menu-item index="/device-sim/central">中控设备模拟</el-menu-item>
            <el-menu-item index="/device-sim/client">集控客户端模拟</el-menu-item>
          </el-sub-menu>

          <!-- 功能测试报告（父菜单，含生成报告和ERP配置两个子页面） -->
          <el-sub-menu index="/reports/functional">
            <template #title>
              <el-icon><DocumentChecked /></el-icon>
              <span>功能测试报告</span>
            </template>
            <el-menu-item index="/reports/functional/generate">生成报告</el-menu-item>
            <el-menu-item index="/reports/functional/template-config">模板配置</el-menu-item>
            <el-menu-item index="/reports/functional/erp-config">ERP 配置</el-menu-item>
          </el-sub-menu>

          <!-- 文档管理（父菜单，含文档校正优化和文档翻译两个子页面） -->
          <el-sub-menu index="/document">
            <template #title>
              <el-icon><EditPen /></el-icon>
              <span>文档管理</span>
            </template>
            <el-menu-item index="/document/optimize">文档校正优化</el-menu-item>
            <el-menu-item index="/document/translate">文档翻译</el-menu-item>
          </el-sub-menu>

          <!-- 辅助工具（父菜单） -->
          <el-sub-menu index="/tools">
            <template #title>
              <el-icon><Tools /></el-icon>
              <span>辅助工具</span>
            </template>
            <el-menu-item index="/recorder">用例录制</el-menu-item>
          </el-sub-menu>

          <!-- 系统管理（父菜单） -->
          <el-sub-menu index="/system">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/system/settings">系统配置</el-menu-item>
            <el-menu-item index="/system/info">系统信息</el-menu-item>
            <el-menu-item index="/system/logs">操作日志</el-menu-item>
          </el-sub-menu>
        </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,
  VideoPlay,
  DataLine,
  Odometer,
  DocumentChecked,
  Promotion,
  Iphone,
  Tools,
  Lock,
  Setting,
  EditPen
} from '@element-plus/icons-vue'

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

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

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

/** 分类标签映射：用例管理/执行中心 */
const CASE_TYPE_LABELS: Record<string, string> = {
  ui: 'UI自动化',
  security: '安全自动化测试',
}

/** 设备模拟子页面标签映射 */
const DEVICE_SIM_LABELS: Record<string, string> = {
  settings: '环境配置',
  door: '门口屏模拟',
  paperless: '无纸化模拟',
  central: '中控设备模拟',
  client: '集控客户端模拟',
}

/** 分类标签映射：报告中心 */
const REPORT_TYPE_LABELS: Record<string, string> = {
  ui: 'UI自动化测试',
  security: '安全测试',
  functional: '功能测试报告',
}

/** 系统管理子页面标签映射 */
const SYSTEM_LABELS: Record<string, string> = {
  settings: '系统配置',
  info: '系统信息',
  logs: '操作日志',
}

/** 部署模块子页面标签映射 */
const DEPLOY_LABELS: Record<string, string> = {
  servers: '服务器管理',
  scripts: '部署脚本',
  executions: '部署执行',
}

/** 性能测试子页面标签映射 */
const PERFORMANCE_LABELS: Record<string, string> = {
  tasks: '任务管理',
  monitor: '执行监控',
  report: '报告查看',
  presets: '接口预设',
}

/** 功能测试报告子页面标签映射 */
const FUNCTIONAL_LABELS: Record<string, string> = {
  generate: '生成报告',
  'template-config': '模板配置',
  'erp-config': 'ERP 配置',
}

/** 文档管理子页面标签映射 */
const DOCUMENT_LABELS: Record<string, string> = {
  optimize: '文档校正优化',
  translate: '文档翻译',
}

/** 当前激活菜单项（无 type 时回退到默认子项以保持高亮） */
const currentRoute = computed(() => {
  const seg = route.path.split('/').filter(Boolean)
  const root = '/' + (seg[0] || '')
  // 无 type 参数时回退到默认子项，保证菜单高亮
  if (seg.length === 1 && ['/cases', '/execution', '/reports', '/system', '/deploy', '/device-sim', '/performance', '/security', '/document'].includes(root)) {
    const defaultType = root === '/system' ? 'settings' : root === '/deploy' ? 'servers' : root === '/device-sim' ? 'settings' : root === '/performance' ? 'tasks' : root === '/security' ? 'security' : root === '/document' ? 'optimize' : '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': '模块管理',
    '/auto': '自动化测试',
    '/cases': '用例管理',
    '/recorder': '用例录制',
    '/execution': '执行中心',
    '/reports': '报告中心',
    '/performance': '性能测试',
    '/security': '安全测试',
    '/deploy': '自动化部署测试',
    '/tools': '辅助工具',
    '/device-sim': '设备模拟',
    '/system': '系统管理',
    '/document': '文档管理',
  }
  const base = baseMap[root] || '测试管理平台'
  const type = seg[1]
  if (!type) return base

  // 功能测试报告子页面：/reports/functional/generate → "功能测试报告 - 生成报告"
  if (root === '/reports' && type === 'functional' && seg[2]) {
    return `功能测试报告 - ${FUNCTIONAL_LABELS[seg[2]] || ''}`
  }

  const typeLabel = (() => {
    if (root === '/reports') return type === 'ui' ? '' : REPORT_TYPE_LABELS[type]
    if (root === '/cases' || root === '/execution') return type === 'ui' ? '' : CASE_TYPE_LABELS[type]
    if (root === '/device-sim') return DEVICE_SIM_LABELS[type]
    if (root === '/system') return SYSTEM_LABELS[type]
    if (root === '/deploy') return DEPLOY_LABELS[type]
    if (root === '/performance') return PERFORMANCE_LABELS[type]
    if (root === '/document') return DOCUMENT_LABELS[type]
    return ''
  })()

  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>
