<template>
  <view class="app-container pb-20">
    <TopBar title="通知消息" show-back />
    
    <view class="px-4 mt-3">
      <view v-if="loading" class="py-10 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>
      
      <view v-else-if="noticeList.length === 0">
        <EmptyState message="暂无通知" />
      </view>
      
      <uni-list v-else border>
        <uni-list-item 
          v-for="notice in noticeList" 
          :key="notice.noticeId"
          :title="notice.title"
          :note="notice.content"
          :right-text="formatDate(notice.publishTime)"
          show-arrow
          @click="goToDetail(notice.noticeId)"
        >
          <template #header>
            <view class="relative mr-3">
              <view class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                <text class="uni-icons uniui-notification-filled text-blue-500"></text>
              </view>
              <view v-if="!notice.read" class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </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 UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import { getNoticeList } from '../../api/notice'
import { formatDate } from '../../utils'

const loading = ref(false)
const noticeList = ref<any[]>([])

function goToDetail(noticeId: number) {
  uni.navigateTo({ url: `/subPackages/pages-common/noticeDetail?id=${noticeId}` })
}

onMounted(async () => {
  loading.value = true
  try {
    const res = await getNoticeList()
    noticeList.value = res.rows || []
  } catch (error) {
    console.error('获取通知列表失败:', error)
  } finally {
    loading.value = false
  }
})
</script>
