<template>
  <ElCard shadow="never" class="polling-stats-widget">
    <template #header>
      <div class="card-header">
        <div class="header-left">
          <span class="header-title">轮询初始化进度</span>
        </div>
        <div class="header-right">
          <ElButton size="small" @click="loadOverviewStats" :loading="loading">刷新</ElButton>
        </div>
      </div>
    </template>
    <div class="stats-grid">
      <div class="stat-card">
        <div
          class="stat-icon"
          style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        >
          <el-icon :size="24"><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">总卡数</div>
          <div class="stat-value">{{ overviewStats?.total_cards?.toLocaleString() || 0 }}</div>
        </div>
      </div>
      <div class="stat-card">
        <div
          class="stat-icon"
          style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
        >
          <el-icon :size="24"><CircleCheck /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">已初始化</div>
          <div class="stat-value">
            {{ overviewStats?.initialized_cards?.toLocaleString() || 0 }} /
            {{ overviewStats?.total_cards?.toLocaleString() || 0 }}
          </div>
        </div>
      </div>
      <div class="stat-card">
        <div
          class="stat-icon"
          style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
        >
          <el-icon :size="24"><User /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">实名队列</div>
          <div class="stat-value">{{
            overviewStats?.realname_queue_size?.toLocaleString() || 0
          }}</div>
        </div>
      </div>
      <div class="stat-card">
        <div
          class="stat-icon"
          style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
        >
          <el-icon :size="24"><Box /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">套餐队列</div>
          <div class="stat-value">{{
            overviewStats?.package_queue_size?.toLocaleString() || 0
          }}</div>
        </div>
      </div>
      <div class="stat-card">
        <div
          class="stat-icon"
          style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
        >
          <el-icon :size="24"><DataLine /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-label">流量队列</div>
          <div class="stat-value">{{
            overviewStats?.carddata_queue_size?.toLocaleString() || 0
          }}</div>
        </div>
      </div>
    </div>
  </ElCard>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElTag, ElButton } from 'element-plus'
  import { Document, CircleCheck, User, Box, DataLine } from '@element-plus/icons-vue'
  import { PollingMonitorService } from '@/api/modules'
  import type { PollingOverviewStats } from '@/types/api'
  import { usePermission } from '@/composables/usePermission'

  defineOptions({ name: 'PollingStats' })

  const { hasPermission } = usePermission()
  const overviewStats = ref<PollingOverviewStats>()
  const loading = ref(false)

  // 加载总览统计
  const loadOverviewStats = async () => {
    // 检查权限，没有权限不调用接口
    if (!hasPermission('dashboard_analysis:polling_stats')) {
      return
    }

    loading.value = true
    try {
      const { data } = await PollingMonitorService.getOverviewStats()
      overviewStats.value = data
    } catch (error) {
      console.log('加载轮询统计失败')
    } finally {
      loading.value = false
    }
  }

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

<style lang="scss" scoped>
  .polling-stats-widget {
    :deep(.el-card__header) {
      padding: 18px 20px;
      background: var(--el-fill-color-light);
      border-bottom: 1px solid var(--el-border-color-lighter);
    }

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

    .card-header {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        gap: 10px;
        align-items: center;

        .header-title {
          font-size: 15px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }

      .header-right {
        display: flex;
        gap: 8px;
      }
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;

      .stat-card {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 16px;
        background: var(--el-fill-color-blank);
        border-radius: 8px;

        .stat-icon {
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          color: white;
          border-radius: 8px;
        }

        .stat-content {
          flex: 1;
          min-width: 0;

          .stat-label {
            margin-bottom: 4px;
            font-size: 13px;
            color: var(--el-text-color-secondary);
          }

          .stat-value {
            overflow: hidden;
            font-size: 16px;
            font-weight: 600;
            color: var(--el-text-color-primary);
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }

  @media (width <= 768px) {
    .polling-stats-widget {
      .card-header {
        .header-left,
        .header-right {
          width: 100%;
        }
      }

      .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
  }
</style>
