<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">
          <n-breadcrumb-item @click="$router.push('/')">{{ $t('home') }}</n-breadcrumb-item>
          <template v-for="(bread, index) in breadcrumb" :key="index">
            <n-breadcrumb-item @click="handleBreadcrumb(bread)">
              {{ bread.title }}</n-breadcrumb-item
            >
          </template>
        </n-breadcrumb>
      </div>

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

      <div class="waper-content w-full flex flex-row flex-nowrap">
        <div
          class="waper-left flex-basis-[240px] flex-grow-0 flex-shrink-0 overflow-hidden br-1px_#EBEBEB"
          :class="{ open: isOpenMuen }"
        >
          <div class="open-btn" @click="toggleOpen">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 512 512"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="32"
                d="M96 256h320"
              ></path>
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="32"
                d="M96 176h320"
              ></path>
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="32"
                d="M96 336h320"
              ></path>
            </svg>
          </div>
          <n-tree
            class="left-tree"
            v-if="mainCategories"
            v-model:selected-keys="selectedKeys"
            block-line
            :data="mainCategories.children"
            :default-expanded-keys="defaultExpandedKeys"
            :node-props="nodeProps"
            key-field="id"
            label-field="title"
            children-field="children"
            selectable
          >
            <template #empty>
              <n-empty :description="$t('no_data')" />
            </template>
          </n-tree>
        </div>

        <div class="waper-right 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 overflow-hidden"></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 isOpenMuen = ref<Boolean>(false)
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 selectedKeys = ref<number[]>([])
const toggleOpen = () => {
  isOpenMuen.value = !isOpenMuen.value
}
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) {
    if (!isNaN(+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
        console.log('currentCate', currentCate.value)
        defaultExpandedKeys.value = [currentCate.value.parentId]
        const selectID = currentCate.value.parentId
          ? currentCate.value.id
          : currentCate.value.children[0].id
        selectedKeys.value = [selectID]
        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}`)
}

const handleBreadcrumb = (bread: TreeNode) => {
  router.replace(`/showcate/${bread.id}`)
  setTimeout(() => {
    location.reload()
  }, 50)
}
</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;
    }
  }
}
.open-btn {
  display: none;
  svg {
    width: 100%;
    height: 100%;
  }
}
[is-mobile] {
  .breadcrumb {
    height: 0.88rem;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0.5333rem;
    overflow-x: auto;
    :deep(.n-breadcrumb) {
      ul {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    }
  }
  .content {
    min-height: auto;
  }
  .waper-content {
    display: block;
    position: relative;
    .waper-left {
      position: fixed;
      left: 0;
      top: 5.0667rem;
      z-index: 1;
      background: #fff;
      width: 6.4rem;
      height: 30%;
      border-right: 1px #ebebeb solid;
      border-top: 1px #ebebeb solid;
      border-bottom: 1px #ebebeb solid;
      overflow: visible;
      transition: all 0.3s;
      transform: translateX(-100%);
      &.open {
        transform: translateX(0);
      }
      :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;

        width: 100%;
        height: 100%;
        overflow-y: auto;
        .n-tree-node-wrapper {
          width: 100%;
          padding: 0;
        }
      }
      .open-btn {
        position: absolute;
        right: calc(-0.8rem - 1px);
        top: -1px;
        width: 0.8rem;
        height: 0.8533rem;
        border-radius: 0px 0.1067rem 0.1067rem 0px;
        border: 1px solid #ebebeb;
        display: block;
        background: #fff;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .waper-right {
      width: 100%;
      padding: 0 0.8rem;
      box-sizing: border-box;
      margin-bottom: 0.8rem;
      .cate-list {
        li {
          span {
            font-size:.3733rem;
          }
        }
      }
    }
  }
}
</style>
