<script setup lang="ts">
import type { Component } from 'vue';

import type { DashboardStatValueType } from './DashboardStatCard.vue';

import DashboardStatCard from './DashboardStatCard.vue';

/** 看板统计卡片配置项 */
export interface DashboardStatItem {
  title: string;
  value: number | string;
  valueType?: DashboardStatValueType;
  footerLabel?: string;
  footerValue?: number | string;
  decorationIcon?: string | Component;
  decorationImage?: string;
}

defineProps<{
  items: DashboardStatItem[];
}>();

defineOptions({
  name: 'DashboardStatGrid',
});
</script>

<template>
  <div class="dashboard-stat-grid">
    <DashboardStatCard
      v-for="item in items"
      :key="item.title"
      v-bind="item"
    />
  </div>
</template>

<style scoped>
/* 内置响应式栅格：1 → 2 → 5 列，不依赖页面级 :deep(.grid) 覆盖 */
.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 768px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
</style>
