<template>
	<el-container>
		<el-header>
			<heads></heads>
		</el-header>
		<el-container>
			<el-aside width="200px" style="background-color: #0c2461">
				<el-menu
					style="background-color: #0c2461"
					:default-active="navStore().adminPath"
					router
					@select="handleSelect"
				>
					<el-menu-item
						style="color:#efecec;"
						v-for="r in state.getList"
						: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 navStore from '~/stores/navStore'
import {reactive} from 'vue'

// 明确userInfo类型，避免类型错误
interface UserInfo {
	role?: number;
}

const handleSelect = (key: string, keyPath: string[]) => {
	navStore().adminPath = key
}

const state = reactive(<any>{
	getList: []
})

function userStore() {
	// 假设全局有userStore，返回类型加上userInfo类型声明
	return {
		isLogin: false,
		userInfo: {} as UserInfo
	}
}

onMounted(() => {
	state.getList = getAdminList()

	const user = userStore()
	if (user.userInfo.role == 0) {

		state.getList.push({
			"path": "/user",
			"name": "用户管理",
			"icon": "UserFilled",
		},)
	}
})

</script>

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

.icons {
	width: 18px;
	height: 18px;
	margin-right: 5px;
}

/* 新增el-header样式 */
:deep(.el-header) {
	background: linear-gradient(90deg, #2563eb 60%, #1e3a8a 100%) !important;
	color: #fff;
	border-bottom: none;
}

/* 左侧菜单栏渐变背景和字体色 */
:deep(.el-aside) {
	background: linear-gradient(180deg, #4e628d 60%, #1e3a8a 100%) !important;
	
}
:deep(.el-menu) {
	background: transparent !important;
	color: #fff !important;
	border-right: none;
}
:deep(.el-menu-item) {
	color: #fff !important;
}
:deep(.el-menu-item.is-active) {
	background: rgba(37,99,235,0.18) !important;
	color: #fff !important;
}
</style>
