<template>
  <v-card class="rounded-lg" elevation="2" v-bind="$attrs">
    <v-card-title class="d-flex align-center py-4 px-4 border-b">
      <span class="font-weight-bold">{{ title }}</span>
      <v-spacer></v-spacer>
      <v-btn color="primary" density="compact" variant="text" @click="$emit('view-more')">
        {{ viewMoreText }}
      </v-btn>
    </v-card-title>
    <v-list class="pa-0" lines="two">
      <v-list-item
        v-for="(item, index) in announcements"
        :key="index"
        class="border-b"
        @click="$emit('item-click', item)"
      >
        <template #prepend>
          <v-avatar :color="item.avatarColor || 'primary'" size="40" variant="tonal">
            <span v-if="!item.avatarSrc" class="text-h6">{{ item.author[0] }}</span>
            <v-img v-else :src="item.avatarSrc"></v-img>
          </v-avatar>
        </template>

        <v-list-item-title class="font-weight-medium mb-1">
          {{ item.title }}
        </v-list-item-title>

        <v-list-item-subtitle>
          <span class="text-caption text-grey mr-2">{{ item.author }}</span>
          <span class="text-caption text-grey">{{ item.time }}</span>
        </v-list-item-subtitle>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script setup lang="ts">
interface Props {
  title: string
  announcements: Array<{
    title: string
    author: string
    time: string
    avatarSrc?: string | null
    avatarColor?: string
  }>
  viewMoreText?: string
}

withDefaults(defineProps<Props>(), {
  viewMoreText: '更多',
})

defineEmits(['view-more', 'item-click'])
</script>
