<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { IotStatApi } from '@/api/pms/stat'

// 定义数据接口结构
interface DeviceStat {
  percent: number
  total: number
}

interface ApiData {
  a: DeviceStat
  b: DeviceStat
  c: DeviceStat
}

// 响应式数据，设置初始默认值防止页面报错
const stats = ref<ApiData>({
  a: { percent: 0, total: 0 },
  b: { percent: 0, total: 0 },
  c: { percent: 0, total: 0 }
})

const loading = ref(false)

// 配置项：定义每一项的名称、颜色和对应接口的key
// 你可以在这里修改 name 为实际业务名称
const config = [
  { key: 'a', name: 'A(关键)', color: '#00E5FF' }, // 亮青
  { key: 'b', name: 'B(重要)', color: '#FFD740' }, // 亮黄
  { key: 'c', name: 'C(一般)', color: '#69F0AE' } // 荧光绿
] as const

const fetchData = async () => {
  loading.value = true
  try {
    const res = await IotStatApi.getWhl()

    if (res) {
      stats.value = res
    }
  } catch (error) {
    console.error('Whl API Error:', error)
  } finally {
    loading.value = false
  }
}

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

<template>
  <div
    class="card size-full rounded-lg p-4 flex flex-col"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
  >
    <div class="flex items-center gap-2 mb-6">
      <div class="w-1 h-4 bg-[#00E5FF] rounded-full shadow-[0_0_8px_#00E5FF]"></div>
      <div class="text-[#e0e0e0] text-lg font-bold">完好率</div>
    </div>

    <!-- 内容区域：三列布局 -->
    <div class="flex-1 flex items-center justify-around w-full">
      <div v-for="item in config" :key="item.key" class="flex flex-col items-center group">
        <!-- 进度环 -->
        <!-- stroke-width: 进度条宽度 -->
        <!-- width: 圆环直径 -->
        <div class="relative relative-glow">
          <el-progress
            type="dashboard"
            :percentage="stats[item.key]?.percent || 0"
            :color="item.color"
            :width="130"
            :stroke-width="10"
            stroke-linecap="round"
          >
            <!-- 自定义圆环中间的内容 -->
            <template #default="{ percentage }">
              <div class="flex flex-col items-center">
                <span
                  class="text-2xl font-bold font-mono"
                  :style="{ color: item.color, textShadow: `0 0 10px ${item.color}40` }"
                >
                  {{ percentage }}%
                </span>
                <span class="text-[#9ca3af] text-xs mt-1">{{ item.name }}</span>
              </div>
            </template>
          </el-progress>
        </div>

        <!-- 底部文字：总数 -->
        <div class="mt-2 text-center">
          <!-- <div class="text-[#b6c8da] text-sm">在线总数</div> -->
          <div class="text-xl font-bold text-white mt-1">
            {{ stats[item.key]?.total || 0 }}
            <span class="text-xs text-[#6b7280] font-normal">台</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 卡片背景 - 保持统一风格 */
.card {
  background-color: rgb(0 0 0 / 30%);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
  }
}

/* 强制修改 Element Progress 的轨道背景色，使其适应深色主题 */
:deep(.el-progress-circle__track) {
  stroke: rgb(255 255 255 / 10%) !important;
}

/* 进度条文字居中修正 */
:deep(.el-progress__text) {
  top: 50%;
  transform: translateY(-50%);
}

/* 简单的光晕动效 */
.relative-glow {
  transition: transform 0.3s ease;
}

.group:hover .relative-glow {
  transform: scale(1.05);
}
</style>
