<template>
  <div v-if="visible" class="modal">
    <h2>{{ title }}</h2>
    <button @click="closeModal" class="close-button">关闭</button>
    <div v-for="comment in comments" :key="comment.comment_id" class="comment">
      <button @click="handleDelete(comment)" class="delete-button">删除</button>
      <p class="post-title"><strong>文章标题:</strong> {{ comment.post_title }}</p>
      <p class="comment-content"><strong>评论内容:</strong> {{ comment.content }}</p>
      <p class="comment-author"><strong>评论者:</strong> {{ comment.username }}</p>
      <p class="comment-time"><strong>评论时间:</strong> {{ comment.updated_at }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';
import { useLoginStore } from '@/stores/Login';
import axios from 'axios';
import { ElMessageBox } from 'element-plus';

const props = defineProps<{
  title: string;
  visible: boolean;
  comments: Array<{
    comment_id: number;
    post_id: number;
    user_id: number;
    content: string;
    updated_at: string;
    username: string;
    post_title: string;
  }>;
}>();

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
}>();

const loginStore = useLoginStore();

const closeModal = () => {
  emit('update:visible', false);
};

const handleDelete = (comment: {
  comment_id: number;
  post_id: number;
  user_id: number;
  content: string;
  updated_at: string;
  username: string;
  post_title: string;
}) => {
  console.log("当前登录用户的用户名:",loginStore.userInfo.username);
  console.log("当前评论用户的用户名:",String(comment.username));
  if (loginStore.userInfo.username === comment.username) {
    // 用户可以删除评论
    ElMessageBox.confirm('确定要删除此评论吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 发送删除请求
      axios.delete('http://localhost:8080/comment/delete', {
        data: {
          token: loginStore.userInfo.token,
          comment_id: comment.comment_id,
          post_id: comment.post_id
        }
      })
      .then(response => {
        // 处理成功响应
        console.log('Response:', response.data);
        // 从 comments 中移除已删除的评论
        props.comments.splice(props.comments.indexOf(comment), 1);
        ElMessageBox.alert('评论已删除', '成功', {
          confirmButtonText: '确定',
          type: 'success'
        });
      })
      .catch(error => {
        // 处理错误
        console.error('Error:', error);
        ElMessageBox.alert('删除评论失败，请重试', '错误', {
          confirmButtonText: '确定',
          type: 'error'
        });
      });
    }).catch(() => {
      // 用户取消删除
      ElMessageBox.alert('已取消删除', '提示', {
        confirmButtonText: '确定',
        type: 'info'
      });
    });
  } else {
    // 用户不能删除评论
    ElMessageBox.alert('您只能删除您自己的评论', '提示', {
      confirmButtonText: '确定',
      type: 'warning'
    });
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 80%;
  max-width: 600px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f4f4f4;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.close-button:hover {
  background-color: #ddd;
}

.comment {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  position: relative;
}

.comment-content {
  font-size: 18px;
  color: #333;
  margin: 10px 0;
}

.comment-author {
  font-size: 16px;
  color: #555;
  margin: 5px 0;
}

.post-title, .comment-time {
  font-size: 14px;
  color: #888;
  margin: 5px 0;
}

.delete-button {
  position: absolute;
  top: 10px;
  left: 500px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #ff1a1a;
}
</style>