<template>
  <div class="helpcenter">
    <div class="h-full fixed pb-12 z-0">
      <el-tree
        node-key="id"
        :load="loadNode"
        lazy
        :icon="ArrowDownBold"
        :data="state.docTree"
        :props="defaultProps"
        show-overflow-tooltip
        highlight-current
        @node-click="handleNodeClick"
        ref="tree"
      >
        <template #default="{ node }">
          <div class="pl-10 pr-8">
            <span
              :class="[node.isLeaf && node.level != 1 ? ' text-sm' : ' text-base  font-medium', node.expanded ? ' text-blue-500' : ' ']"
            >{{ node.label }}</span>
          </div>
        </template>
      </el-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">{{ state.firstArticle.title }}</div>
      <div class="pt-2 text-gray-500">{{ state.firstArticle.introduction }}</div>
      <div class="pt-8 border-b border-gray-300"></div>
      <div class="pt-7 text-sm text-gray-600 leading-9" v-html="state.firstArticle.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 router from '@/router';
import { queryDocTree, treeNode, queryDocList, info, queryDoc } from '@/service/HelpCenterService'
import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue';
import { useRoute, useRouter } from "vue-router"
import { ArrowDownBold } from '@element-plus/icons-vue'

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


const defaultProps = {
  children: 'children',
  label: 'name',
  disabled: 'false',
  isLeaf: 'leaf' as any
}

const route = useRoute()

onMounted(() => {

  queryDocTree().then(ret => {
    if (ret.code == 200) {
      /* 获取分类树 */
      state.docTree = treeDataHandle(ret.data.children);
    }
  }).then(() => {
    const currenId = (route.query.id as unknown as string)
    console.log(currenId);
    
    if (currenId) {
      queryDoc({ id: +currenId }).then((ret) => {
        if (ret.code == 200) {
          const { title, content, introduction } = ret.data
          state.firstArticle.title = title
          state.firstArticle.content = content
          state.firstArticle.introduction = introduction
        }
        const parents = JSON.parse(sessionStorage.getItem('parents')!)
        expandNodes(parents, -currenId)
      })
    } else {
      /* 获取第一篇文章 */
      getFirstDocument(state.docTree);
    }
  })

})

/* 为node添加name字段，作为label,添加leaf字段作为叶子节点标识,id作为唯一标识 */

const treeDataHandle = ((items: Array<treeNode>) => {
  return items.map((item: treeNode) => {
    item.name = item.info.name;
    item.id = item.info.id
    if (item.children?.length > 0) {
      item.children = treeDataHandle(item.children);
    } else {
      /* 是否可展开空分类 */
      if (item.info.document_num <= 0) {
        item.leaf = true
      }
    }
    return item;
  })
})

/* 获取第一篇文章 */
const tree = ref();

/* 只查找第一篇文章的标识 */
let flag = true;
const getFirstDocument = ((items: Array<treeNode>) => {
  items.map(i => {
    if (i.children.length > 0) {
      getFirstDocument(i.children)
    } else {
      if (i.info.document_num > 0 && flag) {
        flag = false
        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.firstArticle = ret.data.list[0]
            nextTick(() => {
              /* 展开节点 */
              const curId = -ret.data.list[0].id
              expandNodes(state.defaultOpeneds, curId)
            })
          }
        })
      }
    }
  })
})

/* 展开选中节点及其父节点 */
const expandNodes = (parentIds: Array<number>, childId: number) => {
  tree.value.store.setDefaultExpandedKeys(parentIds)
  tree.value.store.currentNodeKey = childId
  console.log(parentIds,childId);
}

/* 默认加载所有分类,点击时查询该节点下的文章列表 */
const loadNode = (node: any, resolve: any) => {
  const data = node.data as treeNode
  console.log(node,'data');
  
  if (node.level == 0) {
    return resolve(state.docTree)
  }

  else if (node.level > 0 && data.info.document_num > 0) {
    /* 加载文章分类列表 */
    const id = node.data.info.id
    queryDocList({
      category_id: id,
      page: 1,
      page_size: 200
    }).then((ret) => {
      if (ret.code == 200) {
        const articleList = ret.data.list.map(i => {
          i.name = i.title;
          i.id = -i.id;
          i.leaf = true
          return i;
        })
        return resolve(articleList)
      }
    })
  } else if (node.level > 0 && data.info.document_num <= 0) {
    /* 加载分类列表 */
    return resolve(node.data.children)
  }
}

/* 加载文章信息 */
const handleNodeClick = (data: any, node: any) => {
  console.log(node, 'node');
  // console.log(data,'data')
  if (data.category_id) {
    const currenId = -data.id
    router.push({ name: 'HelpCenter', query: { id: currenId } })
    queryDoc({ id: currenId }).then((ret) => {
      if (ret.code == 200) {
        const { title, content, introduction } = ret.data
        state.firstArticle.title = title
        state.firstArticle.content = content
        state.firstArticle.introduction = introduction
      }
    })
    state.defaultOpeneds = []
    getParentNodes(node.parent)
    const item = JSON.stringify(state.defaultOpeneds)
    sessionStorage.setItem('parents', item)
  }
}

// 获取父节点
const getParentNodes = (node: any) => {
  if (node.parent) {
    state.defaultOpeneds.push(node.data.id)
    console.log(node.data.id);
    
    getParentNodes(node.parent)
  }
}

</script>

<style scoped>
.el-tree {
  background: #fafafa;
  height: 100%;
  overflow-y: scroll;
}

.el-tree /deep/ .el-tree-node__content {
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-right: 2rem;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.el-tree /deep/ .el-tree-node__content:hover {
  background-color: #f2f3f5;
}

.helpcenter
  /deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #f2f3f5;
  color: #3f79fe;
}

.el-tree /deep/.el-tree-node__expand-icon.expanded {
  transform: rotate(180deg);
}
</style>