<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 filteredPosts"
                :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.likes }}</span>
                    <span>评论 {{ post.comments }}</span>
                    <span>赞 {{ post.favorites }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
export default {
    name: 'PostPage',
    setup() {
        const categories = ref(['全部', '学习', '娱乐', '二手交易']);
        const selectedCategory = ref('全部');
        const posts = ref([
            {
                id: 1,
                category: '学习',
                title: '如何高效学习？',
                summary: '分享一些学习技巧...',
                avatar: require('@/assets/default-avatar/boy_1.png'),
                likes: 1200,
                comments: 10,
                favorites: 100,
            },
            {
                id: 2,
                category: '娱乐',
                title: '最近的热门电影推荐',
                summary: '看看这些电影吧...',
                avatar: require('@/assets/default-avatar/girl_1.png'),
                likes: 800,
                comments: 5,
                favorites: 50,
            },
            {
                id: 3,
                category: '二手交易',
                title: '出售二手书籍',
                summary: '价格优惠，欢迎咨询...',
                avatar: require('@/assets/default-avatar/boy_2.png'),
                likes: 300,
                comments: 2,
                favorites: 20,
            },
            {
                id: 4,
                category: '学习',
                title: '考研经验分享',
                summary: '考研路上的一些心得...',
                avatar: require('@/assets/default-avatar/girl_3.png'),
                likes: 1500,
                comments: 20,
                favorites: 200,
            },
        ]);

        const filteredPosts = ref(posts.value);
        const router = useRouter();
        const selectCategory = (category) => {
            selectedCategory.value = category;
            filteredPosts.value =
                category === '全部'
                    ? posts.value
                    : posts.value.filter((post) => post.category === category);
        };

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

        return {
            categories,
            selectedCategory,
            filteredPosts,
            selectCategory,
            goToPostDetail,
        };
    },
};
</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>