<template>
  <view class="announcement-list">
    <!-- 加载中 -->
    <view v-if="loading" class="loading-wrap">
      <text>加载中...</text>
    </view>

    <!-- 公告列表 -->
    <view v-else-if="announcementList.length > 0" class="list-wrap">
      <view
        v-for="item in announcementList"
        :key="item.id"
        class="announcement-item"
        @click="goDetail(item)"
      >
        <view class="item-header">
          <text class="type-tag" :class="'type-' + item.type">{{ item.typeLabel }}</text>
          <text v-if="item.isTop === 1" class="top-tag">置顶</text>
        </view>
        <view class="item-title">{{ item.title }}</view>
        <view class="item-footer">
          <text class="publish-time">{{ formatTime(item.publishTime) }}</text>
          <text class="read-count">{{ item.readCount }}次阅读</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-wrap">
      <text>暂无公告</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getAnnouncementList, type Announcement } from '../../api/announcement';
import { logger } from '../../utils/logger';

const loading = ref(true);
const announcementList = ref<Announcement[]>([]);

const formatTime = (time: string | null): string => {
  if (!time) return '';
  const date = new Date(time);
  const now = new Date();
  const diff = now.getTime() - date.getTime();

  if (diff < 3600000) {
    const minutes = Math.floor(diff / 60000);
    return minutes <= 1 ? '刚刚' : `${minutes}分钟前`;
  }

  if (date.toDateString() === now.toDateString()) {
    return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }

  const yesterday = new Date(now);
  yesterday.setDate(yesterday.getDate() - 1);
  if (date.toDateString() === yesterday.toDateString()) {
    return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }

  return `${date.getMonth() + 1}月${date.getDate()}日`;
};

const fetchList = async () => {
  loading.value = true;
  try {
    const list = await getAnnouncementList(20);
    announcementList.value = list;
  } catch (error) {
    logger.error('获取公告列表失败:', error);
  } finally {
    loading.value = false;
  }
};

const goDetail = (item: Announcement) => {
  uni.navigateTo({
    url: `/pages/announcementDetail/announcementDetail?id=${item.id}`
  });
};

onMounted(() => {
  fetchList();
});
</script>

<style lang="scss" scoped>
.announcement-list {
  min-height: 100vh;
  background-color: $color-bg-secondary;
  padding: 20rpx;
}

.loading-wrap,
.empty-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  color: $color-text-secondary;
  font-size: 28rpx;
}

.list-wrap {
  .announcement-item {
    background-color: $color-bg-primary;
    border-radius: $radius-md;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: $shadow-sm;

    .item-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      .type-tag {
        font-size: 22rpx;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        margin-right: 12rpx;

        &.type-1 {
          background-color: #e6f4ff;
          color: $color-info;
        }

        &.type-2 {
          background-color: #f6ffed;
          color: $color-success;
        }

        &.type-3 {
          background-color: #fffbe6;
          color: $color-warning;
        }

        &.type-4 {
          background-color: $color-bg-tertiary;
          color: $color-text-secondary;
        }
      }

      .top-tag {
        font-size: 22rpx;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        background-color: #fff1f0;
        color: $color-error;
      }
    }

    .item-title {
      font-size: 32rpx;
      font-weight: 500;
      color: $color-text-primary;
      line-height: 1.4;
      margin-bottom: 16rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .publish-time {
        font-size: 24rpx;
        color: $color-text-secondary;
      }

      .read-count {
        font-size: 24rpx;
        color: $color-text-secondary;
      }
    }
  }
}
</style>
