<template>
  <div class="post-detail-container">
    <el-card class="post-detail-card">
      <div class="post-header">
        <h2>{{ post.title }}</h2>
        <div class="post-meta">
          <span class="author">
            <i class="el-icon-user"></i>
            {{ post.userName }}
          </span>
          <span class="time">
            <i class="el-icon-time"></i>
            {{ post.createTime | formatDate }}
          </span>
          <el-tag size="small" type="info">{{ post.categoryName }}</el-tag>
        </div>
      </div>

      <div
        class="post-content"
        style="
          padding: 20px;
          background: linear-gradient(145deg, #f1f1f1, #ffffff);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
        "
      >
        <!-- 使用 line-height 和字间距优化排版 -->
        <p
          style="
            font-size: 16px;
            line-height: 1.6;
            letter-spacing: 0.5px;
            text-align: justify;
            text-justify: inter-word;
          "
        >
          {{ post.content }}
        </p>
      </div>
    </el-card>

    <el-card class="comment-card">
      <!-- 回复区域 -->
      <div class="reply-area">
        <el-input
          v-model="newReply"
          placeholder="请输入回复内容"
          :rows="4"
          type="textarea"
        ></el-input>
        <el-button type="primary" @click="submitReply" :loading="isReplying"
          >回复</el-button
        >
      </div>
    </el-card>

    <!-- 评论列表 -->
    <div class="comments-list">
      <el-card
        v-for="comment in comments"
        :key="comment.id"
        class="comment-card"
      >
        <div class="comment-header">
          <span class="comment-author"><img :src="comment.userAvatar" /></span
          ><span>{{ comment.userName }}</span>
          <span class="comment-time">{{
            comment.createTime | formatDate
          }}</span>
        </div>
        <div
          class="comment-warper"
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: baseline;
          "
        >
          <div class="comment-content">
            <p>{{ comment.content }}</p>
          </div>
          <i class="el-icon-delete" @click="deleteComment(comment.id)"></i>
        </div>
      </el-card>

      <!-- 分页器 -->
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalComments"
        layout="total, prev, pager, next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getPostDetail,
  getReplies,
  createReply,
  deleteReply,
} from "@/api/forum"; // 引入接口方法
export default {
  name: "PostDetail",
  data() {
    return {
      post: {}, // 当前帖子详情
      comments: [], // 当前帖子的所有回复
      newReply: "", // 新回复内容
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的回复数
      totalComments: 0, // 回复总数
      isReplying: false, // 提交回复时的加载状态
    };
  },
  created() {
    this.fetchPostDetail();
    this.getReplies();
  },
  methods: {
    // 获取帖子详情
    async fetchPostDetail() {
      try {
        const res = await getPostDetail(this.$route.params.id); // 获取帖子详情
        if (res.status === 200) {
          this.post = res.data; // 保存帖子详情
        } else {
          this.$message.error(res.message || "获取帖子详情失败");
        }
      } catch (error) {
        this.$message.error("获取帖子详情失败");
      }
    },
    deleteComment(id) {
      deleteReply(id)
        .then((res) => {
          if (res.status === 200) {
            this.$message.success("删除成功");
            this.getReplies();
          } else {
            this.$message.error(res.message || "删除失败");
          }
        })
        .catch((error) => {
          this.$message.error("删除失败");
        });
    },
    // 获取评论列表
    async getReplies() {
      const res = await getReplies(
        this.$route.params.id,
        this.currentPage,
        this.pageSize
      );
      if (res.status === 200) {
        this.comments = res.data;
        this.totalComments = res.data.total;
      } else {
        this.$message.error(res.message || "获取评论失败");
      }
    },

    // 提交回复
    async submitReply() {
      if (!this.newReply.trim()) {
        this.$message.warning("回复内容不能为空");
        return;
      }
      this.isReplying = true;
      try {
        const res = await createReply(
          this.$route.params.id,
          this.newReply,
          this.$store.state.user.id || localStorage.getItem("userId")
        ); // 提交回复
        if (res.status === 200) {
          this.$message.success("回复成功");
          this.newReply = ""; // 清空输入框
          this.getReplies(); // 刷新评论列表
        } else {
          this.$message.error(res.message || "回复失败");
        }
      } catch (error) {
        this.$message.error("回复失败");
      } finally {
        this.isReplying = false;
      }
    },

    // 分页切换
    handlePageChange(page) {
      this.currentPage = page;
      this.getReplies(); // 更新分页时重新获取回复
    },
  },
};
</script>

<style scoped>
.post-detail-container {
  padding: 20px;
}

.post-detail-card {
  margin-bottom: 20px;
}

.post-header {
  margin-bottom: 10px;
}

.post-meta {
  font-size: 14px;
  color: #999;
}

.post-content {
  margin-top: 20px;
  font-size: 16px;
}

.reply-area {
  margin-top: 20px;
}

.comments-list {
  margin-top: 40px;
}

.comment-card {
  margin-bottom: 15px;
}

.comment-header {
  font-size: 14px;
  color: #555;
}

.comment-content {
  margin-top: 10px;
  font-size: 15px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.comment-warper:hover {
  background-color: #f5f5f5;
  /* border-radius: 5px; */
  /* padding: 10px; */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
