<template>
	<el-container>

		<el-aside width="200px" >
			<el-menu
				style="height: 100vh"
				:default-active="navStore().adminPath"
				router
				@select="handleSelect"
				background-color="#001020"
				text-color="#fff"
			>
				<div style="width: 100%;height: 50px"></div>
				<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-container>
			<el-header>
				<heads></heads>
			</el-header>
			<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>
