<!--
  组件名称：PerformanceIndex.vue
  组件描述：性能测试模块主页 - 任务管理 / 执行监控 / 报告查看

  @author czj
  @date 2026-08-12
-->

<template>
  <div class="performance-page">
    <div class="page-header">
      <h2>性能测试</h2>
    </div>

    <el-tabs v-model="activeTab" type="border-card" @tab-change="onTabChange">
      <!-- ==================== Tab 1: 任务管理 ==================== -->
      <el-tab-pane label="任务管理" name="tasks">
        <TaskList ref="taskListRef" @view-monitor="viewMonitor" @view-report="viewReport" />
      </el-tab-pane>

      <!-- ==================== Tab 2: 执行监控 ==================== -->
      <el-tab-pane label="执行监控" name="monitor">
        <MonitorPanel ref="monitorPanelRef" :task-id="monitorTaskId" />
      </el-tab-pane>

      <!-- ==================== Tab 3: 报告查看 ==================== -->
      <el-tab-pane label="报告查看" name="report">
        <ReportPanel ref="reportPanelRef" :task-id="reportTaskId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
/**
 * 性能测试模块主页
 *
 * 三个子标签页：
 * 1. 任务管理 — CRUD 列表
 * 2. 执行监控 — 实时 TPS/响应时间图表
 * 3. 报告查看 — 执行指标汇总与快照详情
 */

import { ref } from 'vue'
import TaskList from './TaskList.vue'
import MonitorPanel from './MonitorPanel.vue'
import ReportPanel from './ReportPanel.vue'

const activeTab = ref('tasks')
const monitorTaskId = ref('')
const reportTaskId = ref('')
const taskListRef = ref()
const monitorPanelRef = ref()
const reportPanelRef = ref()

/** 切换到执行监控标签 */
function viewMonitor(taskId: string) {
  monitorTaskId.value = taskId
  activeTab.value = 'monitor'
}

/** 切换到报告查看标签 */
function viewReport(taskId: string) {
  reportTaskId.value = taskId
  activeTab.value = 'report'
}

/** 标签切换回调 */
function onTabChange(tab: string) {
  // 切换到监控标签时，如果已有任务 ID 则自动刷新
  if (tab === 'monitor' && monitorTaskId.value && monitorPanelRef.value) {
    monitorPanelRef.value.refresh?.()
  }
  // 切换到报告标签时，如果已有任务 ID 则自动加载报告
  if (tab === 'report' && reportTaskId.value && reportPanelRef.value) {
    reportPanelRef.value.loadReport?.()
  }
}
</script>

<style scoped>
.performance-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}
</style>