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

    <view v-if="loading" class="py-20 text-center">
      <text class="empty-text">加载中...</text>
    </view>

    <view v-else-if="notice" class="px-4 pt-3">
      <view class="glass-card p-5">
        <view class="flex items-start justify-between mb-3">
          <view class="flex items-center flex-1 min-w-0 mr-2">
            <view v-if="notice.priority === 3" class="priority-dot mr-2"></view>
            <text class="notice-title truncate">{{ notice.title }}</text>
          </view>
          <text class="type-tag flex-shrink-0" :class="getTypeClass(notice.type)">
            {{ getTypeText(notice.type) }}
          </text>
        </view>

        <view class="meta-row">
          <text class="meta-text">发布人: {{ notice.publisherName }}</text>
          <text class="meta-text mt-1 block">发布时间: {{ formatDate(notice.publishTime) }}</text>
          <text class="meta-text mt-1 block">阅读量: {{ notice.readCount }}</text>
        </view>

        <view class="notice-body">
          <text class="body-p">{{ notice.content }}</text>
        </view>
      </view>
    </view>

    <view v-else class="px-4 pt-3">
      <EmptyState message="通知不存在" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import { getNoticeDetail } from '../../api/notice'
import { formatDate } from '../../utils'

const loading = ref(true)
const notice = ref<any>(null)

const props = defineProps<{
  id?: string
}>()

function getTypeText(type: string) {
  const map: Record<string, string> = {
    system: '系统',
    emergency: '应急',
    task: '任务',
  }
  return map[type] || type
}

function getTypeClass(type: string) {
  const map: Record<string, string> = {
    system: 'type-tag-green',
    emergency: 'type-tag-red',
    task: 'type-tag-gold',
  }
  return map[type] || 'type-tag-gray'
}

onMounted(async () => {
  const noticeId = props.id || uni.getStorageSync('currentNoticeId')
  if (!noticeId) {
    loading.value = false
    return
  }

  try {
    const res = await getNoticeDetail(Number(noticeId))
    notice.value = res
  } catch (error) {
    console.error('获取通知详情失败:', error)
  } finally {
    loading.value = false
  }
})
</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 {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ef4444;
  flex-shrink: 0;
}

.meta-row {
  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;
}

.type-tag {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.type-tag-green {
  color: #368f6f;
  background-color: rgba(164, 216, 152, 0.24);
}

.type-tag-red {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.type-tag-gold {
  color: #b7791f;
  background-color: rgba(251, 211, 141, 0.25);
}

.type-tag-gray {
  color: #6b7280;
  background-color: #f3f4f6;
}

.empty-text {
  font-size: 13px;
  color: #9ca3af;
}
</style>
