<template>
    <el-menu router :default-active="$route.name" style="height: 100%;">
        <template v-for="route in routes" :key="route.name">
            <!-- 有子路由的情况 -->
            <el-sub-menu v-if="route.children?.length" :index="route.name">
                <template #title>
                    <el-icon v-if="route.meta?.icon">
                        <component :is="route.meta.icon" />
                    </el-icon>
                    <span>{{ route.meta?.title }}</span>
                </template>
                <!-- 修改为 el-menu-item -->
                <template v-for="childRoute in route.children" :key="childRoute.name">
                    <el-menu-item :index="childRoute.name" @click="handleClick(childRoute)">
                        <el-icon v-if="childRoute.meta?.icon">
                            <component :is="childRoute.meta.icon" />
                        </el-icon>
                        <span>{{ childRoute.meta?.title }}</span>
                    </el-menu-item>
                </template>
            </el-sub-menu>

            <!-- 无子路由的情况 -->
            <el-menu-item v-else :index="route.name" @click="handleClick(route)">
                <el-icon v-if="route.meta?.icon">
                    <component :is="route.meta.icon" />
                </el-icon>
                <span>{{ route.meta?.title }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script setup>
import { useRouter } from 'vue-router'
import {routes as route} from '@/router'
import { ref } from 'vue'

const routes = ref([])

// 在 setup 函数中进行赋值
const defaultRoutes = route[3].children
routes.value = defaultRoutes
console.log(defaultRoutes,'defaultRoutes')
const router = useRouter()
const handleClick = (route) => {
    router.push({ name: route.name})
}
</script>