<template>
  <div class="paper-container">
    <h1>{{ paper.title }}</h1>
    <p><strong>作者:</strong> {{ paper.writer }}</p>
    <p><strong>发布时间:</strong> {{ paper.updated_at }}</p>
    <div class="interaction-buttons">
      <button @click="toggleLike" :class="{ active: isLiked }">
        <img :src="likeIconSrc" alt="Like" class="icon">
        点赞数{{ paper.Likes }}
      </button>
      <button @click="toggleDislike" :class="{ active: isDisliked }">
        <img :src="dislikeIconSrc" alt="Dislike" class="icon">
        
      </button>
      <button @click="handleShare">
        <img src="../../assets/img/zhuanfa.svg" alt="Share" class="icon">
        
      </button>
    </div>
    <div v-html="compiledMarkdown"></div>
  </div>
  <div>
    <CommentSection :post_id="post_id"/>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref,reactive } from 'vue';
import CommentSection from './CommentSection.vue';
import { marked } from 'marked';
import axios from 'axios';
import { useRoute } from 'vue-router';
import likeIcon from '@/assets/img/like.svg';
import delikeIcon from '@/assets/img/delike.svg';
import abhorIcon from '@/assets/img/abhor.svg';
import deabhorIcon from '@/assets/img/deabhor.svg';

//引入吐司
import { useToast } from 'vue-toastification' 
const toast = useToast();
console.log()

const route = useRoute();
// 从路由中获取post_id
const post_id = route.params.id;

const paper = reactive({
  id: '',
  user_id: '',
  title: '',
  writer: '',
  updated_at: '',
  content: '',
  Likes:'0'
});

const compiledMarkdown = computed(() => {
  return marked(paper.content);
});

const isLiked = ref(false);
const isDisliked = ref(false);

const likeIconSrc = computed(() => isLiked.value ? likeIcon : delikeIcon);
const dislikeIconSrc = computed(() => isDisliked.value ? abhorIcon : deabhorIcon);

function getpaper(){
  
  axios.get('http://127.0.0.1:8080/post/essay',{ params: {post_id:post_id}})
    .then(res => {
      console.log("获取文章详情数据成功", res.data.data);
      console.log("传入对象");
      paper.id = res.data.data.post_id
      paper.title = res.data.data.title
      paper.content = res.data.data.content
      paper.writer = res.data.data.username
      paper.updated_at = res.data.data.updated_at  

    })
}


const toggleLike = () => {
  isLiked.value = !isLiked.value;
  isDisliked.value = false;
  // 执行点赞逻辑
};

const toggleDislike = () => {
  isDisliked.value = !isDisliked.value;
  isLiked.value = false;
  // 执行点踩逻辑
};

const handleShare = () => {
  const currentUrl = window.location.href;
  navigator.clipboard.writeText(currentUrl)
    .then(() => {
      toast.success("链接已复制到剪贴板");
    })
    .catch(err => {
      console.error('无法复制到剪贴板', err);
      toast.error("复制失败，请手动复制链接");
    });
  // 执行转发逻辑
};
onMounted(() => {
  getpaper();
});
</script>

<style scoped>
.paper-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2em;
  margin-bottom: 10px;
}

p {
  margin-bottom: 20px;
}

.interaction-buttons {
  margin-bottom: 20px;
}

.interaction-buttons button {
  margin-right: 10px;
  padding: 5px 10px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.interaction-buttons button.active {
  background-color: #e0e0e0;
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
</style>