<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="articleList" />
        </template>
        <template v-else>
          <!-- 最后一级 -->
          <template v-if="item.info.document_num != 0">
            <el-sub-menu :index="item.info.id + ''">
              <template #title>
                <span>{{ item.info.name }}</span>
              </template>
              <el-menu-item
                v-for="i in articleList![71]"
                :key="i.id"
                :index="i.id +''"
                @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, ref, reactive, watch } from "vue";
import { treeNode, info, article } from "@/service/HelpCenterService"
import { useRouter } from "vue-router";

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

})

const router = useRouter()

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

</script>