<template>
  <PostcardBase
    :notification="notification"
    :displayTitle="displayTitle"
    @mark-read="emit('mark-read', $event)"
    @delete="emit('delete', $event)"
  >
    <template #body>
      <view class="feedback-body">
        <view v-if="categoryCode" class="chip-row">
          <text class="chip-label">分类:</text>
          <text class="chip-value">{{ categoryCode }}</text>
        </view>
        <view v-if="originalTitle" class="chip-row">
          <text class="chip-label">原标题:</text>
          <text class="chip-value">{{ originalTitle }}</text>
        </view>
        <view v-if="feedbackId" class="chip-row chip-row-muted">
          <text class="chip-label">反馈 ID:</text>
          <text class="chip-value">{{ feedbackId }}</text>
        </view>
        <view class="feedback-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 categoryCode  = computed(() => data.value.category_code  || '')
const originalTitle = computed(() => data.value.original_title || '')
const feedbackId    = computed(() => data.value.feedback_id    || '')
</script>

<style lang="scss" scoped>
.feedback-body {
  .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; }
  .feedback-content {
    margin-top: 16rpx;
    padding: 16rpx 20rpx;
    background: #f7f8ff;
    border-left: 4rpx solid #5C40FF;
    border-radius: 6rpx;
    font-size: 28rpx;
    line-height: 1.7;
    color: #333;
    white-space: pre-wrap;
  }
}
</style>