<template>
	<el-container>
		<el-header>
			<heads></heads>
		</el-header>
		<el-container>
			<el-aside width="200px" >
				<el-menu
					:default-active="state.activeIndex"
					router
					@select="handleSelect"
				>
					<el-menu-item
						v-for="r in getAdminList()"
						:key="r.name"
						:index="r.path"
					>
						<component  class="icons" :is="r.icon" />
						<template #title>{{ r.name }}</template>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main class="main">
				<router-view ></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script setup lang="ts">
import { getAdminList} from '~/utils/utils'
import { useRoute } from 'vue-router'
// 获取当前路由信息
const route = useRoute()
const state = reactive({
	activeIndex:'/admin'
})
const handleSelect = (key: string, keyPath: string[]) => {
	state.activeIndex = key
}

onMounted(()=>{
	// 初始化activeIndex为当前路由的path路径，方便在菜单栏高��显示选中项
	state.activeIndex = route.path
})

</script>

<style scoped>
.main{
	width: 100%;
	height: calc(100vh - 80px);
	background-color: #f2f4f8;
}
.icons{
	width: 18px;
	height: 18px;
	margin-right: 5px;
}
</style>
