<template>
    <div class="post-card">
      <div class="post-header">
        <img :src="avatarUrl" alt="avatar" class="avatar" />
        <div class="user-info">
          <strong>{{ username }}</strong>
          <span>{{ timestamp }}</span>
        </div>
      </div>
      <div class="post-content">
        <p>{{ content }}</p>
          <div style="display: flex;justify-content: center;">
          <img v-if="imageUrl" :src="imageUrl" alt="post image" />
          </div>
      </div>
      <div class="post-footer">
        <button @click="increaseLikeCount" :class="{'liked': isLiked}">
          <span v-if="isLiked">❤️</span>
          <span v-else>🤍</span> 
          {{ likeCount }}
        </button>
       
        <button @click="toggleCommentsVisibility">
          {{ isCommentsVisible ? '隐藏评论' : '查看评论' }}
          💬
          {{ commentCount }}
        </button>
      </div>
  
      <!-- 评论区的过渡动画 -->
      <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
        <div v-if="isCommentsVisible" class="comments-section">
          <div v-for="(comment, index) in comments" :key="index" class="comment">
            <p><strong>{{ comment.username }}:</strong> {{ comment.text }}</p>
          </div>
  
          <!-- 发布评论 -->
          <CommentInput @submitComment="addComment" />
        </div>
      </transition>
    </div>
  </template>
  
  <script>
  import CommentInput from './CommentInput.vue';
  
  export default {
    components: { CommentInput },
    props: {
      avatarUrl: String,
      username: String,
      timestamp: String,
      content: String,
      imageUrl: String,
      likeCount: Number,
      commentCount: Number,
      isCommentsVisible: Boolean,
      comments: Array,  // 接收评论列表
    },
    methods: {
      increaseLikeCount() {
        this.$emit('updateLikeCount', this.likeCount + 1);
        this.isLiked = !this.isLiked;
      },
      increaseCommentCount() {
        this.$emit('updateCommentCount', this.commentCount + 1);
      },
      toggleCommentsVisibility() {
        this.$emit('toggleCommentsVisibility');
      },
      addComment(commentText) {
        this.$emit('addComment', commentText);  // 向父组件传递评论
      },
      beforeEnter(el) {
        el.style.maxHeight = '0';
      },
      enter(el, done) {
        el.offsetHeight;  // 强制触发浏览器重排
        el.style.transition = 'max-height 0.3s ease-in-out';
        el.style.maxHeight = `${el.scrollHeight}px`;
        done();
      },
      leave(el, done) {
        el.style.transition = 'max-height 0.3s ease-in-out';
        el.style.maxHeight = '0';
        done();
      }
    }
  };
  </script>
  
  <style scoped>
button {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    padding: 0;
  }

/* 点赞后的红色样式 */
@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* .liked 类，应用动画 */
.liked {
  color: red;
  animation: scaleAnimation 0.5s ease-in-out;
}

  .post-card {
    opacity: 0.95;
    margin: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
  }
  
  .post-header {
    display: flex;
    align-items: center;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .user-info {
    font-size: 14px;
  }
  
  .post-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  
  .comments-section {
    margin-top: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;  /* 确保在 max-height 动画过程中隐藏溢出的内容 */
  }
  
  .comment {
    margin-bottom: 10px;
  }
  
  /* 过渡效果 */
  .fade-enter-active, .fade-leave-active {
    transition: max-height 0.3s ease-in-out;
  }
  .fade-enter, .fade-leave-to {
    max-height: 0;
  }
  </style>

  