<script setup lang="ts">
import { useDocDetailStore } from '@/stores/doc-detail';
import { useSideBarStore } from '@/stores/side-bar';
import { onMounted, onUnmounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import DocCatalog from './components/DocCatalog.vue';

// 当前路由
const route = useRoute();
// 左侧边栏状态
const sideBarStore = useSideBarStore();
// 文档详情
const docDetailStore = useDocDetailStore();

const doc = computed(() => docDetailStore.doc);

onMounted(() => {
  // 收起左侧边栏
  sideBarStore.setCollapse(true);
  // 查询文档详情内容
  const id = parseInt(route.params.id as string);
  if (id > 0) {
    docDetailStore.fetch(id);
  }
});

onUnmounted(() => {
  sideBarStore.setCollapse(false);
});

</script>

<template>
  <a-row type="flex" :gutter="24">
    <a-col :span="4">
      <h2>目录</h2>
      <DocCatalog></DocCatalog>
    </a-col>
    <a-col :span="20">
      <div v-if="doc" class="doc-wrap">
        <h2 class="title">{{ doc.title }}</h2>
        <p>文档详情</p>
      </div>
      <div v-else>
        <a-empty />
      </div>
    </a-col>
  </a-row>
</template>
