<template>
  <div class="container">
    <section class="hero fade-up">
      <div class="hero-badge">INBOX</div>
      <h1 class="hero-title">用户私信收件箱</h1>
      <p class="hero-sub">仅展示通过检测后成功送达的私信内容。</p>
    </section>

    <section class="card fade-up fade-up-delay-1" v-if="list.length">
      <div class="card-title">私信列表</div>
      <div class="list-item" v-for="item in list" :key="item.id">
        <div class="item-title">{{ item.text }}</div>
        <div class="item-sub">发送人：{{ item.nickname || item.username }}（{{ item.username }}）</div>
        <div class="row">
          <span class="label">发送时间</span>
          <span class="value">{{ item.created_text }}</span>
        </div>
      </div>
    </section>

    <section class="card fade-up fade-up-delay-1" v-else>
      <div class="empty">{{ loading ? '加载中...' : '暂无私信内容。' }}</div>
    </section>
  </div>
</template>

<script>
import { request } from '@/utils/request'

export default {
  name: 'InboxView',
  data() {
    return {
      loading: false,
      list: []
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      this.loading = true
      try {
        const data = await request({ url: '/content/posts/inbox', params: { page: 1, page_size: 80 } })
        this.list = (data.items || []).map((item) => ({
          ...item,
          created_text: (item.created_at || '').replace('T', ' ').slice(0, 19)
        }))
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
