<template>
  <div class="post-card">
    <div class="post-header">
      <img :src="avatarUrl" alt="avatar" class="avatar" />
      <div class="user-info">
        <strong>{{ username }}</strong>

        <button class="followsbutto followsbuttonani" @click="followsbutton" :class="{ active: followsbuttonActive }">
          <div v-if="followsbuttonActive">
            你关注了他
          </div>

          <div v-else>
            关注
          </div>
        </button>

        <span>{{ timestamp }}</span>



      </div>
      <div v-if="isfamilystory" class="ribbon-8">
        <span>
          家族故事
        </span>
      </div>
    </div>

    <div class="post-content">
      <p>{{ content }}</p>
      <div style="display: flex;justify-content: center;">
        <img class="postimage" 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.userid}}:</strong> {{ comment.content }}</p>
        </div>

        <!-- 发布评论 -->
        <CommentInput @submitComment="addComment" />
      </div>
    </transition>
  </div>
</template>

<script>
  import CommentInput from './CommentInput.vue';
  import axios from 'axios';

  export default {


    components: { CommentInput },
    props: {
      postid: Number,
      postuserid: Number,
      userid: Number,
      avatarUrl: String,
      username: String,
      timestamp: String,
      content: String,
      imageUrl: String,
      likeCount: Number,
      commentCount: Number,
      isCommentsVisible: Boolean,
      isfamilystory: Boolean,
      userlikelist: {
        type: Array,
        default: () => []
      },
      myfollows: {
        type: Array,
        default: () => []  // 如果没有传递，默认值为空数组
      },
      comments: Array,  // 接收评论列表
    },
    created() {

      if (this.userlikelist.some(follow => follow.postid === this.postid)) {

        this.isLiked = true;
      }
      if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {
        this.followsbuttonActive = true;
      }

    },



    computed: {


    },
    data() {
      return {
        isActive: false,
        isLiked: false,
        isClicked: false,
        followsbuttonActive: false

      };
    },
    methods: {

      async followsbutton() {//关注按钮
        // 设置为 active，触发动画
        const useride = this.userid;

        if (this.followsbuttonActive == false) {
          try {

            const response = await axios.post(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
            if (response.data === "关注成功！") {

              this.$message.success(response.data);
              this.followsbuttonActive = true;
            }
            else {
              this.$message.error(response.data);
            }

          } catch (error) {

            this.$message.error("关注失败");
            console.log(error);
          }

          this.$emit('followsbutton');
        }
        else {
          try {

            const response = await axios.delete(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
            if (response.data === "取消关注成功！") {
              this.$message.success(response.data);
              this.followsbuttonActive = false;

            }
            else {
              this.$message.error(response.data);
            }

          } catch (error) {

            this.$message.error("取消关注失败");
            console.log(error);
          }

          this.$emit('followsbutton');
        }
      },

      triggerAnimation() {
        this.isActive = true; // 添加动画类
        // 动画完成后移除 active 类，恢复到原始状态
        setTimeout(() => {
          this.isActive = false; // 移除动画类
        }, 300); // 300ms 后移除，确保与动画时长一致
      },

      async increaseLikeCount() {//点赞按钮
        if (!this.isLiked) {//假如没点赞
          try {
            const response = await axios.post(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
            if (response.data === "点赞成功！") {
              this.$message.success(response.data);
              this.$emit('updateLikeCount', this.likeCount + 1);
              this.isLiked = !this.isLiked;

            }
            else {
              this.$message.error(response.data);
            }
          } catch (error) {

            this.$message.error("点赞失败");
            console.log(error);
          }
        }
        else {//假如已经点赞
          try {
            const response = await axios.delete(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
            if (response.data === "取消点赞成功！") {

              this.$message.error("取消点赞成功");
              this.$emit('updateLikeCount', this.likeCount - 1);
              this.isLiked = !this.isLiked;

            }
            else {
              this.$message.error(response.data);
            }
          } catch (error) {

            this.$message.error("点赞失败");
            console.log(error);
          }

        }
      },
      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>
  .postimage {
    max-width: 600px;
    max-height: 600px;
    width: auto;
    /* 保持宽高比 */
    height: auto;
    /* 保持宽高比 */
  }

  .ribbon-8 {
    position: absolute;
    right: -2%;
    padding: 2px 10px;
    width: 10%;
    background-color: #FE4E96;
    font-size: 15px;
    color: #fff;
  }

  .ribbon-8::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    border-top: 4px solid #FE4E96;
    border-right: 4px solid transparent;
  }

  button {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    outline: none;
    padding: 0;
  }

  .followsbutto {
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    width: 70px;
    height: 30px;
    line-height: 30px;
    /* 修改 line-height 为与高度一致 */
    border: none;
    border-radius: 30px;
    background: #FE4E96;
    color: #fff;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    /* 确保动画效果不超出按钮 */
    font-size: 14px;
    /* 可根据需要调整字体大小 */
  }


  .followsbuttonani {
    z-index: 1;
  }

  .followsbuttonani::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scaleX(0);
    transform-origin: 50%;
    background: #FEB2D7;
    border-radius: 5px;
    transition: transform .3s ease-out;
  }

  .followsbuttonani.active::before {
    transform: scaleX(1);
  }

  /* 点赞后的红色样式 */
  @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 {
    position: relative;
    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>