<template>
  <div class="monitor-container">
    <div class="monitor-header">
      <h2>系统监控</h2>
      <el-button type="primary" :icon="Icons.Refresh" @click="fetchData" :loading="loading">刷新</el-button>
    </div>

    <div class="monitor-content">
      <!-- CPU & Memory Row -->
      <div class="monitor-row">
        <el-card class="monitor-card glass">
          <template #header>
            <div class="card-header">
              <el-icon><component :is="Icons.Cpu" /></el-icon>
              <span>CPU</span>
            </div>
          </template>
          <div class="metric-content" v-if="serverInfo">
            <el-progress type="dashboard" :percentage="Number((serverInfo.cpu.used).toFixed(2))" :color="getColors" />
            <div class="metric-details">
              <div class="detail-item">
                <span>核心数:</span>
                <span>{{ serverInfo.cpu.cpuNum }}</span>
              </div>
              <div class="detail-item">
                <span>系统使用:</span>
                <span>{{ serverInfo.cpu.sys }}%</span>
              </div>
              <div class="detail-item">
                <span>用户使用:</span>
                <span>{{ serverInfo.cpu.used }}%</span>
              </div>
              <div class="detail-item">
                <span>空闲:</span>
                <span>{{ serverInfo.cpu.free }}%</span>
              </div>
            </div>
          </div>
          <el-skeleton :rows="5" animated v-else />
        </el-card>

        <el-card class="monitor-card glass">
          <template #header>
            <div class="card-header">
              <el-icon><component :is="Icons.Memo" /></el-icon>
              <span>内存</span>
            </div>
          </template>
          <div class="metric-content" v-if="serverInfo">
            <el-progress type="dashboard" :percentage="Number((serverInfo.mem.usage).toFixed(2))" :color="getColors" />
            <div class="metric-details">
              <div class="detail-item">
                <span>总内存:</span>
                <span>{{ serverInfo.mem.total }}GB</span>
              </div>
              <div class="detail-item">
                <span>已用:</span>
                <span>{{ serverInfo.mem.used }}GB</span>
              </div>
              <div class="detail-item">
                <span>剩余:</span>
                <span>{{ serverInfo.mem.free }}GB</span>
              </div>
              <div class="detail-item">
                <span>使用率:</span>
                <span>{{ serverInfo.mem.usage }}%</span>
              </div>
            </div>
          </div>
          <el-skeleton :rows="5" animated v-else />
        </el-card>
      </div>

      <!-- JVM Row -->
      <el-card class="monitor-card glass full-width">
        <template #header>
          <div class="card-header">
            <el-icon><component :is="Icons.Platform" /></el-icon>
            <span>JVM 信息</span>
          </div>
        </template>
        <div v-if="serverInfo && serverInfo.jvm">
          <el-descriptions border :column="4">
            <el-descriptions-item label="启动时间">{{ serverInfo.jvm.startTime }}</el-descriptions-item>
            <el-descriptions-item label="安装路径">{{ serverInfo.jvm.home }}</el-descriptions-item>
            <el-descriptions-item label="项目路径">{{ serverInfo.sys.userDir }}</el-descriptions-item>
            <el-descriptions-item label="GC次数">{{ serverInfo.jvm.gcCount }} 次</el-descriptions-item>
            <el-descriptions-item label="GC耗时">{{ serverInfo.jvm.gcTime }} ms</el-descriptions-item>
            <el-descriptions-item label="运行参数" :span="4">{{ serverInfo.jvm.inputArgs }}</el-descriptions-item>
          </el-descriptions>
          
          <div class="jvm-metrics mt-4">
             <div class="metric-bar">
               <span>JVM内存使用 ({{ serverInfo.jvm.usage }}%)</span>
               <el-progress :text-inside="true" :stroke-width="20" :percentage="Number((serverInfo.jvm.usage))" :color="getColors" />
               <div class="metric-sub-text">
                 Total: {{ serverInfo.jvm.total }}MB | Used: {{ serverInfo.jvm.used }}MB | Free: {{ serverInfo.jvm.free }}MB
               </div>
             </div>
          </div>
        </div>
        <el-skeleton :rows="5" animated v-else />
      </el-card>

      <!-- Server Info Row -->
      <el-card class="monitor-card glass full-width">
        <template #header>
          <div class="card-header">
            <el-icon><component :is="Icons.Monitor" /></el-icon>
            <span>服务器信息</span>
          </div>
        </template>
        <el-descriptions border :column="2" v-if="serverInfo">
          <el-descriptions-item label="服务器名称">{{ serverInfo.sys.computerName }}</el-descriptions-item>
          <el-descriptions-item label="操作系统">{{ serverInfo.sys.osName }}</el-descriptions-item>
          <el-descriptions-item label="服务器IP">{{ serverInfo.sys.computerIp }}</el-descriptions-item>
          <el-descriptions-item label="系统架构">{{ serverInfo.sys.osArch }}</el-descriptions-item>
        </el-descriptions>
        <el-skeleton :rows="3" animated v-else />
      </el-card>

      <!-- Disk Info Row -->
      <el-card class="monitor-card glass full-width">
        <template #header>
          <div class="card-header">
            <el-icon><component :is="Icons.Coin" /></el-icon>
            <span>磁盘状态</span>
          </div>
        </template>
        <el-table :data="serverInfo ? serverInfo.disks : []" style="width: 100%" v-if="serverInfo">
          <el-table-column prop="dirName" label="盘符路径" width="180" />
          <el-table-column prop="sysTypeName" label="文件系统" width="120" />
          <el-table-column prop="typeName" label="盘符类型" width="120" />
          <el-table-column prop="total" label="总大小" width="120" />
          <el-table-column prop="free" label="可用大小" width="120" />
          <el-table-column prop="used" label="已用大小" width="120" />
          <el-table-column label="使用率" width="180">
            <template #default="scope">
              <el-progress :percentage="Number(scope.row.usage)" :color="getColors" />
            </template>
          </el-table-column>
        </el-table>
        <el-skeleton :rows="5" animated v-else />
      </el-card>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getServerInfo } from '../../api/monitor'
import { ElMessage } from 'element-plus'
import * as Icons from '@element-plus/icons-vue'

const loading = ref(false)
const serverInfo = ref(null)

const getColors = [
  { color: '#5cb87a', percentage: 60 },
  { color: '#e6a23c', percentage: 80 },
  { color: '#f56c6c', percentage: 100 },
]

async function fetchData() {
  loading.value = true
  try {
    const res = await getServerInfo()
    if (res.code === 0) {
      serverInfo.value = res.data
    } else {
      ElMessage.error(res.message || '获取系统信息失败')
    }
  } catch (error) {
    console.error('Fetch error:', error)
    if (error.response) {
      const { status } = error.response
      const statusMap = {
        400: '请求参数错误',
        401: '登录状态已失效，请重新登录',
        403: '您没有权限访问该资源',
        404: '请求的资源不存在',
        408: '请求超时，请稍后重试',
        500: '服务器内部错误，请联系管理员',
        502: '网关错误',
        503: '服务不可用',
        504: '网关超时'
      }
      
    } else {
      ElMessage.error('网络连接失败，请检查您的网络设置')
    }
  } finally {
    loading.value = false
  }
}

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

<style scoped>
.monitor-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.monitor-header h2 {
  margin: 0;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.monitor-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.monitor-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.monitor-card {
  border-radius: 12px;
}

.full-width {
  width: 100%;
}

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

.metric-content {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: center;
}

.metric-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.detail-item span:last-child {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.mt-4 {
  margin-top: 16px;
}

.metric-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-sub-text {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  text-align: right;
}
</style>
