<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// Filter
const filterType = ref('system')

// Info cards data
interface InfoCard {
  icon: string
  title: string
  status: 'normal' | 'warning' | 'danger'
  statusLabel: string
  value: number
  unit: string
  detail: string
}

const infoCards = ref<InfoCard[]>([
  {
    icon: '🖥️',
    title: 'CPU 使用率',
    status: 'normal',
    statusLabel: '正常',
    value: 32.5,
    unit: '%',
    detail: '核心数: 8 | 负载: 2.1, 1.8, 1.6',
  },
  {
    icon: '💾',
    title: '内存使用率',
    status: 'warning',
    statusLabel: '注意',
    value: 68.3,
    unit: '%',
    detail: '已用: 10.9 GB / 总计: 16 GB',
  },
  {
    icon: '💿',
    title: '硬盘使用率',
    status: 'normal',
    statusLabel: '正常',
    value: 45.2,
    unit: '%',
    detail: '已用: 90.4 GB / 总计: 200 GB',
  },
])

const filterOptions = [
  { value: 'system', label: '系统' },
  { value: 'docker', label: 'Docker容器' },
  { value: 'nginx', label: 'Nginx' },
  { value: 'mysql', label: 'MySQL' },
  { value: 'redis', label: 'Redis' },
]

function handleFilter() {
  ElMessage.info('筛选功能开发中，敬请期待 - 类型: ' + filterType.value)
}

function statusClass(status: string) {
  return `badge-${status}`
}

function progressClass(status: string) {
  return `progress-${status}`
}

function valueColor(status: string) {
  if (status === 'normal') return '#16a34a'
  if (status === 'warning') return '#d97706'
  return '#dc2626'
}
</script>

<template>
  <div class="page-info">
    <div class="section-head">
      <h1 class="section-title">ℹ️ 服务信息</h1>
    </div>

    <div class="filter-bar">
      <label class="filter-label">监控类型：</label>
      <el-select v-model="filterType" style="width: 160px;" @change="handleFilter">
        <el-option
          v-for="opt in filterOptions"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
    </div>

    <div class="info-cards">
      <el-card v-for="(card, idx) in infoCards" :key="idx" class="info-card">
        <div class="info-card-header">
          <div class="info-card-title">{{ card.icon }} {{ card.title }}</div>
          <span class="status-badge" :class="statusClass(card.status)">
            {{ card.statusLabel }}
          </span>
        </div>
        <div class="info-card-value" :style="{ color: valueColor(card.status) }">
          {{ card.value }}<span class="info-card-unit">{{ card.unit }}</span>
        </div>
        <div class="progress-bar">
          <div
            class="progress-fill"
            :class="progressClass(card.status)"
            :style="{ width: card.value + '%' }"
          ></div>
        </div>
        <div class="info-card-detail">{{ card.detail }}</div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page-info {
  padding: 0 0 40px;
}

.section-head {
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: $gray-900;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 14px;
  font-weight: 600;
  color: $gray-700;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.info-card {
  border-radius: 12px;

  :deep(.el-card__body) {
    padding: 24px;
  }
}

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

.info-card-title {
  font-size: 16px;
  font-weight: 700;
  color: $gray-900;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-card-value {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.info-card-unit {
  font-size: 14px;
  font-weight: 400;
  color: $gray-500;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: $gray-200;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.progress-normal { background: $green; }
.progress-warning { background: $yellow; }
.progress-danger { background: $red; }

.info-card-detail {
  font-size: 13px;
  color: $gray-500;
  margin-top: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge-normal { background: #dcfce7; color: $green; }
.badge-warning { background: #fef3c7; color: $yellow; }
.badge-danger { background: #fee2e2; color: $red; }

@media screen and (max-width: 768px) {
  .info-cards {
    grid-template-columns: 1fr;
  }

  .info-card {
    :deep(.el-card__body) {
      padding: 18px 16px;
    }
  }

  .info-card-value {
    font-size: 30px;
  }
}
</style>