
<template>
  <div v-loading="loading">
    <div class="box sort_menu">
      <el-menu
          default-active="1"
          @select="handleSelect"
      >
          <template v-for="(item,index) in category" :key="index">
            <template v-if="item.children && item.children.length > 0">
              <el-sub-menu :index="`${index}`">
                <template #title>{{ item.title }}</template>
                <template v-for="(sub,subIndex) in item.children" :key="subIndex">
                  <template v-if="sub.children && sub.children.length > 0">
                    <el-sub-menu :index="`${index}-${subIndex}`">
                      <template #title>{{ sub.title }}</template>
                      <el-menu-item v-for="(sub2,sub2Index) in sub.children" :key="sub2Index" :index="`${index}-${subIndex}-${sub2Index}`">
                       {{ sub2.title }}
                      </el-menu-item>
                    </el-sub-menu>
                  </template>
                  <template v-else>
                    <el-menu-item :index="`${index}-${subIndex}`">
                        <el-space>
                        <el-avatar v-if="item.icon" size="small" :src="item.icon" />
                        {{ sub.title }}
                      </el-space>
                    </el-menu-item>
                  </template>
                </template>
              </el-sub-menu>
            </template>
            <el-menu-item v-else :index="`${index}`">
              <el-space>
                <el-avatar v-if="item.icon" size="small" :src="item.icon" />
                {{ item.title }}
              </el-space>
            </el-menu-item>
          </template>
      </el-menu>
    </div>
  </div>
</template>
<script setup lang="ts">
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import type {CmsLink} from "~/api/cms/cmsLink/model";
import {pageCmsArticle} from "~/api/cms/cmsArticle";
import {pageCmsLink} from "~/api/cms/cmsLink";
import {navigateTo, useMenu, useSubMenu} from "#imports";
import {
  ArrowRight
} from '@element-plus/icons-vue'

  const props = withDefaults(
      defineProps<{
        category?: CmsNavigation[];
        title?: string;
      }>(),
      {}
  );

  const i18n = useI18n();
  const list = ref<CmsArticle[]>([]);
  const hotKeys = ref<CmsLink[]>([]);
  const loading = ref<boolean>(true);


  // 加载数据
  pageCmsArticle({
    limit: 5,
    recommend: 1,
    status: 0,
    categoryId: i18n.locale.value == 'en' ? 1080 : 1005,
    lang: i18n.locale.value
  }).then(data => {
    if(data){
      list.value = data?.list;
    }
    loading.value = false;
  })

  // 热门关键词
  pageCmsLink({
    limit: 8,
    categoryId: i18n.locale.value == 'en' ? 1115 : 1106,
    lang: i18n.locale.value
  }).then(res => {
    if(res){
      hotKeys.value = res.list;
    }
  })

  const handleSelect = (index: any) => {
    if(props.category){
      const item = props.category[index];
      navigateTo(item.path)
    }
  }
</script>
