<template>
    <div class="post-container">
        <div class="post" v-for="post in posts" :key="post.id">
            <div class="post-header">
              <img :src="post.avatarurl" alt="" />
              <div class="post-info">
                <h2>{{ post.username }}</h2>
                <h3>{{ post.timestamp }}</h3>
                <p>{{ post.content }}</p>
              </div>
            </div>
            <div class="post-img">
              <img :src="post.imageurl" alt="" />
            </div>
            <div class="post-footer">
              <div class="reactions">
                <div class="Like">
                  <span @click="increaseCount(post.id, 'like')" :class="{'liked': post.isLiked}">
                    <span v-if="post.isLiked">❤️</span>
                    <span v-else>🤍</span>
                  </span>
                  {{ post.likeCount }}
                </div>
                <div class="comment">
                  <span @click="increaseCount(post.id, 'comment')">
                    💬
                  </span>
                  {{ post.commentCount }}
                </div>
              </div>
              <div class="comments">
                <!-- 评论内容可以在这里渲染 -->
              </div>
            </div>
         </div>
    </div>
</template>

<script>
import axios from '@/utils/axiosConfig';

export default {
  name: 'spaceIndex',
  data() {
    return {
      posts: [
        {
          id: 1,
          avatarurl:require("../../assets/pictures/space/post1.png"),
          username: "默认用户名",
          timestamp: "2024-01-01",
          content: "默认内容",
          imageurl: require("../../assets/pictures/space/post2.png"),
          likeCount: 0,
          commentCount: 0,
          isLiked: false,
        }
      ],
    };
  },
  methods: {
    async fetchPosts() {
      try {
        const response = await axios.get(`http://10.133.6.46:8082/loveforest/posts/userid=1`);
        this.posts = response.map(post => ({
          id: post.postid,
          avatarurl:post.avatarurl,
          username: post.username,
          timestamp: post.timestamp,
          content: post.content,
          imageurl: post.imageurl,
          likeCount: post.likecount,
          commentCount: post.commentcount,
          isLiked: false,
        }));
      } catch (error) {
        console.error("获取帖子信息失败:", error);
        // 如果需要，可在此处重置为默认帖子
      }
    },
    increaseCount(postId, type) {
      const post = this.posts.find(p => p.id === postId);
      if (type === 'like') {
        post.isLiked =!post.isLiked;
        post.likeCount += post.isLiked? 1 : -1;
      } 
    },
  },
  mounted() {
    this.fetchPosts();
  },
};
</script>

<style scoped>

.post-container {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  background: rgba(255, 255, 255, 0.8);
  height: 680px;
  margin: 30px auto;
  border-radius: 30px;
  width: 750px;
  padding: 20px;
  overflow-y: auto;
}
.post {
  margin-left: 0;
  margin-top: 150px;
  height: 150px;
  width: 680px;
  position: relative; /* 使得子元素可以相对移动 */
  margin-bottom: 70px;
}

.post-header {
  display: flex;
  margin-top:-160px;
  margin-left: 30px;
  padding: 10px;
  position: relative;
}

.post-header::before {
  content: '';
  position: absolute;
  left: 30px; /* 根据需要调整左侧位置 */
  top: -10px; /* 调整横线的位置 */
  width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
  height: 1px; /* 横线的高度 */
  background-color: #d1cccc; /* 横线颜色 */
}

.post-header img {
    margin-top: 10px;
    width: 56px; 
    height: 56px;
    border-radius: 50%; 
}
.post-info h2{
  font-weight: normal;
  font-size: 20px;
  padding-left: 10px;
  margin-top: 9px;
}

.post-info h3 {
  margin-top: -12px;
  padding-left: 12px;
  font-size: 14px;
  font-weight: normal;
  font-family: Italic;
  font-style: ABeeZee;
  white-space: nowrap;
}

.post-info p {
  margin: 0;
  font-size: 18px;
  white-space: nowrap;
  margin-left: 80px;
}

.post-img {
  display: flex;
  left: 220px;
  width: 329px;
  height: 163px;
  position: relative;
}

.post-footer {
  padding: 10px;
}

/* 图标的样式 */
.reactions span {
  font-size: 24px;
  cursor: pointer;
  margin: 0 2px;
  display: inline-block;
  transition: transform 0.3s;
}

/* 点赞图标选中时的样式 */
.liked {
  color: red; /* 红色表示已点赞 */
  transform: scale(1.2); /* 点击时稍微放大 */
}

/* 图标悬停时的效果 */
.reactions span:hover {
  transform: scale(1.1); /* 悬停时稍微放大 */
}

/* 增加点赞和评论数值的可读性 */
.reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  padding: 6px 10px;
}

.comment{
  display: flex;
  align-items: center;
  margin-right: 120px;
}

.Like{
  margin-left: 220px;
}
/* .reactions span img {
  padding-left: 230px;
  padding-top: 10px;
} */

.reactions .count {
  font-size: 21px;
  color: #666;
  padding-left: 8px;
}

</style>