<template>
  <div class="study-plan-layout">
    <!-- Banner 横幅 -->
    <CenterHead 
      title="学习中心" 
      :category-name="categoryName"
    />

    <!-- Tab 导航 -->
    <MenuNav :menus="menus" @menu-click="handleMenuClick" />
  
    <!-- 内容插槽 -->
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { MenuNav, CenterHead } from '@/components/base';
import { getParentChildrenRoutes } from '@/utils/routeUtils';
import type { SysMenu } from '@/types';

defineOptions({
  name: 'StudyPlanLayout'
});

interface Props {
  categoryName?: string;
}

withDefaults(defineProps<Props>(), {
  categoryName: '学习中心'
});

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

const routes = getParentChildrenRoutes(route);
// 将路由转换为菜单格式
const menus = routes.map((r, index) => ({
  menuID: r.name?.toString() || `menu-${index}`,
  name: (r.meta?.title as string) || '',
  url: r.path || '',
  orderNum: index
})) as SysMenu[];

// 菜单点击事件
function handleMenuClick(menu: SysMenu) {
  if (menu.url) {
    router.push(menu.url);
  }
}
</script>

<style lang="scss" scoped>
.study-plan-layout {
  min-height: 100vh;
  background: #F9F9F9;
}
</style>
