<template>
  <div class = "flow-container">
    <div class = "post-detail-page">
    <!-- 左侧分类 包含分类 -->
        <SidebarCategory class="sidebar card" />

    <!-- 中间内容 帖子的具体内容-->
        <PostContent :post="post" class="content card" />

    <!-- 右侧作者信息 -->
        <AuthorInfo class="author-info card" :author="post.author" />
    </div>
  </div>
</template>

<script setup lang = "ts">
import SidebarCategory from '@/components/PostDetailPage/SidebarCategory.vue'
import PostContent from '@/components/PostDetailPage/PostContent.vue'
import AuthorInfo from '@/components/PostDetailPage/AuthorInfor.vue'
import { useRoute } from 'vue-router'
import {ref, onMounted} from 'vue'
import Avatar from '@/assets/images/默认头像.jpg'

const route = useRoute()
const postId = ref<number>(parseInt(route.params.id as string))

const post = ref({
  id: postId.value,
  title: '帖子标题示例',
  content: `
# 欢迎来到论坛！

这是一个使用 **Vue3** + **Vite** + **TypeScript** 搭建的论坛系统。

## 功能清单

- 支持 Markdown 渲染
- 高亮代码块
- 响应式布局
- 用户评论系统

## 示例代码

\`\`\`ts
function greet(name: string): string {
  return \`Hello, \${name}!\`
}
console.log(greet('Vue'))
\`\`\`

## 引用与链接

> “学习不是人生的全部，但如果连学习都掌握不了，你还能做什么？”

请访问 [Vue 官方文档](https://vuejs.org) 获取更多信息。

## 图片测试

![Vue Logo](https://vuejs.org/images/logo.png)
  `,
  author: {
    id: 1,
    name: '张三',
    avatar: Avatar,
    bio: '一名热爱分享的大学生'
  },
  tags: ['Vue3', '论坛开发', '学习笔记']
})


// 可选：模拟异步获取
onMounted(() => {
  // TODO: fetch(`/api/post/${postId.value}`) 替换为真实接口
})

</script>

<style scoped lang="scss">
.post-detail-page {
  display:flex;
  gap:16px;

  .sidebar{
    flex:2;
    position:sticky;
    height: fit-content;
    border-radius: 8px;
    padding: 16px;
    flex-shrink: 0;
  }

  .content{
    flex: 8;
    padding: 16px;
    border-radius: 8px;
  }

  .author-info{
    flex:3;
    position:sticky;
    flex-shrink:0;
    height:fit-content;
    border-radius: 8px;
    padding: 16px;
  }
}
</style>