<template>
  <div class=" flex">
    <div class=" w-2/12 overflow-y-auto h-full fixed z-10">
      <template v-if="state.docTree.children">
        <el-menu
          :default-active="defaultActive"
          :default-openeds="state.defaultOpeneds"
          background-color="#FAFAFA"
        >
          <menu-list :subMenuList="state.docTree.children" :articleList="state.articleList" />
        </el-menu>
      </template>
    </div>

    <div class="px-24 pt-16 overflow-y-auto pl-96 overflow-x-hidden w-full">
      <div class="text-2xl font-medium text-gray-800">{{ articleInfo?.title }}</div>
      <div class="pt-2 text-gray-500">{{ articleInfo?.introduction }}</div>
      <div class="pt-8 border-b border-gray-300"></div>
      <div class="pt-7 text-sm text-gray-600 leading-9">{{ articleInfo?.content }}</div>
      <!-- <div class=" text-2xl font-medium text-gray-800">系统模板</div>
        <div class=" pt-2 text-gray-500">首付就啊路费的父级爱劳动维看风景而</div>
      <div class=" pt-7 text-sm text-gray-600 leading-9">如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。</div>
      <div class=" text-2xl font-medium text-gray-800">系统模板</div>
        <div class=" pt-2 text-gray-500">首付就啊路费的父级爱劳动维看风景而</div>
      <div class=" pt-7 text-sm text-gray-600 leading-9">如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。</div>
      <div class=" text-2xl font-medium text-gray-800">系统模板</div>
        <div class=" pt-2 text-gray-500">首付就啊路费的父级爱劳动维看风景而</div>
      <div class=" pt-7 text-sm text-gray-600 leading-9">如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。如何有效地统筹管理全国多家子公司项目是很多房企的痛点。通过墨刀的协同管理功能，企业能及时了解到各个地区项目的进展、评审、开发情况，便于开展远程协作，提升集团化信息管控能力。</div> -->
    </div>
  </div>
</template>


<script setup lang="ts">
import { queryDocTree, treeNode, queryDocList, info } from '@/service/HelpCenterService'
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from "vue-router"
import { ElMenu } from "element-plus"
import menuList from "@/components/menuList.vue"
import router from '@/router';
let state = reactive({
  docTree: {} as { children: Array<treeNode> }, articleList: [] as Array<info[]>, defaultOpeneds: [] as Array<string>,
  firstArticle: {} as info
})

const searchTree = (item: treeNode[]) => {
  item.map(i => {
    if (i.children.length > 0) {
      searchTree(i.children)
    } else {
      if (i.info.document_num != 0) {
        state.defaultOpeneds.push(i.info.parent_id + '');
        state.defaultOpeneds.push(i.info.id + '')
        queryDocList({
          category_id: i.info.id,
          page: 1,
          page_size: 200
        }).then((ret) => {
          if (ret.code == 200) {
            state.articleList[i.info.id] = ret.data.list
          }
        })
      }
    }
  })
}

onMounted(() => {
  queryDocTree().then(ret => {
    if (ret.code == 200) {
      state.docTree = ret.data
      searchTree(state.docTree.children)
    }
  })
})

const defaultActive = ref('')

const route = useRoute()

watch(() => route.query.info, (value: any, oldV: any) => {
  if (route.query.info) {
    state.firstArticle = JSON.parse(route.query.info as unknown as string) as info
  }
}, {
  immediate: true
})

const articleInfo = computed(() => {
  let info
  state.articleList.map((i, index) => {
    if (i) {
      defaultActive.value = i[0].id + ''
      console.log(defaultActive.value);
      info = i[0]
    }
  })
  return JSON.stringify(state.firstArticle) == '{}' ? info : state.firstArticle
})

</script>

<style>
.el-menu{
  height: 100%;
}
</style>