<template>
  <div class="min-h-screen">
    <!-- 主内容区 -->
    <ActionButtons
      v-model="articleDetail"
      @scrollToCommentBox="commentRef?.scrollToCommentBox()"
    ></ActionButtons>
    <div class="lg:col-span-3 relative">
      <BackButton />
      <!-- 帖子主体 -->
      <ArticleContent :articleDetail="articleDetail" :isAudit="false" />

      <!-- 评论区 -->
      <Comment
        class="mt-6"
        ref="commentRef"
        :id="id"
        v-model:total="articleDetail.replyCount"
        :type="articleDetail.type"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getArticleDetail, type ArticleItemDto } from '@/api'
import ActionButtons from './components/actionButtons.vue'
import Comment from '@/components/common/Comment/index.vue'
import ArticleContent from '@/components/common/ArticleContent/index.vue'
import BackButton from '@/components/common/BackButton/index.vue'
const commentRef = useTemplateRef<typeof Comment | null>('commentRef')

const route = useRoute()
const id = Number(route.params.id)

const articleDetail = ref({} as ArticleItemDto)

const initPage = () => {
  Promise.allSettled([getArticleDetail(id)]).then(([r1]) => {
    if (r1.status === 'fulfilled') {
      articleDetail.value = r1.value.data
    }
  })
}
onMounted(async () => {
  initPage()
})
</script>
