<!--
  统计卡片组组件
  多个统计卡片的组合展示
-->

<template>
  <el-row :gutter="16" class="stat-card-group">
    <el-col
      v-for="(item, index) in items"
      :key="index"
      :xs="24"
      :sm="12"
      :md="8"
      :lg="6"
      :xl="colWidth"
    >
      <StatCard
        :title="item.title"
        :value="item.value"
        :unit="item.unit"
        :icon="item.icon"
        :trend="item.trend"
        :trend-value="item.trendValue"
        :color="item.color"
        :loading="item.loading"
        :clickable="item.clickable"
        @click="() => handleCardClick(item, index)"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import StatCard from './StatCard.vue'
import type { StatCardConfig } from '@/types/charts'

/** Props */
interface Props {
  items: StatCardConfig[]
  colWidth?: number
}

const props = withDefaults(defineProps<Props>(), {
  items: () => [],
  colWidth: 6,
})

/** Emits */
interface Emits {
  (e: 'cardClick', item: StatCardConfig, index: number): void
}

const emit = defineEmits<Emits>()

/** 处理卡片点击 */
const handleCardClick = (item: StatCardConfig, index: number) => {
  if (item.clickable && item.onClick) {
    item.onClick()
  }
  emit('cardClick', item, index)
}

/** 默认插槽 */
defineSlots<{
  default?: () => void
}>()
</script>

<style scoped lang="scss">
.stat-card-group {
  width: 100%;

  :deep(.el-col) {
    margin-bottom: 16px;
  }
}
</style>
