<script setup lang="ts">
import { ref } from 'vue'
import FgTree from '@/components/fg-tree/fg-tree.vue'
import { queryKnowledgeContentlist } from '@/api/knowledge/index'
interface TreeNode {
  id: number
  label: string
  children?: TreeNode[]
}
const paramsoptions = ref({}) as any
const treeData = ref<TreeNode[]>([])
const isloading = ref(false)
//获取树形列表
const queryKnowledgeContentlistfn = async () => {
  try {
    isloading.value = true
    const res = (await queryKnowledgeContentlist({
      categoryId: paramsoptions.value?.id,
    })) as any
    if (res.code === 200) {
      const deepTree = (item: any) => {
        return {
          id: item.id,
          label: item.title,
          children: item?.children?.map((child: any) => {
            return deepTree(child)
          }),
        }
      }
      treeData.value = res?.data?.map((item: any) => deepTree(item))
    }
  } catch (error) {
    console.log(error)
  } finally {
    isloading.value = false
  }
}
onLoad(async (options) => {
  paramsoptions.value = options
  await queryKnowledgeContentlistfn()
})

const handleNodeClick = (node: TreeNode) => {
  uni.navigateTo({
    url: `/pages/knowledge/search/details/viewdetails/index?id=${node?.id}&classId=${paramsoptions.value?.id}`,
  })
}

const handleNodeExpand = (node: TreeNode) => {
  console.log('展开节点:', node)
}

const handleNodeCollapse = (node: TreeNode) => {
  console.log('折叠节点:', node)
}
</script>
<template>
  <view class="knowledgebase_details">
    <view v-if="isloading" class="loading-container">
      <wd-loading size="40px" color="#215ACD"></wd-loading>
    </view>
    <view class="header_details">
      <input class="details_input" type="text" placeholder="搜索" />
    </view>
    <view class="main_list">
      <view class="main_list_title">{{ paramsoptions?.name }}</view>
      <div class="main_tree">
        <FgTree
          :data="treeData"
          :default-expanded-keys="[1, 3]"
          @node-click="handleNodeClick"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
        />
      </div>
    </view>
  </view>
</template>

<style scoped lang="scss">
html,
body {
  overflow: hidden;
}
.knowledgebase_details {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44rpx;
  padding: 18rpx 40rpx 40rpx;
  box-sizing: border-box;
  .header_details {
    width: 100%;
    height: 80rpx;
    .details_input {
      width: 100%;
      height: 100%;
      background-color: #f6f6f6;
      background-image: url('../../../../assets/searchicon.png');
      background-repeat: no-repeat;
      background-position: 20rpx center;
      background-size: 30rpx 30rpx;
      padding-left: 56rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .main_list {
    flex: 0.9;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 42rpx;
    overflow-y: auto;
    overflow-x: hidden;
    .main_list_title {
      font-family: Alibaba PuHuiTi 2;
      font-weight: 500;
      font-style: 65 Medium;
      font-size: 36rpx;
      leading-trim: NONE;
      line-height: 36rpx;
      letter-spacing: 0px;
      color: #31373d;
    }
    .main_tree {
      flex: 1;
      width: 100%;
    }
  }
}
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
</style>
