
<template>
  <view class="app-container pb-20">
    <TopBar title="通知详情" show-back />
    
    <view v-if="loading" class="py-20 text-center">
      <text class="text-gray-400">加载中...</text>
    </view>
    
    <view v-else-if="notice" class="px-4 py-4 gap-y-4">
      <view class="card p-4">
        <view class="flex justify-between items-start mb-3">
          <view class="flex items-center">
            <view v-if="notice.priority === 3" class="w-2 h-2 bg-red-500 rounded-full mr-2"></view>
            <text class="text-lg font-semibold text-gray-800">{{ notice.title }}</text>
          </view>
          <view class="tag" :class="getTypeClass(notice.type)">
            {{ getTypeText(notice.type) }}
          </view>
        </view>
        
        <view class="text-sm text-gray-500 mb-4">
          <text class="block">发布人: {{ notice.publisherName }}</text>
          <text class="block mt-1">发布时间: {{ formatDate(notice.publishTime) }}</text>
          <text class="block mt-1">阅读量: {{ notice.readCount }}</text>
        </view>
        
        <view class="text-sm text-gray-800 leading-relaxed">
          {{ notice.content }}
        </view>
      </view>
    </view>
    
    <view v-else class="px-4 py-6">
      <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: 'tag-blue',
    emergency: 'tag-red',
    task: 'tag-green',
  }
  return map[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>
