<template>
    <div class="notice-board">
        <h2 class="notice-title">公告栏</h2>
        <div class="notice-list">
            <button class="arrow-button left-arrow" @click="prevImage">←</button>
            <div class="notice-item">
                <img
                    v-if="images.length"
                    :src="images[currentIndex].src"
                    :alt="images[currentIndex].alt"
                    class="notice-image"
                    style="cursor:pointer"
                    @click="goToPostDetail(images[currentIndex].postId)"
                />
                <div v-else class="notice-empty">暂无活动公告</div>
            </div>
            <button class="arrow-button right-arrow" @click="nextImage">→</button>
        </div>
        <div class="indicator-container">
            <button
                v-for="(image, index) in images"
                :key="index"
                class="indicator-button"
                :class="{ active: currentIndex === index }"
                @click="goToImage(index)"
            ></button>
        </div>
    </div>
</template>

<script setup lang="js" name="NoticeBoard">
import { ref, onMounted, onUnmounted } from 'vue';
import request from '@/utils/request';
import { useRouter } from 'vue-router';

const images = ref([]);
const currentIndex = ref(0);
const router = useRouter();

// 获取校园活动分类前5个帖子图片
const fetchImages = async () => {
  try {
    // 假设后端接口支持 size 参数
    const lastVal = Date.now();
    const offset = 0;
    const size = 5;
    let url = `/post/list?lastVal=${lastVal}&offset=${offset}&size=${size}`;
    url += `&categoryId=1`;
    const res = await request.get(url);
    if (res.code === 200 && res.data.records) {
      images.value = res.data.records
        .filter(post => post.image) // 只要有图片的帖子
        .map(post => ({
          src: post.image,
          alt: post.title || '校园活动',
          postId: post.id
        }));
    }
  } catch (e) {
    images.value = [];
  }
};

//跳转到帖子详情
const goToPostDetail = (postId) => {
  if (postId) {
    router.push({ name: 'PostDetail', params: { id: postId } });
  }
};

// 切换到下一张图片
const nextImage = () => {
  if (images.value.length)
    currentIndex.value = (currentIndex.value + 1) % images.value.length;
};

// 切换到上一张图片
const prevImage = () => {
  if (images.value.length)
    currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length;
};

// 跳转到指定图片
const goToImage = (index) => {
  currentIndex.value = index;
};

// 定时器
let interval = null;

onMounted(async () => {
  await fetchImages();
  interval = setInterval(nextImage, 5000);
});

onUnmounted(() => {
  clearInterval(interval);
});
</script>

<style scoped>
.notice-board {
    position: relative;
    background-color: #5aa76f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 顶部对齐 */
    width: 500px; /* 固定宽度 */
    height: 350px; /* 固定高度 */
    overflow: hidden; /* 防止图片溢出 */
    padding: 10px; /* 内边距 */
    box-sizing: border-box; /* 包括内边距在宽高内 */
}

.notice-title {
    font-size: 24px;
    color: white;
    text-align: center;
    margin: 0; /* 去掉默认外边距 */
    padding-bottom: 10px; /* 与图片保持间距 */
}

.notice-list {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: calc(100% - 60px); /* 除去标题和指示器的高度 */
}

.notice-item {
    text-align: center;
    width: 100%;
    height: 100%;
}

.notice-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 让图片适应公告栏 */
    border-radius: 8px;
}

.notice-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 36px;
}

.arrow-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
}

.left-arrow {
    left: 10px; /* 左侧按钮距离公告栏左边缘 10px */
}

.right-arrow {
    right: 10px; /* 右侧按钮距离公告栏右边缘 10px */
}

.arrow-button:hover {
    background-color: rgba(255, 255, 255, 1);
}

.indicator-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    gap: 8px; /* 按钮之间的间距 */
}

.indicator-button {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

.indicator-button.active {
    background-color: rgba(255, 255, 255, 1); /* 高亮当前按钮 */
}

.indicator-button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
</style>