<template>
  <!-- 活动模块 -->
  <UPageSection title="校友活动" class="bg-gray-100">
    <UPageGrid>
      <div
        v-for="event in events"
        :key="event.id"
        class="bg-white shadow rounded-xl"
      >
        <img
          :src="event.cover"
          :alt="event.title"
          class="w-full aspect-[16/9] object-cover rounded-t-xl"
        />
        <div class="p-6">
          <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
          <p class="text-sm text-gray-600 mb-1">
            日期：{{ useChineseDateFormat(event.date) }}
          </p>
          <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
          <UButton
            label="阅读详情"
            :to="event.path"
            trailing-icon="mdi:book-open-blank-variant-outline"
          />
        </div>
      </div>
    </UPageGrid>
  </UPageSection>
</template>

<script lang="ts" setup>
const { data: events } = await useAsyncData("events", () =>
  queryCollection("events")
    .where("draft", "=", false)
    .order("date", "DESC")
    .limit(3)
    .all()
);
</script>

<style></style>
