<template>
	<el-container>
		<el-header>
			<heads></heads>
		</el-header>
		<el-container>
			<el-aside width="200px" >
				<el-menu
					:default-active="navStore().adminPath"
					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, getFrontList } from '~/utils/utils'
import navStore from '~/stores/navStore'
const handleSelect = (key: string, keyPath: string[]) => {
	navStore().adminPath = key
	console.log(key, keyPath)
}

</script>

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