<template>
  <PostcardBase
    :notification="notification"
    :displayTitle="displayTitle"
    @mark-read="emit('mark-read', $event)"
    @delete="emit('delete', $event)"
  >
    <template #body>
      <view class="activity-body">
        <view v-if="activityCover" class="activity-cover-wrap">
          <image class="activity-cover" :src="activityCover" mode="aspectFill" />
        </view>
        <view v-if="activityTitle" class="activity-title-row">
          <text class="activity-title">{{ activityTitle }}</text>
        </view>
        <view v-if="activityId" class="chip-row chip-row-muted">
          <text class="chip-label">活动 ID:</text>
          <text class="chip-value">{{ activityId }}</text>
        </view>
        <view class="activity-content">
          <text>{{ notification.content }}</text>
        </view>
      </view>
    </template>
  </PostcardBase>
</template>

<script setup>
import { computed } from 'vue'
import PostcardBase from './PostcardBase.vue'
import { parseData } from './postcardHelpers.js'

const props = defineProps({
  notification:  { type: Object, required: true },
  displayTitle:  { type: String, default: '' },
})
const emit = defineEmits(['mark-read', 'delete'])

const data = computed(() => parseData(props.notification.data))
const activityCover = computed(() => data.value.activity_cover || '')
const activityTitle = computed(() => data.value.activity_title || '')
const activityId    = computed(() => data.value.activity_id    || '')
</script>

<style lang="scss" scoped>
.activity-body {
  .activity-cover-wrap {
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }
  .activity-cover {
    width: 100%;
    height: 360rpx;
    background: #f5f5f5;
  }
  .activity-title-row {
    margin-bottom: 12rpx;
    .activity-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  .chip-row {
    display: flex;
    font-size: 24rpx;
    padding: 6rpx 0;
    .chip-label { color: #999; margin-right: 16rpx; min-width: 140rpx; }
    .chip-value { color: #333; }
  }
  .chip-row-muted .chip-value { color: #888; font-family: monospace; }
  .activity-content {
    margin-top: 16rpx;
    font-size: 28rpx;
    line-height: 1.7;
    color: #333;
    white-space: pre-wrap;
  }
}
</style>