<template>
  <div class="flex">
    <div class="w-2/12 overflow-y-auto h-full fixed z-10">
      <el-tree
          :data=" treeData.docTree"
          node-key="id"
          :props="defaultProps"
          show-overflow-tooltip
          highlight-current
          :current-node-key="curId"
          @node-click="handleNodeClick"
          :default-expand-all="true"
          ref="tree"
          />
    </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, onBeforeMount, reactive, ref, watch, nextTick} from 'vue';
import {useRoute, useRouter} from "vue-router"

let state = reactive({
  docTree: {} as { children: Array<treeNode> },
  articleList: [] as Array<info[]>,
  defaultOpeneds: [] as Array<string>,
  firstArticle: {} as info
})

let tree = ref(null);
let curId = ref(0);

let treeData = reactive({
  docTree: [] as treeNode[]
})

let defaultProps = {
  children: 'children',
  label: 'name',
  isLeaf: 'leaf',
}

const menuloading = ref(false)

onBeforeMount(() => {
  queryDocTree().then(ret => {
    menuloading.value = true
    if (ret.code == 200) {
      (treeData.docTree as any) = treeDataHandle(ret.data.children);
      getDocuments(treeData.docTree);
      menuloading.value = false;
    }
  })
})

const treeDataHandle = ((items: any[]) => {
  return items.map((item: any[]) => {
    (item as any).name = (item as any).info.name;
    if ((item as any).children?.length > 0) {
      (item as any).children = treeDataHandle((item as any).children);
    }
    return item;
  })
})

const getDocuments = ((items:any[]) => {
  let findFirst = false;
  return items.map((item: any[])=> {
    if (item.info.document_num > 0 && !findFirst) {
      // findFirst = true;
      queryDocList({
        category_id: item.info.id,
        page: 1,
        page_size: 200
      }).then(async (ret) => {
        if (ret.code == 200) {
          item.children = ret.data.list.map(i => {
            i.name = i.title;
            i.id = -i.id;
            return i;
          })
          if (curId.value === 0) {
            await nextTick(() => {
              curId.value = item.children[0].id;
              tree.value.setCurrentKey(curId.value);
              console.log(curId.value)
            })
          }
        }
      })
    }
    if ((item as any).children?.length > 0) {
      getDocuments((item as any).children);
    }
  })

})

let handleNodeClick = () => {
  console.log(123);
}

/* 获取第一篇文章信息 */

const route = useRoute()

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

const articleInfo = computed(() => {
  let info
  for (let i = 0; i < state.articleList.length; i++) {
    const item = state.articleList[i]
    if (item) {
      info = item[0]
      break
    }
  }
  return JSON.stringify(state.firstArticle) == '{}' ? info : state.firstArticle
})

</script>

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