<template>
  <div class="max-w-screen-xl content my-0 mx-auto text-size-base overflow-hidden">

    <div>
      <div class="breadcrumb my-[30px] pb-[20px] bb-1px_#EBEBEB" role="navigation">
        <n-breadcrumb separator=">" v-if="breadcrumb">
          <template v-for="(bread, index) in breadcrumb" :key="index">
            <n-breadcrumb-item :clickable="false"> {{ bread.title }}</n-breadcrumb-item>
          </template>
        </n-breadcrumb>
      </div>

      <div v-if="currentCate">
        <n-h2 class="mb-10"> {{ currentCate.title }}</n-h2>
      </div>

      <div class="w-full flex flex-row flex-nowrap">
        <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0 br-1px_#EBEBEB">
          <n-tree class="left-tree" v-if="mainCategories" block-line :data="mainCategories.children"
            :default-expanded-keys="defaultExpandedKeys" :node-props="nodeProps" key-field="id" label-field="title"
            children-field="children" selectable>
            <template #empty></template>
          </n-tree>
        </div>

        <div class="flex-1 w-[calc(100%-80px)] px-[40px] mb-[120px] overflow-hidden">
          <template v-if="articleList.length > 0">
            <ul class="cate-list">
              <li v-for="article in articleList" :key="article.id">
                <span @click="handleToArticle(article)">{{ article.title }}</span>
              </li>
            </ul>
          </template>
          <template v-else>
            <div class="pt-20">
              <n-empty :description="$t('no_data')" />
            </div>

          </template>

        </div>

        <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0">

        </div>
      </div>
    </div>
  </div>
</template>

<route>
{
name: "showcate",
  meta: {
  layout: "base"
  }
}
</route>

<script setup lang="ts">
import {
  type ArticleDetailType,
  type CategoryItem,
  getCategoryTree,
  getArticlesByCateId
} from '@/api'

import { NH2, NBreadcrumb, NBreadcrumbItem, NTree, NEmpty } from 'naive-ui'
import type { TreeOption } from 'naive-ui'
import { findNodeById, findBreadcrumbPath, type TreeNode } from '@/utils'


const route = useRoute()
const router = useRouter()

const params = route.params as {
  id?: number
}
const breadcrumb = ref<CategoryItem[]>([])
const currentCate = ref<CategoryItem | undefined>()
const mainCategories = ref<CategoryItem>()
const articleList = ref<ArticleDetailType[]>([])
const defaultExpandedKeys = ref<number[]>([])


const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    async onClick() {
      console.log('option', option.id)
      router.replace(`/showcate/${option.id}`)
      setTimeout(() => {
        location.reload()
      }, 50)
    },
  }
}

watchEffect(async () => {
  if (params.id) {
    const res = await getArticlesByCateId(params.id);
    if (res) {
      articleList.value = res.data as ArticleDetailType[]
    }
    const res1 = await getCategoryTree(params.id)
    if (res1 && res1.data) {
      mainCategories.value = res1.data as CategoryItem

      currentCate.value = findNodeById(
        [mainCategories.value] as unknown as TreeNode[],
        Number(params.id),
      ) as unknown as CategoryItem
      defaultExpandedKeys.value = [currentCate.value.parentId]
      breadcrumb.value = findBreadcrumbPath([mainCategories.value] as unknown as TreeNode[], Number(params.id))
      console.log('breadcrumb', [mainCategories.value], breadcrumb.value)
    }
  }
})

const handleToArticle = (article: ArticleDetailType) => {
  console.log('article', article)
  router.replace(`/showdoc/${article.id}`)
}
</script>

<style lang="scss" scoped>
:deep(.content-html img) {
  width: 100% !important;
  height: auto;
}

:deep(.left-tree) {
  --n-node-content-height: 40px !important;
  //--n-node-color-hover: rgba(6,97,201,0.06) !important;
  //border-right: 1px solid #e5e7eb;

  .n-tree-node-wrapper {
    width: 240px;
    font-size: 16px;
  }
}

.articleNear {
  &:hover {
    cursor: pointer;
    color: #5a5a5a;
  }
}

.cate-list {
  li {
    &:hover {
      text-decoration: underline;
      cursor: pointer;
      // display: block;
    }
  }
}
</style>
