<template>
  <div class="space-y-6">
    <div class="grid grid-cols-4 gap-6">
      <a-card class="text-center">
        <div class="text-3xl font-bold text-blue-600">{{ stats.serverCount }}</div>
        <div class="text-gray-500 mt-2">服务器总数</div>
      </a-card>
      <a-card class="text-center">
        <div class="text-3xl font-bold text-green-600">{{ stats.onlineCount }}</div>
        <div class="text-gray-500 mt-2">在线服务器</div>
      </a-card>
      <a-card class="text-center">
        <div class="text-3xl font-bold text-purple-600">{{ stats.scriptCount }}</div>
        <div class="text-gray-500 mt-2">脚本数量</div>
      </a-card>
      <a-card class="text-center">
        <div class="text-3xl font-bold text-orange-600">{{ stats.executeCount }}</div>
        <div class="text-gray-500 mt-2">今日执行</div>
      </a-card>
    </div>
    
    <div class="grid grid-cols-2 gap-6">
      <a-card title="最近执行记录">
        <a-table
          :data-source="recentExecutions"
          :columns="executionColumns"
          :pagination="false"
          size="small"
        />
      </a-card>
      
      <a-card title="服务器状态">
        <a-table
          :data-source="serverStatus"
          :columns="serverColumns"
          :pagination="false"
          size="small"
        />
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const stats = ref({
  serverCount: 0,
  onlineCount: 0,
  scriptCount: 0,
  executeCount: 0
})

const recentExecutions = ref([])
const serverStatus = ref([])

const executionColumns = [
  { title: '脚本名称', dataIndex: 'scriptName', key: 'scriptName' },
  { title: '执行时间', dataIndex: 'executeTime', key: 'executeTime' },
  { title: '状态', dataIndex: 'status', key: 'status' }
]

const serverColumns = [
  { title: '服务器名称', dataIndex: 'name', key: 'name' },
  { title: 'IP地址', dataIndex: 'ip', key: 'ip' },
  { title: '状态', dataIndex: 'status', key: 'status' }
]

onMounted(async () => {
  // 模拟数据，实际项目中应该从API获取
  stats.value = {
    serverCount: 12,
    onlineCount: 10,
    scriptCount: 8,
    executeCount: 25
  }
  
  recentExecutions.value = [
    { key: 1, scriptName: '系统更新', executeTime: '2024-01-15 10:30', status: '成功' },
    { key: 2, scriptName: '日志清理', executeTime: '2024-01-15 09:15', status: '成功' },
    { key: 3, scriptName: '备份数据', executeTime: '2024-01-15 08:00', status: '失败' }
  ]
  
  serverStatus.value = [
    { key: 1, name: 'Web-01', ip: '192.168.1.10', status: '在线' },
    { key: 2, name: 'DB-01', ip: '192.168.1.20', status: '在线' },
    { key: 3, name: 'Cache-01', ip: '192.168.1.30', status: '离线' }
  ]
})
</script> 