package com.example.springboot.controller;


import com.example.springboot.entity.Forum.*;
import com.example.springboot.service.ForumService;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/forum")
public class ForumController {

    @Resource
    private ForumService forumService;

    // 发布帖子
    @PostMapping("/post")
    public String createPost(@RequestBody Post post) {
        int result = forumService.createPost(post);
        return result > 0 ? "Post created successfully" : "Post creation failed";
    }

    // 删除帖子（普通用户需要在业务层验证是否本人）
    @DeleteMapping("/post/{id}")
    public String deletePost(@PathVariable Integer id) {
        int result = forumService.deletePost(id);
        return result > 0 ? "Post deleted successfully" : "Post deletion failed";
    }

    // 修改帖子
    @PutMapping("/post")
    public String updatePost(@RequestBody Post post) {
        int result = forumService.updatePost(post);
        return result > 0 ? "Post updated successfully" : "Post update failed";
    }

    // 根据帖子ID获取帖子详情
    @GetMapping("/post/{id}")
    public Post getPostById(@PathVariable Integer id) {
        return forumService.getPostById(id);
    }

    // 模糊查询帖子标题
    @GetMapping("/posts")
    public List<Post> searchPostsByTitle(@RequestParam String title) {
        return forumService.searchPostsByTitle(title);
    }

    // 新增评论
    @PostMapping("/comment")
    public String createComment(@RequestBody Comment comment) {
        int result = forumService.createComment(comment);
        return result > 0 ? "Comment added successfully" : "Comment adding failed";
    }

    // 删除评论
    @DeleteMapping("/comment/{id}")
    public String deleteComment(@PathVariable Integer id) {
        int result = forumService.deleteComment(id);
        return result > 0 ? "Comment deleted successfully" : "Comment deletion failed";
    }

    // 修改评论
    @PutMapping("/comment")
    public String updateComment(@RequestBody Comment comment) {
        int result = forumService.updateComment(comment);
        return result > 0 ? "Comment updated successfully" : "Comment update failed";
    }

    // 获取某帖子的评论列表（包含回复）
    @GetMapping("/comments/{postId}")
    public List<Comment> getCommentsByPostId(@PathVariable Integer postId) {
        return forumService.getCommentsByPostId(postId);
    }

    // 点赞帖子
    @PostMapping("/post/like")
    public String likePost(@RequestBody LikePost likePost) {
        int result = forumService.createLikePost(likePost);
        return result > 0 ? "点赞成功" : "已经点赞过或点赞失败";
    }

    // 取消点赞
    @DeleteMapping("/post/like")
    public String unlikePost(@RequestParam Integer userId, @RequestParam Integer postId) {
        int result = forumService.deleteLikePost(userId, postId);
        return result > 0 ? "取消点赞成功" : "取消点赞失败";
    }

    // 收藏帖子
    @PostMapping("/post/favorite")
    public String favoritePost(@RequestBody FavoritePost favoritePost) {
        int result = forumService.createFavoritePost(favoritePost);
        return result > 0 ? "收藏成功" : "收藏失败或已收藏";
    }

    // 取消收藏
    @DeleteMapping("/post/favorite")
    public String unfavoritePost(@RequestParam Integer userId, @RequestParam Integer postId) {
        int result = forumService.deleteFavoritePost(userId, postId);
        return result > 0 ? "取消收藏成功" : "取消收藏失败";
    }

    // 举报帖子
    @PostMapping("/post/report")
    public String reportPost(@RequestBody ReportPost reportPost) {
        int result = forumService.createReportPost(reportPost);
        return result > 0 ? "举报成功" : "举报失败";
    }

    // 管理员查看举报
    @GetMapping("/post/reports/{postId}")
    public List<ReportPost> getReportsByPostId(@PathVariable Integer postId) {
        return forumService.getReportPostsByPostId(postId);
    }

    @GetMapping("/user/{userId}/posts")
    public List<Post> getPostsByUserId(@PathVariable Integer userId) {
        List<Post> posts = forumService.getPostsByUserId(userId);

        // 这里可以查询并设置每个帖子的点赞数，点赞和收藏状态，比如（简单示例，效率不错的话可DAO一次搞定）：
        posts.forEach(post -> {
            int likeCount = forumService.getLikeCountByPostId(post.getId());
            post.setLikeCount(likeCount);

            // 查询当前用户是否点赞/收藏，改成传参可改
            // 这里暂时userId是查询者，请改成当前登录用户id
            LikePost likePost = forumService.getLikePost(userId, post.getId());
            post.setLiked(likePost != null);

            FavoritePost favPost = forumService.getFavoritePost(userId, post.getId());
            post.setFavorited(favPost != null);
        });

        return posts;
    }
}
package com.example.springboot.entity.Forum;


import java.time.LocalDateTime;

// 帖子实体
public class Post {
    private Integer id;
    private Integer userId;
    private String title;
    private String content;
    private LocalDateTime createdAt;
    private LocalDateTime updatedAt;
    private String username;
    private Integer likeCount;   // 点赞数
    private Boolean liked;       // 是否被当前用户点赞
    private Boolean favorited;   // 是否被当前用户收藏

    // getter和setter


    public Integer getLikeCount() {
        return likeCount;
    }

    public void setLikeCount(Integer likeCount) {
        this.likeCount = likeCount;
    }

    public Boolean getLiked() {
        return liked;
    }

    public void setLiked(Boolean liked) {
        this.liked = liked;
    }

    public Boolean getFavorited() {
        return favorited;
    }

    public void setFavorited(Boolean favorited) {
        this.favorited = favorited;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public Integer getUserId() {
        return userId;
    }
    public void setUserId(Integer userId) {
        this.userId = userId;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public LocalDateTime getCreatedAt() {
        return createdAt;
    }
    public void setCreatedAt(LocalDateTime createdAt) {
        this.createdAt = createdAt;
    }
    public LocalDateTime getUpdatedAt() {
        return updatedAt;
    }
    public void setUpdatedAt(LocalDateTime updatedAt) {
        this.updatedAt = updatedAt;
    }
}
package com.example.springboot.mapper;

import com.example.springboot.entity.Forum.*;


import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface ForumMapper {
    // --- 帖子相关 ---

    // 新增帖子
    int insertPost(Post post);

    // 删除帖子（管理员可删任意，用户删自己的可通过业务层判断）
    int deletePostById(@Param("id") Integer id);

    // 更新帖子（只改标题和内容）
    int updatePost(Post post);

    // 根据id查询帖子
    Post selectPostById(@Param("id") Integer id);

    // 模糊搜索帖子标题，支持分页
    List<Post> selectPostsByTitleLike(@Param("title") String title);


    // --- 评论相关 ---

    // 新增评论
    int insertComment(Comment comment);

    // 删除评论（只能删除自己评论，管理员权限由业务层判断）
    int deleteCommentById(@Param("id") Integer id);

    // 修改评论内容
    int updateComment(Comment comment);

    // 查询某帖子下的所有评论（含回复）
    List<Comment> selectCommentsByPostId(@Param("postId") Integer postId);


    // --- 评论相关 ---

    // 点赞相关
    int insertLikePost(LikePost likePost);

    // 删除点赞
    int deleteLikePost(@Param("userId") Integer userId, @Param("postId") Integer postId);

    // 查询某用户是否已点赞该帖子
    LikePost selectLikePost(@Param("userId") Integer userId, @Param("postId") Integer postId);

    // 收藏相关
    int insertFavoritePost(FavoritePost favoritePost);

    int deleteFavoritePost(@Param("userId") Integer userId, @Param("postId") Integer postId);

    FavoritePost selectFavoritePost(@Param("userId") Integer userId, @Param("postId") Integer postId);

    // 举报相关
    int insertReportPost(ReportPost reportPost);

    // 查询某帖子的举报记录（供管理员查看）
    List<ReportPost> selectReportPostsByPostId(@Param("postId") Integer postId);

    List<Post> selectPostsByUserId(@Param("userId") Integer userId);

    int selectLikeCountByPostId(@Param("postId") Integer postId);
}
package com.example.springboot.service;


import com.example.springboot.entity.Forum.*;
import com.example.springboot.mapper.ForumMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service
public class ForumService {

    @Resource
    private ForumMapper forumMapper;

    // 帖子相关服务
    public int createPost(Post post) {
        return forumMapper.insertPost(post);
    }

    public int deletePost(Integer postId) {
        return forumMapper.deletePostById(postId);
    }

    public int updatePost(Post post) {
        return forumMapper.updatePost(post);
    }

    public Post getPostById(Integer postId) {
        return forumMapper.selectPostById(postId);
    }

    public List<Post> searchPostsByTitle(String title) {
        return forumMapper.selectPostsByTitleLike(title);
    }

    // 评论相关服务
    public int createComment(Comment comment) {
        return forumMapper.insertComment(comment);
    }

    public int deleteComment(Integer commentId) {
        return forumMapper.deleteCommentById(commentId);
    }

    public int updateComment(Comment comment) {
        return forumMapper.updateComment(comment);
    }

    public List<Comment> getCommentsByPostId(Integer postId) {
        return forumMapper.selectCommentsByPostId(postId);
    }

    // 点赞相关
    public int createLikePost(LikePost likePost) {
        // 先查询是否已有点赞，防止重复
        LikePost exist = forumMapper.selectLikePost(likePost.getUserId(), likePost.getPostId());
        if (exist != null) return 0;
        return forumMapper.insertLikePost(likePost);
    }

    public int deleteLikePost(Integer userId, Integer postId) {
        return forumMapper.deleteLikePost(userId, postId);
    }

    public LikePost getLikePost(Integer userId, Integer postId) {
        return forumMapper.selectLikePost(userId, postId);
    }

    // 收藏相关
    public int createFavoritePost(FavoritePost favoritePost) {
        FavoritePost exist = forumMapper.selectFavoritePost(favoritePost.getUserId(), favoritePost.getPostId());
        if (exist != null) return 0;
        return forumMapper.insertFavoritePost(favoritePost);
    }

    public int deleteFavoritePost(Integer userId, Integer postId) {
        return forumMapper.deleteFavoritePost(userId, postId);
    }

    public FavoritePost getFavoritePost(Integer userId, Integer postId) {
        return forumMapper.selectFavoritePost(userId, postId);
    }

    // 举报相关
    public int createReportPost(ReportPost reportPost) {
        // 可以做举报重复校验，暂略
        return forumMapper.insertReportPost(reportPost);
    }

    public List<ReportPost> getReportPostsByPostId(Integer postId) {
        return forumMapper.selectReportPostsByPostId(postId);
    }

    public List<Post> getPostsByUserId(Integer userId) {
        return forumMapper.selectPostsByUserId(userId);
    }

    public int getLikeCountByPostId(Integer postId) {
        return forumMapper.selectLikeCountByPostId(postId);
    }
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.springboot.mapper.ForumMapper">

    <!-- 插入帖子 -->
    <insert id="insertPost" parameterType="com.example.springboot.entity.Forum.Post" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO post(user_id,title,content,created_at,updated_at)
        VALUES(#{userId}, #{title}, #{content}, NOW(), NOW())
    </insert>

    <!-- 删除帖子 -->
    <delete id="deletePostById" parameterType="int">
        DELETE FROM post WHERE id = #{id}
    </delete>

    <!-- 更新帖子 -->
    <update id="updatePost" parameterType="com.example.springboot.entity.Forum.Post">
        UPDATE post
        SET title = #{title}, content = #{content}, updated_at = NOW()
        WHERE id = #{id}
    </update>

    <!-- 根据id查询帖子（带用户名） -->
    <select id="selectPostById" parameterType="int" resultType="com.example.springboot.entity.Forum.Post">
        SELECT
            p.id,
            p.user_id AS userId,
            u.username,
            p.title,
            p.content,
            p.created_at AS createdAt,
            p.updated_at AS updatedAt
        FROM post p
                 LEFT JOIN user u ON p.user_id = u.id
        WHERE p.id = #{id}
    </select>

    <!-- 模糊搜索帖子的标题 -->
    <select id="selectPostsByTitleLike" parameterType="string" resultType="com.example.springboot.entity.Forum.Post">
        SELECT
            p.id,
            p.user_id AS userId,
            u.username,
            p.title,
            p.content,
            p.created_at AS createdAt,
            p.updated_at AS updatedAt
        FROM post p
                 LEFT JOIN user u ON p.user_id = u.id
        WHERE p.title LIKE CONCAT('%', #{title}, '%')
        ORDER BY p.created_at DESC
    </select>

    <!-- 新增评论 -->
    <insert id="insertComment" parameterType="com.example.springboot.entity.Forum.Comment" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO comment(post_id, user_id, parent_comment_id, content, created_at, updated_at)
        VALUES(#{postId}, #{userId}, #{parentCommentId}, #{content}, NOW(), NOW())
    </insert>

    <!-- 删除评论 -->
    <delete id="deleteCommentById" parameterType="int">
        DELETE FROM comment WHERE id = #{id}
    </delete>

    <!-- 修改评论内容 -->
    <update id="updateComment" parameterType="com.example.springboot.entity.Forum.Comment">
        UPDATE comment
        SET content = #{content}, updated_at = NOW()
        WHERE id = #{id}
    </update>

    <!-- 查询某帖子下所有评论（带用户名） -->
    <select id="selectCommentsByPostId" parameterType="int" resultType="com.example.springboot.entity.Forum.Comment">
        SELECT
            c.id,
            c.post_id AS postId,
            c.user_id AS userId,
            u.username,
            c.parent_comment_id AS parentCommentId,
            c.content,
            c.created_at AS createdAt,
            c.updated_at AS updatedAt
        FROM comment c
                 LEFT JOIN user u ON c.user_id = u.id
        WHERE c.post_id = #{postId}
        ORDER BY c.created_at ASC
    </select>

    <!-- 点赞 -->
    <insert id="insertLikePost" parameterType="com.example.springboot.entity.Forum.LikePost" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO like_post(user_id, post_id, created_at) VALUES(#{userId}, #{postId}, NOW())
    </insert>

    <delete id="deleteLikePost" parameterType="map">
        DELETE FROM like_post WHERE user_id = #{userId} AND post_id = #{postId}
    </delete>

    <select id="selectLikePost" parameterType="map" resultType="com.example.springboot.entity.Forum.LikePost">
        SELECT * FROM like_post WHERE user_id = #{userId} AND post_id = #{postId} LIMIT 1
    </select>

    <!-- 收藏 -->
    <insert id="insertFavoritePost" parameterType="com.example.springboot.entity.Forum.FavoritePost" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO favorite_post(user_id, post_id, created_at) VALUES(#{userId}, #{postId}, NOW())
    </insert>

    <delete id="deleteFavoritePost" parameterType="map">
        DELETE FROM favorite_post WHERE user_id = #{userId} AND post_id = #{postId}
    </delete>

    <select id="selectFavoritePost" parameterType="map" resultType="com.example.springboot.entity.Forum.FavoritePost">
        SELECT * FROM favorite_post WHERE user_id = #{userId} AND post_id = #{postId} LIMIT 1
    </select>

    <!-- 举报 -->
    <insert id="insertReportPost" parameterType="com.example.springboot.entity.Forum.ReportPost" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO report_post(reporter_id, post_id, reason, created_at) VALUES(#{reporterId}, #{postId}, #{reason}, NOW())
    </insert>

    <select id="selectReportPostsByPostId" parameterType="int" resultType="com.example.springboot.entity.Forum.ReportPost">
        SELECT * FROM report_post WHERE post_id = #{postId} ORDER BY created_at DESC
    </select>

    <!-- 查询某用户的所有帖子 -->
    <select id="selectPostsByUserId" parameterType="int" resultType="com.example.springboot.entity.Forum.Post">
        SELECT
            p.id,
            p.user_id AS userId,
            u.username,
            p.title,
            p.content,
            p.created_at AS createdAt,
            p.updated_at AS updatedAt
        FROM post p
                 LEFT JOIN user u ON p.user_id = u.id
        WHERE p.user_id = #{userId}
        ORDER BY p.created_at DESC
    </select>

    <!-- 查询某帖子的点赞数量 -->
    <select id="selectLikeCountByPostId" parameterType="int" resultType="int">
        SELECT COUNT(*) FROM like_post WHERE post_id = #{postId}
    </select>

</mapper>
<template>
  <div class="my-posts">
    <h2>我的帖子</h2>
    <button @click="fetchMyPosts" class="btn-refresh">刷新</button>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <div v-if="posts.length === 0" class="no-posts">还没有发表任何帖子</div>
      <ul class="posts-list">
        <li v-for="post in posts" :key="post.id" class="post-item">
          <div class="post-info">
            <router-link :to="`/post/${post.id}`" class="post-title">{{ post.title }}</router-link>
            <span class="post-date">发布时间: {{ formatDateTime(post.createdAt) }}</span>
          </div>
          <div class="post-actions">
            <button
                @click="toggleLike(post)"
                :class="['btn-like', { active: post.liked }]"
                title="点赞 / 取消点赞"
            >
              {{ post.liked ? "已点赞" : "点赞" }} ({{ post.likeCount }})
            </button>
            <button
                @click="toggleFavorite(post)"
                :class="['btn-favorite', { active: post.favorited }]"
                title="收藏 / 取消收藏"
            >
              {{ post.favorited ? "已收藏" : "收藏" }}
            </button>
            <button @click="deletePost(post)" class="btn-delete" title="删除帖子">删除</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import { useRouter } from "vue-router";

const userId = localStorage.getItem("userId");
const router = useRouter();

if (!userId) {
  ElMessage.warning("请先登录");
  router.push("/login"); // 需要你的登录路由路径
}

const posts = ref([]);
const loading = ref(false);

const formatDateTime = (isoString) => {
  if (!isoString) return "";
  return dayjs(isoString).format("YYYY年MM月DD日 HH:mm:ss");
};

// 获取我的帖子列表，同时带上点赞状态和收藏状态和点赞数
const fetchMyPosts = async () => {
  if (!userId) return;
  loading.value = true;
  try {
    // 先获取我的帖子列表
    const res = await axios.get(`http://localhost:8080/forum/user/${userId}/posts`);
    const myPosts = res.data;

    // 批量获取点赞和收藏状态（如果接口支持批量查询，改成批量请求更好；这里示范单条请求合并）

    // 这里假设接口只支持单个帖子获取点赞和收藏状态，批量请求示例：
    // 你可以根据实际后端接口优化请求方式

    // 并发请求点赞和收藏状态
    const statusPromises = myPosts.map(async (post) => {
      // 点赞状态
      try {
        const likeRes = await axios.get(`http://localhost:8080/forum/post/like/status`, {
          params: { userId, postId: post.id },
        });
        post.liked = likeRes.data.liked;
      } catch {
        post.liked = false;
      }
      // 收藏状态
      try {
        const favRes = await axios.get(`http://localhost:8080/forum/post/favorite/status`, {
          params: { userId, postId: post.id },
        });
        post.favorited = favRes.data.favorited;
      } catch {
        post.favorited = false;
      }
      // 点赞数
      post.likeCount = post.likeCount || 0;
      return post;
    });

    const postsWithStatus = await Promise.all(statusPromises);
    posts.value = postsWithStatus;
  } catch (error) {
    ElMessage.error("加载我的帖子失败");
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 删除帖子
const deletePost = async (post) => {
  try {
    await ElMessageBox.confirm("确定删除此帖子吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    await axios.delete(`http://localhost:8080/forum/post/${post.id}`);
    ElMessage.success("删除成功");
    // 重新加载列表
    fetchMyPosts();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
    }
  }
};

// 取消点赞或点赞
const toggleLike = async (post) => {
  if (!userId) {
    ElMessage.warning("请先登录");
    return;
  }
  try {
    if (!post.liked) {
      await axios.post(`http://localhost:8080/forum/post/like`, { userId, postId: post.id });
      post.liked = true;
      post.likeCount++;
      ElMessage.success("点赞成功");
    } else {
      await axios.delete(`http://localhost:8080/forum/post/like`, {
        params: { userId, postId: post.id },
      });
      post.liked = false;
      post.likeCount--;
      ElMessage.success("取消点赞成功");
    }
  } catch {
    ElMessage.error("点赞操作失败");
  }
};

// 取消收藏或收藏
const toggleFavorite = async (post) => {
  if (!userId) {
    ElMessage.warning("请先登录");
    return;
  }
  try {
    if (!post.favorited) {
      await axios.post(`http://localhost:8080/forum/post/favorite`, { userId, postId: post.id });
      post.favorited = true;
      ElMessage.success("收藏成功");
    } else {
      await axios.delete(`http://localhost:8080/forum/post/favorite`, {
        params: { userId, postId: post.id },
      });
      post.favorited = false;
      ElMessage.success("取消收藏成功");
    }
  } catch {
    ElMessage.error("收藏操作失败");
  }
};

onMounted(() => {
  fetchMyPosts();
});
</script>

<style scoped>
.my-posts {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h2 {
  color: #303133;
  margin-bottom: 10px;
  font-weight: 700;
}

.btn-refresh {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 20px;
  transition: background-color 0.3s;
}
.btn-refresh:hover {
  background-color: #66b1ff;
}

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

.post-item {
  background: white;
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.post-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.post-title {
  font-weight: 600;
  font-size: 18px;
  color: #409eff;
  text-decoration: none;
}

.post-title:hover {
  text-decoration: underline;
}

.post-date {
  font-size: 13px;
  color: #909399;
  margin-left: 10px;
  white-space: nowrap;
}

.post-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.post-actions button {
  padding: 6px 14px;
  border-radius: 18px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  background-color: #f0f2f5;
  color: #606266;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-actions button:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.btn-like.active {
  color: #f56c6c;
  font-weight: 700;
  background-color: #ffccc7;
  border-color: #ff4d4f;
  box-shadow: 0 0 6px rgb(255 77 79 / 0.8);
}

.btn-favorite.active {
  color: #faad14;
  font-weight: 700;
  background-color: #fff7e6;
  border-color: #ffc53d;
  box-shadow: 0 0 6px rgb(255 197 0 / 0.8);
}

.btn-delete {
  color: #f5222d;
  border-color: #ffccc7;
  background-color: #fff1f0;
  font-weight: 600;
}

.btn-delete:hover {
  background-color: #ff4d4f;
  color: white;
  border-color: #a8071a;
  box-shadow: 0 0 6px rgb(168 7 26 / 0.9);
}

.loading {
  text-align: center;
  font-size: 16px;
  color: #909399;
}

.no-posts {
  font-size: 16px;
  color: #606266;
  text-align: center;
  margin-top: 30px;
}
</style>
<template>
  <div class="post-detail">
    <button @click="goBack" class="back-btn">返回主页</button>

    <h2 class="post-title">{{ post?.title }}</h2>
    <p class="post-info">
      作者: {{ post?.username || post?.userId }} |
      发布时间: {{ formatDateTime(post?.createdAt) }}
    </p>
    <p class="post-content" style="white-space: pre-wrap">{{ post?.content }}</p>

    <!-- 点赞 收藏 举报 按钮 -->
    <div class="post-actions">
      <button @click="toggleLike" :class="{ active: liked }" class="btn-like">
        {{ liked ? "已点赞" : "点赞" }} ({{ likeCount }})
      </button>
      <button @click="toggleFavorite" :class="{ active: favorited }" class="btn-favorite">
        {{ favorited ? "已收藏" : "收藏" }}
      </button>
      <button @click="openReportDialog" class="btn-report">
        举报
      </button>
    </div>

    <hr />

    <h3>评论区</h3>

    <div v-if="loadingComments" class="loading">加载评论中...</div>
    <div v-else>
      <ul class="comments-list">
        <li v-for="comment in rootComments" :key="comment.id" class="comment-item">
          <div class="comment-main">
            <div class="comment-header">
              <b>{{ comment.username || ("用户ID: " + comment.userId) }}</b>
              <span v-if="comment.createdAt" class="comment-time"
              >评论时间 {{ formatDateTime(comment.createdAt) }}</span
              >
              <button
                  v-if="comment.userId == userId"
                  @click="deleteComment(comment.id)"
                  class="btn-delete"
                  title="删除评论"
              >
                删除
              </button>

              <button @click="toggleReplyBox(comment.id)" class="btn-reply">
                {{ replyingTo === comment.id ? "取消回复" : "回复" }}
              </button>

              <button @click="toggleRepliesCollapse(comment.id)" class="btn-collapse">
                {{ repliesCollapsed[comment.id] ? "展开回复" : "收起回复" }}
              </button>
            </div>

            <p class="comment-content" style="white-space: pre-wrap">{{ comment.content }}</p>

            <div v-if="replyingTo === comment.id" class="reply-box">
              <textarea
                  v-model="replyContent"
                  rows="2"
                  placeholder="回复内容"
              ></textarea>
              <button class="btn-submit" @click="submitReply(comment.id)">提交回复</button>
            </div>
          </div>

          <ul
              v-if="!repliesCollapsed[comment.id] && flattenReplies[comment.id]?.length"
              class="replies-list"
          >
            <li
                v-for="reply in flattenReplies[comment.id]"
                :key="reply.id"
                class="comment-reply"
            >
              <div class="comment-header">
                <b>{{ reply.username || ("用户ID: " + reply.userId) }}</b>
                <span class="comment-time"
                >回复时间 {{ formatDateTime(reply.createdAt) }}</span
                >

                <span class="reply-to" v-if="reply.parentCommentId">
                  回复 <b>{{ rootCommentUsernames[comment.id] }}</b>
                </span>

                <button
                    v-if="reply.userId == userId"
                    @click="deleteComment(reply.id)"
                    class="btn-delete"
                    title="删除回复"
                >
                  删除
                </button>

                <button @click="toggleReplyBox(reply.id)" class="btn-reply">
                  {{ replyingTo === reply.id ? "取消回复" : "回复" }}
                </button>
              </div>

              <p class="comment-content" style="white-space: pre-wrap">
                {{ reply.content }}
              </p>

              <div v-if="replyingTo === reply.id" class="reply-box">
                <textarea
                    v-model="replyContent"
                    rows="2"
                    placeholder="回复内容"
                ></textarea>
                <button class="btn-submit" @click="submitReply(reply.id)">
                  提交回复
                </button>
              </div>
            </li>
          </ul>
        </li>
      </ul>

      <hr />

      <h4>发表评论</h4>
      <textarea
          v-model="newComment"
          rows="3"
          style="width: 100%"
          placeholder="请输入评论内容"
          class="new-comment-textarea"
      ></textarea>
      <button class="btn-submit" @click="submitComment">提交评论</button>
    </div>

    <el-dialog v-model="reportDialogVisible" title="举报帖子" width="400px">
      <textarea
          v-model="reportReason"
          placeholder="请输入举报原因"
          rows="4"
          style="width: 100%"
      ></textarea>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reportDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReport">提交举报</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";

const formatDateTime = (isoString) => {
  if (!isoString) return "";
  return dayjs(isoString).format("YYYY年MM月DD日 HH:mm:ss");
};

const route = useRoute();
const router = useRouter();

const postId = Number(route.params.id);
const post = ref(null);
const comments = ref([]);
const loadingComments = ref(false);
const userId = localStorage.getItem("userId");

const newComment = ref("");
const replyingTo = ref(null);
const replyContent = ref("");
const repliesCollapsed = ref({});

// 点赞收藏举报相关
const liked = ref(false);
const likeCount = ref(0);
const favorited = ref(false);
const reportDialogVisible = ref(false);
const reportReason = ref("");

const fetchPost = async () => {
  try {
    const res = await axios.get(`http://localhost:8080/forum/post/${postId}`);
    post.value = res.data;
    likeCount.value = res.data.likeCount || 0;
  } catch (error) {
    ElMessage.error("加载帖子详情失败");
    router.back();
  }
};

const fetchComments = async () => {
  loadingComments.value = true;
  try {
    const res = await axios.get(`http://localhost:8080/forum/comments/${postId}`);
    comments.value = res.data;
  } catch (error) {
    ElMessage.error("加载评论失败");
  } finally {
    loadingComments.value = false;
  }
};

const fetchLikeStatus = async () => {
  if (!userId) return;
  try {
    const res = await axios.get(`http://localhost:8080/forum/post/like/status`, {
      params: { userId, postId }
    });
    liked.value = res.data.liked;
  } catch (error) {
    console.error("查询点赞状态失败", error);
  }
};

const fetchFavoriteStatus = async () => {
  if (!userId) return;
  try {
    const res = await axios.get(`http://localhost:8080/forum/post/favorite/status`, {
      params: { userId, postId }
    });
    favorited.value = res.data.favorited;
  } catch (error) {
    console.error("查询收藏状态失败", error);
  }
};

const toggleRepliesCollapse = (commentId) => {
  repliesCollapsed.value[commentId] = !repliesCollapsed.value[commentId];
};

const goBack = () => {
  router.back();
};

const submitComment = async () => {
  const content = newComment.value.trim();
  if (!content) {
    ElMessage.warning("请输入评论内容");
    return;
  }
  try {
    await axios.post("http://localhost:8080/forum/comment", {
      postId,
      userId,
      content,
      parentCommentId: null,
    });
    ElMessage.success("评论成功");
    newComment.value = "";
    fetchComments();
  } catch (error) {
    ElMessage.error("发表评论失败");
  }
};

const toggleReplyBox = (commentId) => {
  if (replyingTo.value === commentId) {
    replyingTo.value = null;
    replyContent.value = "";
  } else {
    replyingTo.value = commentId;
    replyContent.value = "";
  }
};

const submitReply = async (parentCommentId) => {
  const content = replyContent.value.trim();
  if (!content) {
    ElMessage.warning("请输入回复内容");
    return;
  }
  try {
    await axios.post("http://localhost:8080/forum/comment", {
      postId,
      userId,
      content,
      parentCommentId,
    });
    ElMessage.success("回复成功");
    replyingTo.value = null;
    replyContent.value = "";
    fetchComments();
  } catch (error) {
    ElMessage.error("回复失败");
  }
};

const deleteComment = async (commentId) => {
  try {
    await ElMessageBox.confirm("确定删除此评论吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    await axios.delete(`http://localhost:8080/forum/comment/${commentId}`);
    ElMessage.success("删除成功");
    fetchComments();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
    }
  }
};

const toggleLike = async () => {
  if (!userId) {
    ElMessage.warning("请先登录");
    return;
  }
  try {
    if (!liked.value) {
      await axios.post("http://localhost:8080/forum/post/like", { userId, postId });
      liked.value = true;
      likeCount.value++;
      ElMessage.success("点赞成功");
    } else {
      await axios.delete("http://localhost:8080/forum/post/like", { params: { userId, postId } });
      liked.value = false;
      likeCount.value--;
      ElMessage.success("取消点赞成功");
    }
  } catch {
    ElMessage.error("点赞操作失败");
  }
};

const toggleFavorite = async () => {
  if (!userId) {
    ElMessage.warning("请先登录");
    return;
  }
  try {
    if (!favorited.value) {
      await axios.post("http://localhost:8080/forum/post/favorite", { userId, postId });
      favorited.value = true;
      ElMessage.success("收藏成功");
    } else {
      await axios.delete("http://localhost:8080/forum/post/favorite", { params: { userId, postId } });
      favorited.value = false;
      ElMessage.success("取消收藏成功");
    }
  } catch {
    ElMessage.error("收藏操作失败");
  }
};

const openReportDialog = () => {
  if (!userId) {
    ElMessage.warning("请先登录");
    return;
  }
  reportReason.value = "";
  reportDialogVisible.value = true;
};

const submitReport = async () => {
  if (!reportReason.value.trim()) {
    ElMessage.warning("请输入举报原因");
    return;
  }
  try {
    await axios.post("http://localhost:8080/forum/post/report", {
      reporterId: userId,
      postId,
      reason: reportReason.value,
    });
    ElMessage.success("举报成功，管理员会尽快处理");
    reportDialogVisible.value = false;
  } catch {
    ElMessage.error("举报失败");
  }
};

// 计算一级评论（parentCommentId === null）
const rootComments = computed(() =>
    comments.value
        .filter((c) => !c.parentCommentId)
        .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt))
);

// flattenReplies: 二级及以上回复折叠到一级评论
const flattenReplies = computed(() => {
  const map = {};
  rootComments.value.forEach((root) => {
    map[root.id] = [];
  });
  comments.value.forEach((c) => {
    if (c.parentCommentId) {
      let parentId = c.parentCommentId;
      let current = comments.value.find((cc) => cc.id === parentId);
      while (current && current.parentCommentId) {
        parentId = current.parentCommentId;
        current = comments.value.find((cc) => cc.id === parentId);
      }
      if (map[parentId]) {
        map[parentId].push(c);
      }
    }
  });
  Object.values(map).forEach((list) =>
      list.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt))
  );
  return map;
});

const rootCommentUsernames = computed(() => {
  const map = {};
  rootComments.value.forEach((root) => {
    map[root.id] = root.username || `用户ID: ${root.userId}`;
  });
  return map;
});

onMounted(() => {
  fetchPost();
  fetchComments();
  fetchLikeStatus();
  fetchFavoriteStatus();
});
</script>

<style scoped>
.post-detail {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}

.back-btn {
  background: none;
  border: none;
  color: #409eff;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 0;
  transition: color 0.3s;
}
.back-btn:hover {
  color: #66b1ff;
}

.post-title {
  margin-bottom: 8px;
  color: #303133;
  font-weight: 700;
}

.post-info {
  margin-bottom: 20px;
  color: #909399;
  font-size: 14px;
}

.post-content {
  background: white;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 30px;
  white-space: pre-wrap;
  line-height: 1.5;
  box-shadow: inset 0 0 8px rgb(0 0 0 / 0.03);
}

.post-actions {
  margin: 10px 0 20px;
  display: flex;
  gap: 12px;
}
.post-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background-color: #f0f2f5;
  border: 1px solid #dcdfe6;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.btn-like.active,
.btn-favorite.active {
  color: #f56c6c;
  font-weight: bold;
}

.comments-list,
.replies-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.comment-item {
  background: white;
  border-radius: 6px;
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

.comment-main {
  position: relative;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 8px;
}

.comment-header b {
  color: #409eff;
  font-weight: 600;
}

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

.reply-to {
  color: #606266;
  font-size: 12px;
  margin-left: 4px;
}

.comment-content {
  font-size: 15px;
  color: #606266;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  padding-left: 4px;
}

.btn-delete,
.btn-reply,
.btn-submit,
.btn-collapse {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  transition: background-color 0.3s;
  user-select: none;
}

.btn-delete {
  color: #f56c6c;
}
.btn-delete:hover {
  background-color: #fde2e2;
}

.btn-reply:hover,
.btn-submit:hover,
.btn-collapse:hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}

.reply-box {
  margin-top: 8px;
}

.reply-box textarea {
  width: 100%;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  resize: vertical;
  min-height: 42px;
}

.reply-box .btn-submit {
  margin-top: 6px;
  font-weight: 600;
}

.replies-list {
  margin-top: 10px;
  padding-left: 30px;
  border-left: 2px solid #ebeef5;
}

.comment-reply {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.03);
}

.new-comment-textarea {
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  padding: 8px 10px;
  font-size: 15px;
  resize: vertical;
}

.btn-submit {
  background-color: #409eff;
  color: white;
  border-radius: 4px;
  padding: 8px 18px;
  font-weight: 600;
  transition: background-color 0.3s;
}
.btn-submit:hover {
  background-color: #66b1ff;
}

.loading {
  font-size: 16px;
  color: #909399;
  text-align: center;
  padding: 20px 0;
}

.post-actions button:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.post-actions button.active {
  background-color: #bae7ff;
  border-color: #40a9ff;
  color: #096dd9;
  box-shadow: 0 0 6px rgb(24 144 255 / 0.6);
}

/* 点赞按钮单独颜色 */
.btn-like {
  color: #fa541c;
  border-color: #ffa39e;
}
.btn-like.active {
  background-color: #ffccc7;
  border-color: #ff4d4f;
  color: #a8071a;
  box-shadow: 0 0 6px rgb(255 77 79 / 0.8);
}

/* 收藏按钮单独颜色 */
.btn-favorite {
  color: #faad14;
  border-color: #ffe58f;
}
.btn-favorite.active {
  background-color: #fff7e6;
  border-color: #ffc53d;
  color: #ad6800;
  box-shadow: 0 0 6px rgb(255 197 0 / 0.8);
}

/* 举报按钮采用警告色 */
.btn-report {
  color: #f5222d;
  border-color: #ffccc7;
}
.btn-report:hover {
  background-color: #fff1f0;
  border-color: #ff4d4f;
  color: #a8071a;
  box-shadow: 0 0 6px rgb(255 77 79 / 0.8);
}
</style>
我的帖子页面没有分类显示哪些帖子是我点赞过的，哪些帖子是我收藏的，哪些是我自己的。