<template>
  <div class="ai-monitoring-container">
    <a-row :gutter="16">
      <a-col v-for="service in services" :key="service.id" :span="8">
        <a-card :title="service.name" hoverable class="service-card">
          <template #extra>
            <a-tag :color="service.status === 'Running' ? 'green' : 'red'">
              {{ service.status }}
            </a-tag>
          </template>
          <div class="service-info">
            <p><strong>响应时间:</strong> {{ service.responseTime }} ms</p>
            <p><strong>服务状态:</strong> {{ service.health }}</p>
            <p><strong>上次更新:</strong> {{ service.lastUpdated }}</p>
          </div>
          <template #actions>
            <a-button type="primary" size="small" @click="refreshStatus(service)">
              刷新
            </a-button>
          </template>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Row as ARow, Col as ACol, Card as ACard, Tag as ATag, Button as AButton } from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

// 服务数据
const services = ref([
  {
    id: 1,
    name: '图像识别模型',
    status: 'Running',
    responseTime: Math.floor(Math.random() * 500),
    health: 'Healthy',
    lastUpdated: new Date().toLocaleTimeString(),
  },
  {
    id: 2,
    name: '大语言模型',
    status: 'Running',
    responseTime: Math.floor(Math.random() * 500),
    health: 'Healthy',
    lastUpdated: new Date().toLocaleTimeString(),
  }
]);

// 模拟刷新服务状态
const refreshStatus = (service) => {
  // 这里可以替换为真实的 API 调用
  service.status = Math.random() > 0.003 ? 'Running' : 'Stopped';
  service.responseTime = service.status === 'Running' ? Math.floor(Math.random() * 500) : 0;
  service.health = service.status === 'Running' ? 'Healthy' : 'Unhealthy';
  service.lastUpdated = new Date().toLocaleTimeString();
};

// 页面加载时模拟自动更新
onMounted(() => {
  setInterval(() => {
    services.value.forEach((service) => {
      if (Math.random() > 0.7) {
        refreshStatus(service);
      }
    });
  }, 5000); // 每 5 秒自动更新部分服务状态
});
</script>

<style scoped>
.ai-monitoring-container {
  padding: 20px;
}

.service-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.service-info {
  margin-bottom: 16px;
}

.service-info p {
  margin: 8px 0;
  color: #666;
}
</style>