<template>
  <view class="sub-page">
    <TopBar title="通知详情" show-back />

    <view class="px-4 pt-3">
      <view v-if="notice" class="glass-card p-5">
        <text class="notice-title">{{ notice.title }}</text>
        <view class="meta-row">
          <text class="meta-text">{{ notice.publisherName }} · {{ formatDate(notice.publishTime, 'YYYY-MM-DD HH:mm') }}</text>
        </view>
        <view class="notice-body">
          <text class="body-p">{{ notice.content }}</text>
        </view>
      </view>

      <EmptyState v-else message="公告不存在" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import { getNoticeDetail } from '../../api/notice'
import { formatDate } from '../../utils'

const notice = ref<any>(null)

onLoad(async (options) => {
  if (!options?.id) return
  try {
    notice.value = await getNoticeDetail(Number(options.id))
  } catch (error) {
    console.error('获取通知详情失败:', error)
  }
})
</script>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 24px;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

.notice-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.meta-row {
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(164, 216, 152, 0.18);
}

.meta-text {
  font-size: 12px;
  color: #9ca3af;
}

.notice-body {
  padding-top: 12px;
}

.body-p {
  display: block;
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
}
</style>
