<template>
    <div class="post-detail-container">
        <!-- 作者信息栏 -->
        <div class="author-info">
            <img :src="author.avatar" alt="头像" class="author-avatar" />
            <div class="author-details">
                <h3 class="author-name">{{ author.name }}</h3>
                <p class="author-stats">粉丝数：{{ author.followers }}</p>
                <button @click="toggleFollow" class="follow-button">
                    {{ isFollowing ? '取消关注' : '关注' }}
                </button>
            </div>
        </div>

        <!-- 帖子内容 -->
        <div class="post-content">
            <img :src="author.avatar" alt="作者头像" class="post-author-avatar" />
            <h1 class="post-title">{{ postTitle }}</h1>
            <p class="post-body">{{ postContent }}</p>
            <div class="post-stats">
                <span> 热度 {{ postStats.likes }}</span>
                <span> 点赞 {{ postStats.favorites }}</span>
                <span> 评论 {{ postStats.comments }}</span>
            </div>
            <div class="post-time">
                发布时间：{{ postTime }}
            </div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
            <h2 class="comments-title">评论</h2>
            <ul class="comments-list">
                <li v-for="(comment, index) in comments" :key="index" class="comment-item">
                    <img :src="comment.avatar" alt="评论者头像" class="comment-avatar" />
                    <div class="comment-content">
                        <p class="comment-name">{{ comment.name }}</p> <!-- 评论者名字 -->
                        <p class="comment-text">{{ comment.text }}</p>
                        <div class="comment-meta">
                            <span class="comment-time">{{ comment.time }}</span>
                            <span class="comment-likes">赞 {{ comment.likes }}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 发送评论 -->
        <div class="comment-box">
            <textarea
                v-model="newComment"
                placeholder="写下你的评论..."
                class="comment-input"
            ></textarea>
            <button @click="sendComment" class="send-button">发送</button>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
    name: 'PostDetail',
    setup() {
        const route = useRoute();
        const postId = ref(route.params.id);
        const postTitle = ref('');
        const postContent = ref('');
        const newComment = ref('');

        // 作者信息
        const author = ref({
            avatar: require('@/assets/default-avatar/boy_4.png'),
            name: '珈人1号',
            followers: 1234,
        });

        // 帖子统计信息
        const postStats = ref({
            likes: 1200,
            favorites: 300,
            comments: 45,
        });

        // 发布时间
        const postTime = ref('2025年4月20日 14:30');

        // 评论数据
        const comments = ref([
            {
                avatar: require('@/assets/default-avatar/girl_1.png'),
                name: '评论者1', // 新增评论者名字
                text: '这是第一条评论。',
                time: '2025年4月20日 15:00',
                likes: 10,
            },
            {
                avatar: require('@/assets/default-avatar/boy_2.png'),
                name: '评论者2', // 新增评论者名字
                text: '这是第二条评论。',
                time: '2025年4月20日 15:30',
                likes: 5,
            },
        ]);

        const isFollowing = ref(false);

        const toggleFollow = () => {
            isFollowing.value = !isFollowing.value;
        };

        const sendComment = () => {
            if (newComment.value.trim()) {
                comments.value.push({
                    avatar: require('@/assets/default-avatar/boy_1.png'),
                    name: '新评论者', // 评论者名字
                    text: newComment.value,
                    time: new Date().toLocaleString(),
                    likes: 0,
                });
                newComment.value = '';
            }
        };

        onMounted(() => {
            postTitle.value = `帖子标题 ${postId.value}`;
            postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
        });

        return {
            postTitle,
            postContent,
            comments,
            newComment,
            sendComment,
            author,
            postStats,
            postTime,
            isFollowing,
            toggleFollow,
        };
    },
};
</script>

<style scoped>
.post-detail-container {
    display: grid;
    grid-template-areas:
        "post-content author-info"
        "comments-section author-info"
        "comment-box author-info";
    grid-template-columns: 3fr 1fr; /* 左侧内容占 3/4，右侧作者信息占 1/4 */
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    max-width: 1200px; /* 设置页面最大宽度 */
    margin: 0 auto; /* 居中页面并添加左右留白 */
}

.author-info {
    grid-area: author-info;
    display: flex;
    flex-direction: row; /* 水平排列头像和详情 */
    align-items: flex-start;
    background-color: #f5f5f5;
    padding: 20px;
    border: 1px solid #ccc;
    max-height: 200px;
    border-radius: 8px;
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px; /* 与作者详情的间距 */
}

.author-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.author-name {
    font-size: 18px;
    margin: 0;
    }

.author-stats {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
    text-align: left; /* 设置居左 */
}

.follow-button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #5aa76f;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.follow-button:hover {
    background-color: #4a8a5a;
}

.post-content {
    grid-area: post-content;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    position: relative; /* 为绝对定位的元素提供参考 */
}

.post-author-avatar {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ccc;
}

.post-title {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: left; /* 设置居左 */
}

.post-body {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.post-stats {
    display: flex;
    gap: 15px; /* 图标之间的间距 */
    font-size: 14px;
    color: #666;
    margin-top: 20px;
    text-align: left; /* 设置居左 */
}

.post-time {
    position: absolute;
    bottom: 20px; /* 距离底部 20px */
    right: 20px; /* 距离右侧 20px */
    font-size: 12px;
    color: #999;
}

.comments-section {
    grid-area: comments-section;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.comments-title {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: left; /* 设置居左 */
    }

.comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    position: relative;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.comment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comment-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-text {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}

.comment-time {
    font-size: 12px;
    color: #666;
}

.comment-likes {
    font-size: 12px;
    color: #666;
}

.comment-box {
    grid-area: comment-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-input {
    width: 100%;
    height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: none;
    font-size: 14px;
}

.send-button {
    align-self: flex-end;
    padding: 10px 20px;
    background-color: #5aa76f;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.send-button:hover {
    background-color: #4a8a5a;
}

.comment-name {
    
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 5px 0; /* 与评论内容分隔 */
    text-align: left; /* 设置居左 */
    color: #333;
}
</style>