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

    <!-- 公告详情 -->
    <view v-else-if="announcement" class="detail-wrap">
      <!-- 标题 -->
      <view class="detail-title">{{ announcement.title }}</view>

      <!-- 元信息 -->
      <view class="detail-meta">
        <text class="type-tag" :class="'type-' + announcement.type">{{ announcement.typeLabel }}</text>
        <text class="meta-item">{{ announcement.publisherName || '系统管理员' }}</text>
        <text class="meta-item">{{ formatTime(announcement.publishTime) }}</text>
        <text class="meta-item">{{ announcement.readCount }}次阅读</text>
      </view>

      <!-- 封面图 -->
      <image
        v-if="announcement.coverImage"
        :src="announcement.coverImage"
        mode="widthFix"
        class="cover-image"
      />

      <!-- 内容 -->
      <view class="detail-content">{{ announcement.content }}</view>
    </view>

    <!-- 加载失败 -->
    <view v-else class="error-wrap">
      <text>公告不存在或已下线</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getAnnouncementDetail, type Announcement } from '../../api/announcement';
import { logger } from '../../utils/logger';

const loading = ref(true);
const announcement = ref<Announcement | null>(null);
let announcementId = 0;

const formatTime = (time: string | null): string => {
  if (!time) return '';
  const date = new Date(time);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

const fetchDetail = async () => {
  if (!announcementId) return;

  loading.value = true;
  try {
    const detail = await getAnnouncementDetail(announcementId);
    announcement.value = detail;

    uni.setNavigationBarTitle({
      title: detail.title || '公告详情'
    });
  } catch (error) {
    logger.error('获取公告详情失败:', error);
  } finally {
    loading.value = false;
  }
};

onLoad((options?: any) => {
  if (options?.id) {
    announcementId = Number(options.id);
    fetchDetail();
  }
});
</script>

<style lang="scss" scoped>
.announcement-detail {
  min-height: 100vh;
  background-color: $color-bg-primary;
}

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

.detail-wrap {
  padding: 32rpx;

  .detail-title {
    font-size: 40rpx;
    font-weight: 600;
    color: $color-text-primary;
    line-height: 1.4;
    margin-bottom: 24rpx;
  }

  .detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 32rpx;

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

      &.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;
      }
    }

    .meta-item {
      font-size: 24rpx;
      color: $color-text-secondary;
      margin-right: 16rpx;
    }
  }

  .cover-image {
    width: 100%;
    border-radius: 12rpx;
    margin-bottom: 32rpx;
  }

  .detail-content {
    font-size: 30rpx;
    color: $color-text-primary;
    line-height: 1.8;
    white-space: pre-wrap;
  }
}
</style>
