<template>
  <view class="app-container pb-20">
    <TopBar title="通知公告" show-back />
    
    <!-- 筛选标签 - 使用 uni-segmented-control -->
    <uni-segmented-control 
      :current="currentFilterIndex" 
      :values="filterLabels"
      style-type="text"
      active-color="#4f8ef7"
      @clickItem="onFilterChange"
    />

    <!-- 通知列表 -->
    <view class="mt-2">
      <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>
      
      <uni-list v-else border>
        <uni-swipe-action
          v-for="notice in filteredNotices"
          :key="notice.noticeId"
          :actions="[{text: '标记已读', color: '#4f8ef7', key: 'read'}]"
          @click="onSwipeAction(notice.noticeId, $event)"
        >
          <uni-list-item 
            :title="notice.title"
            :note="notice.publisherName + ' · ' + formatDate(notice.publishTime)"
            :right-text="getTypeText(notice.type)"
            show-arrow
            @click="goToDetail(notice.noticeId)"
          >
            <template #header>
              <view class="w-10 h-10 rounded-xl flex items-center justify-center mr-3" :class="getTypeBgClass(notice.type)">
                <text class="uni-icons text-lg" :class="getTypeIconClass(notice.type)"></text>
              </view>
            </template>
          </uni-list-item>
        </uni-swipe-action>
      </uni-list>
    </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 UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import UniSwipeAction from '../../components/uni-swipe-action/uni-swipe-action.vue'
import UniSegmentedControl from '../../components/uni-segmented-control/uni-segmented-control.vue'
import { getNoticeList } from '../../api/notice'
import { formatDate } from '../../utils'

const loading = ref(false)
const notices = ref<any[]>([])
const currentFilterIndex = ref(0)

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

const filterLabels = filterTypes.map(t => t.label)

const filteredNotices = computed(() => {
  const filterValue = filterTypes[currentFilterIndex.value].value
  if (filterValue === 'all') return notices.value
  return notices.value.filter(n => n.type === filterValue)
})

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

function getTypeBgClass(type: string) {
  const map: Record<string, string> = {
    system: 'bg-blue-50',
    emergency: 'bg-red-50',
    task: 'bg-green-50',
  }
  return map[type] || 'bg-gray-50'
}

function getTypeIconClass(type: string) {
  const map: Record<string, string> = {
    system: 'uniui-sound text-blue-500',
    emergency: 'uniui-notification-filled text-red-500',
    task: 'uniui-flag text-green-500',
  }
  return map[type] || 'uniui-sound text-gray-400'
}

function onFilterChange(index: number) {
  currentFilterIndex.value = index
}

function onSwipeAction(noticeId: number, action: { key?: string; text?: string }) {
  if (action.key === 'read') {
    uni.showToast({ title: '已标记已读', icon: 'success' })
  }
}

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>
