<!--
  页面名称：Info.vue
  页面描述：系统信息页面，展示平台运行环境信息
  路径：/system/info

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

<template>
  <div class="system-info-page" v-loading="loading">
    <el-row :gutter="20">
      <!-- 应用信息 -->
      <el-col :span="12">
        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><Monitor /></el-icon>
              <span>应用信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="应用名称">
              {{ info?.app_name || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="后端版本">
              <el-tag type="primary" size="small">v{{ info?.backend_version || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="前端版本">
              <el-tag type="success" size="small">v{{ info?.frontend_version || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="运行时间">
              {{ info?.uptime_text || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="调试模式">
              <el-tag :type="info?.debug ? 'warning' : 'info'" size="small">
                {{ info?.debug ? '开启' : '关闭' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 运行环境 -->
      <el-col :span="12">
        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><Cpu /></el-icon>
              <span>运行环境</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="Python 版本">
              {{ info?.python_version || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="操作系统">
              {{ info?.os || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="平台信息">
              <span class="platform-text">{{ info?.platform || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="Playwright 模式">
              <el-tag :type="info?.playwright_headless ? 'info' : 'success'" size="small">
                {{ info?.playwright_headless ? '无头模式' : '有头模式' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 数据库状态 -->
      <el-col :span="12">
        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><Coin /></el-icon>
              <span>数据库状态</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="数据库类型">
              <el-tag :type="info?.db_type === 'mysql' ? 'success' : 'warning'" size="small">
                {{ info?.db_type?.toUpperCase() || '-' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="数据库大小">
              {{ info?.db_size_mb ?? 0 }} MB
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 业务统计 -->
      <el-col :span="12">
        <el-card shadow="never" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><DataAnalysis /></el-icon>
              <span>业务统计</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="模块总数">
              <span class="stat-number">{{ info?.total_modules ?? 0 }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用例总数">
              <span class="stat-number">{{ info?.total_cases ?? 0 }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <div class="refresh-bar">
      <el-button type="primary" :icon="Refresh" @click="loadInfo" :loading="loading">
        刷新
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 系统信息页面
 *
 * 展示应用版本、运行环境、数据库状态、业务统计等。
 */

import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Monitor, Cpu, Coin, DataAnalysis, Refresh } from '@element-plus/icons-vue'
import { systemApi, type SystemInfo } from '@/api/system'

const loading = ref(false)
const info = ref<SystemInfo | null>(null)

async function loadInfo() {
  loading.value = true
  try {
    info.value = await systemApi.getInfo()
  } catch (e: any) {
    ElMessage.error(e?.message || '获取系统信息失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadInfo()
})
</script>

<style scoped>
.system-info-page {
  max-width: 1200px;
}

.info-card {
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.platform-text {
  font-size: 12px;
  color: #606266;
  word-break: break-all;
}

.stat-number {
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
}

.refresh-bar {
  margin-top: 20px;
  text-align: right;
}
</style>
