<template>
  <div>
    <template v-for="item in props.subMenuList" :key="item">
      <el-sub-menu :index="item.info.id + ''">
        <template #title>
          <span>{{ item.info.name }}</span>
        </template>
        <template v-if="item.children && item.children.length > 0">
          <menu-list :subMenuList="item.children" :articleList="articles" />
        </template>
        <template v-else>
          <!-- 最后一级 -->
          <template v-if="item.info.document_num != 0">
            <el-sub-menu :index="item.info.id + ''">
              <template #title>
                <span @click="handleSubMenuClick(item)">{{ item.info.name }}</span>
              </template>
              <el-menu-item
                v-for="i in articleList![item.info.id]"
                :key="i.id"
                :index="i.id + 'a'"
                @click="handleItemClick(i)"
              >{{ i.title }}</el-menu-item>
            </el-sub-menu>
          </template>
          <el-menu-item v-else :index="item.info.id + ''">{{ item.info.name }}</el-menu-item>
        </template>
      </el-sub-menu>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ElSubMenu, ElMenuItem } from "element-plus"
import { withDefaults, defineProps, reactive, computed } from "vue";
import { treeNode, info, queryDocList } from "@/service/HelpCenterService"
import { useRouter } from "vue-router";

const props = withDefaults(defineProps<{
  subMenuList: Array<treeNode>,
  articleList?: Array<info[]>
}>(), {

})

const router = useRouter()

let state = reactive({ articleList: [] as Array<info[]> })

const handleSubMenuClick = (item: treeNode) => {
  queryDocList({
    category_id: item.info.id,
    page: 1,
    page_size: 100
  }).then((ret) => {
    state.articleList = []
    state.articleList[item.info.id] = ret.data.list
  })
  console.log(state.articleList,'click');
}

const handleItemClick = (item: info) => {
  const info = JSON.stringify(item)
  router.push({ name: 'HelpCenter', query: { info: info } })
}

const articles = computed(() => {
  console.log(state.articleList.length > 0 ? state.articleList : props.articleList);
  return state.articleList.length > 0 ? state.articleList : props.articleList
})
</script>
