<template>
    <div class="post-page-container">
        <!-- 左侧分类按钮 -->
        <div class="category-buttons">
            <button
                v-for="(category, index) in categories"
                :key="index"
                class="category-button"
                :class="{ active: selectedCategory === category }"
                @click="selectCategory(category)"
            >
                {{ category }}
            </button>
        </div>

        <!-- 右侧帖子列表 -->
        <div class="post-list">
            <div
                v-for="(post, index) in postListStore.posts"
                :key="index"
                class="post-item"
                @click="goToPostDetail(post.id)"
            >
                <div class="post-header">
                    <img :src="post.avatar" :alt="头像" class="post-avatar" />
                    <h3 class="post-title">{{ post.title }}</h3>
                </div>
                <p class="post-summary">{{ post.summary }}</p>
                <div class="post-stats">
                    <span>👁 {{ post.viewCount }}</span>
                    <span>🗨 {{ post.comments }}</span>
                    <span>♥ {{ post.likes }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="js" name="PostPage">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { usePostListStore } from '@/stores/postlist.js';

// 分类名与id映射
const categoryMap = [
  { name: '全部', id: null },
  { name: '校园活动', id: 1 },
  { name: '学习', id: 2 },
  { name: '娱乐', id: 3 },
  { name: '二手交易', id: 4 }
];
const categories = ref(categoryMap.map(item => item.name));
const selectedCategory = ref('全部');
const postListStore = usePostListStore();
const router = useRouter();

// 分类切换
const selectCategory = async (categoryName) => {
  selectedCategory.value = categoryName;
  postListStore.resetList();
  // 找到对应的id
  const categoryObj = categoryMap.find(item => item.name === categoryName);
  await postListStore.getList(categoryObj ? categoryObj.id : null);
};

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

// 滚动触底加载
const handleScroll = async () => {
  const scrollContainer = document.documentElement;
  if (
    scrollContainer.scrollTop + window.innerHeight >= scrollContainer.scrollHeight - 10 &&
    !postListStore.loading &&
    !postListStore.finished
  ) {
    const categoryObj = categoryMap.find(item => item.name === selectedCategory.value);
    await postListStore.getList(categoryObj ? categoryObj.id : null);
  }
};

onMounted(async () => {
  // 首次加载
  await postListStore.getList();
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

// 分类切换时自动滚动到顶部
watch(selectedCategory, () => {
  window.scrollTo(0, 0);
});
</script>

<style scoped>
/* 页面整体布局 */
.post-page-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
    gap: 20px;
}

/* 左侧分类按钮样式 */
.category-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 200px;
}

.category-button {
    padding: 10px 20px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.category-button:last-child {
    border-bottom: 1px solid #ccc;
}

.category-button.active {
    background-color: #5aa76f;
    color: white;
    border-color: #5aa76f;
}

.category-button:hover {
    background-color: #e0e0e0;
}

/* 右侧帖子列表样式 */
.post-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    flex: 1;
}

.post-item {
    position: relative; /* 设置为相对定位 */
    width: 300px;
    height: 150px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    transition: box-shadow 0.3s;
}

.post-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 帖子头部样式 */
.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 设置为圆形 */
    object-fit: cover; /* 确保图片按比例填充 */
}

.post-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

/* 帖子摘要样式 */
.post-summary {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

/* 帖子统计信息样式 */
.post-stats {
    display: flex;
    gap: 15px; /* 图标之间的间距 */
    font-size: 12px;
    color: #999;
    position: absolute; /* 绝对定位 */
    bottom: 10px; /* 距离卡片底部 10px */
    left: 15px; /* 距离卡片左侧 15px */
}
</style>