<!-- 文章概览 -->
<template>
  <div class="article-overview" @click="handleClick(post_id)">
    <div class="article-header">
      <div class="article-title-author">
        <div class="article-title">{{title}}</div>
        <div class="article-author">{{ username }}</div>
      </div>
      <div class="article-details">
        <div class="article-buttons" v-if="showButtons">
          <button class="edit-button" @click.stop="handleEdit">修改</button>
          <button class="delete-button" @click.stop="handleDelete">删除</button>
        </div>
        <div class="article-likes">点赞数: {{ Likes }}</div>
        <div class="article-published-date">发布时间: {{ updated_at }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Article">
import { useRouter } from 'vue-router';
import { defineProps, defineEmits ,ref, reactive, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus'; // 引入 ElMessageBox
import axios from 'axios';
import { useToast } from 'vue-toastification';
const toast = useToast()
const router = useRouter();

const emit = defineEmits(['destroy']);
const props = defineProps(['post_id','user_id','username','title','updated_at','Likes','showButtons'])

console.log("Likes:",props.Likes);
function handleDelete() {
  ElMessageBox.confirm('您确定要删除这篇文章吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击确定
    axios.delete('http://localhost:8080/post/delete',{
      params: {
        post_id: props.post_id, // 传递 post_id 参数
      }
    })
    toast.success("删除成功");
    emit('destroy');
  }).catch(() => {
    // 用户点击取消
   console.log('要删除的文章id是',props.post_id)
  });
}

//修改按钮，路由传递文章id和修改文章布尔变量，跳转到文章详情页
function handleEdit() {

  router.push({ name: 'Writing', params: { id: props.post_id } });
  // r
}

function handleClick(post_id:number) {
  // 点击之后，执行跳转


  router.push({ name: 'Paper', params: { id: post_id } });
}

</script>


<style scoped>
.article-overview {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s;
}

.article-overview:hover {
  background-color: #f4f4f4;
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-title-author {
  display: flex;
  flex-direction: column;
}

.article-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.article-author {
  font-size: 14px;
  color: #555;
}

.article-details {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #777;
}

.article-likes {
  margin-bottom: 2px;
}

.article-published-date {
  margin-bottom: 0;
}
</style>
