<template>
  <view class="notice-container">
    <NavBar title="系统公告" @back="goBack" />

    <!-- 公告列表 -->
    <view class="notice-list" v-if="list.length > 0">
      <view class="notice-item" v-for="(item, index) in list" :key="index" @click="viewDetail(item)">
        <view class="item-header">
          <text class="item-title">{{ item.title || '-' }}</text>
          <text class="status-tag" :style="getStatusStyle(item.status)">{{ fmtDictName('notice_status', item.status) }}</text>
        </view>
        <view class="item-content">
          <text class="content-preview">{{ truncateText(item.content || '', 100) }}</text>
        </view>
        <view class="item-footer">
          <text class="footer-author">{{ item.adminUserName || '系统' }}</text>
          <text class="footer-time">{{ formatTime(item.createTime) }}</text>
        </view>
        <view class="item-period" v-if="item.startTime || item.endTime">
          <text class="period-text">{{ formatTime(item.startTime) }} ~ {{ formatTime(item.endTime) }}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="list.length > 0">
      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
      <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
      <text class="load-more-text" v-else>没有更多数据了</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="list.length === 0 && !loading">
      <view class="empty-icon-wrapper">
        <AppIcon name="megaphone" size="48" color="#BFBFBF" />
      </view>
      <text class="empty-text">暂无公告</text>
    </view>

    <!-- 加载中 -->
    <view class="loading-state" v-if="loading && list.length === 0">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { getNoticeList } from '../../api/system.js'
import { formatTime, fmtDictName, getDictColor } from '../../utils/index.js'
import { loadDicts } from '../../utils/dict.js'

const list = ref([])
const loading = ref(true)
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const loadMoreStatus = ref('more')

const goBack = () => uni.navigateBack()

const getStatusStyle = (status) => {
  const color = getDictColor('notice_status', status)
  if (color) return { color, backgroundColor: `${color}1A` }
  return {}
}

const truncateText = (text, maxLen) => {
  if (!text) return ''
  return text.length > maxLen ? text.substring(0, maxLen) + '...' : text
}

const loadData = async (isLoadMore = false) => {
  if (!isLoadMore) {
    page.value = 1
    list.value = []
    hasMore.value = true
    loadMoreStatus.value = 'more'
  } else {
    loadMoreStatus.value = 'loading'
  }
  loading.value = true
  try {
    const params = { pageNum: page.value, pageSize: pageSize.value }
    const res = await getNoticeList(params)
    if (res && res.code === 200) {
      const data = res.data
      const records = data.records || data.list || data
      const total = data.total || 0
      const totalPages = Math.ceil(total / pageSize.value)
      hasMore.value = page.value < totalPages
      loadMoreStatus.value = hasMore.value ? 'more' : 'noMore'
      if (isLoadMore) {
        list.value = [...list.value, ...records]
        page.value++
      } else {
        list.value = records
        page.value = 2
      }
    }
  } catch (e) {
    console.error('加载公告列表失败:', e)
  } finally {
    loading.value = false
  }
}

const loadMore = () => { if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') loadData(true) }

onReachBottom(() => { loadMore() })

const viewDetail = (item) => {
  uni.showModal({
    title: item.title || '公告详情',
    content: item.content || '暂无内容',
    showCancel: false,
    confirmText: '关闭'
  })
}

onMounted(async () => { await loadDicts(); loadData() })
</script>

<style scoped>
.notice-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 100rpx;
}
.notice-list {
  padding: 20rpx;
}
.notice-item {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.notice-item:active {
  transform: translateY(-4rpx);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}
.item-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
  flex: 1;
  margin-right: 16rpx;
}
.status-tag {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
  flex-shrink: 0;
}
.content-preview {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
}
.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #F0F0F0;
}
.footer-author {
  font-size: 24rpx;
  color: #C6171E;
}
.footer-time {
  font-size: 24rpx;
  color: #999999;
}
.item-period {
  margin-top: 8rpx;
}
.period-text {
  font-size: 22rpx;
  color: #CCCCCC;
}

.load-more { display: flex; justify-content: center; padding: 30rpx 0; }
.load-more-text { font-size: 26rpx; color: #999999; }

.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
.empty-text { font-size: 28rpx; color: #999999; }

.loading-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 0; }
.loading-text { font-size: 28rpx; color: #999999; margin-top: 20rpx; }
</style>
