<template>
  <!-- 统计 -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <UCard v-for="stat in statistics" :key="stat.label">
      <div class="space-y-2">
        <div class="flex items-center justify-between">
          <p class="text-sm text-gray-500 dark:text-gray-400">
            {{ stat.label }}
          </p>
          <UIcon
            :name="stat.icon"
            :style="`color: ${stat.color}`"
            class="size-5 text-gray-400"
          />
        </div>
        <p class="text-3xl font-bold">{{ stat.value }}</p>
        <div v-if="stat.percentage" class="flex items-center gap-1 text-sm">
          <UIcon
            :name="stat.percentageIcon"
            :class="['size-4', stat.percentageColor]"
          />
          <span :class="['font-medium', stat.percentageColor]">{{
            stat.percentageChange
          }}</span>
          <span class="text-gray-500">{{ stat.percentageLabel }}</span>
        </div>
      </div>
    </UCard>
  </div>
</template>

<script lang="ts" setup>
const { stats } = useItemsStore();

// 统计
const statistics = [
  {
    icon: "lucide:box",
    label: "总物品数",
    value: stats.totalItems,
    color: "blue",
  },
  {
    icon: "lucide:package-plus",
    label: "本月新增",
    value: stats.addedThisMonth,
    color: "green",
    percentage: true,
    percentageChange:
      stats.comparedToLastMonth.value >= 0
        ? `+${stats.comparedToLastMonth.value}%`
        : `${stats.comparedToLastMonth.value}%`,
    percentageLabel: "from last month",
    percentageIcon:
      stats.comparedToLastMonth.value >= 0
        ? "i-lucide-trending-up"
        : "i-lucide-trending-down",
    percentageColor:
      stats.comparedToLastMonth.value >= 0 ? "text-green-500" : "text-red-500",
  },
  {
    icon: "lucide:history",
    label: "历史记录",
    value: computed(() => 0),
    color: "orange",
  },
  {
    icon: "lucide:image",
    label: "图片总数",
    value: stats.totalImages,
    color: "purple",
  },
];
</script>

<style></style>
