
<template>
  <view class="app-container pb-20">
    <TopBar title="通知公告" show-back />
    
    <!-- 筛选 -->
    <view class="bg-white px-4 py-3 flex gap-2 overflow-x-auto hide-scrollbar">
      <view 
        v-for="type in filterTypes" 
        :key="type.value"
        class="filter-tab"
        :class="{ active: currentFilter === type.value }"
        @click="currentFilter = type.value"
      >
        {{ type.label }}
      </view>
    </view>

    <!-- 通知列表 -->
    <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="filteredNotices.length === 0">
        <EmptyState message="暂无通知" />
      </view>
      
      <view v-else class="gap-y-3">
        <view 
          v-for="notice in filteredNotices" 
          :key="notice.noticeId"
          class="card p-4 cursor-pointer"
          @click="goToDetail(notice.noticeId)"
        >
          <view class="flex justify-between items-start mb-2">
            <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-sm font-semibold text-gray-800">{{ notice.title }}</text>
            </view>
            <view class="tag" :class="getTypeClass(notice.type)">
              {{ getTypeText(notice.type) }}
            </view>
          </view>
          
          <text class="text-xs text-gray-500 line-clamp-2 mb-2 block">{{ notice.content }}</text>
          
          <view class="flex justify-between items-center">
            <text class="text-xs text-gray-400">{{ notice.publisherName }} · {{ formatDate(notice.publishTime) }}</text>
            <text class="text-xs text-gray-400"> {{ notice.readCount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const loading = ref(false)
const notices = ref<any[]>([])
const currentFilter = ref('all')

const filterTypes = [
  { value: 'all', label: '全部' },
  { value: 'system', label: '系统' },
  { value: 'emergency', label: '应急' },
  { value: 'task', label: '任务' },
]

const filteredNotices = computed(() => {
  if (currentFilter.value === 'all') return notices.value
  return notices.value.filter(n => n.type === currentFilter.value)
})

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'
}

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

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