<template>
  <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-4">
    <div class="rounded-md bg-gray-50 p-4">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <div class="w-6 h-6 bg-blue-50 rounded-md flex items-center justify-center">
            <el-icon class="text-blue-600 text-sm"><MegaphoneIcon /></el-icon>
          </div>
        </div>
        <div class="ml-3">
          <p class="text-xs text-gray-500">总公告数</p>
          <p class="text-xl font-semibold text-gray-900">{{ stats.total_announcements || 0 }}</p>
        </div>
      </div>
    </div>

    <div class="rounded-md bg-gray-50 p-4">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <div class="w-6 h-6 bg-green-50 rounded-md flex items-center justify-center">
            <el-icon class="text-green-600 text-sm"><CheckCircleIcon /></el-icon>
          </div>
        </div>
        <div class="ml-3">
          <p class="text-xs text-gray-500">已发布</p>
          <p class="text-xl font-semibold text-gray-900">{{ stats.published_announcements || 0 }}</p>
        </div>
      </div>
    </div>

    <div class="rounded-md bg-gray-50 p-4">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <div class="w-6 h-6 bg-yellow-50 rounded-md flex items-center justify-center">
            <el-icon class="text-yellow-600 text-sm"><ClockIcon /></el-icon>
          </div>
        </div>
        <div class="ml-3">
          <p class="text-xs text-gray-500">草稿</p>
          <p class="text-xl font-semibold text-gray-900">{{ stats.draft_announcements || 0 }}</p>
        </div>
      </div>
    </div>

    <div class="rounded-md bg-gray-50 p-4">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <div class="w-6 h-6 bg-orange-50 rounded-md flex items-center justify-center">
            <el-icon class="text-orange-600 text-sm"><ArchiveBoxIcon /></el-icon>
          </div>
        </div>
        <div class="ml-3">
          <p class="text-xs text-gray-500">已归档</p>
          <p class="text-xl font-semibold text-gray-900">{{ stats.archived_announcements || 0 }}</p>
        </div>
      </div>
    </div>

    <div class="rounded-md bg-gray-50 p-4">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <div class="w-6 h-6 bg-purple-50 rounded-md flex items-center justify-center">
            <el-icon class="text-purple-600 text-sm"><ClockIcon /></el-icon>
          </div>
        </div>
        <div class="ml-3">
          <p class="text-xs text-gray-500">定时发布</p>
          <p class="text-xl font-semibold text-gray-900">{{ stats.scheduled_announcements || 0 }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArchiveBoxIcon, CheckCircleIcon, ClockIcon, MegaphoneIcon } from '@heroicons/vue/24/outline';

defineProps({
  stats: {
    type: Object,
    default: () => ({})
  }
})
</script>

