<template>
	<el-container class="container">
		<el-aside width="200px">
			<div class="logo">
				<img src="./static/logo.png" alt="logo">
			</div>
			<el-menu default-active="1" background-color="#141B2E" text-color="#E4ECFF">
				<el-submenu index="1">
					<template #title><i class="el-icon-monitor"></i>设备管理</template>
					<router-link to="/map/lp">
						<el-menu-item index="1-1">位置分布</el-menu-item>
					</router-link>
					<router-link to="/devices/lp">
						<el-menu-item index="1-2">设备列表-路牌</el-menu-item>
					</router-link>
					<router-link to="/devices/ubi">
						<el-menu-item index="1-3">设备列表-普适型</el-menu-item>
					</router-link>
				</el-submenu>

				<el-submenu index="2">
					<template #title><i class="el-icon-monitor"></i>设备监控</template>
					<router-link to="/logs">
						<el-menu-item index="2-1">MQTT消息日志</el-menu-item>
					</router-link>
				</el-submenu>

				<el-submenu index="3">
					<template #title><i class="el-icon-setting"></i>系统设置</template>
					<router-link to="/users">
						<el-menu-item index="3-1">用户管理</el-menu-item>
					</router-link>
					<router-link to="/groups">
						<el-menu-item index="3-2">设备组管理</el-menu-item>
					</router-link>
				</el-submenu>

			</el-menu>
		</el-aside>
		<el-container>
			<el-header class='header' style="height: 50px;">
				<div class="dropdown">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
							{{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-header>
			<el-main>
				<!-- vue3.0配置-->
				<router-view v-slot="{Component}">
					<keep-alive>
						<component :is="Component" />
					</keep-alive>
				</router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import TokenManager from '../../static/js/token.js'

	export default {
		data() {
			return {
				nickname: '管理员',
			};
		},
		mounted() {
			this.initToken();
		},
		methods: {
			/**
			 * 查看token信息
			 */
			initToken: function() {
				this.$http.Get(this.$global.verify, {}).then(res => {
					const obj = JSON.parse(TokenManager.getToken());
					this.nickname = obj.nickname;
				})
			},
			/**
			 * 退出
			 */
			logout: function() {
				this.$http.Get(this.$global.logout, {}).then(res => {
					this.$router.replace("/login");
					TokenManager.removeToken();
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100%;

		& .logo {
			box-sizing: border-box;
			padding-top: 10px;
			padding-left: 20px;
			width: 100%;
			height: 60px;

			& img {
				width: 40px;
				height: 40px;
			}

		}

		& .header {
			background: #f3f5f9;

			& .dropdown {
				float: right;
				margin-right: 30px;
				cursor: pointer;
				line-height: 50px;
			}
		}

		& .el-main {
			background: #f3f5f9;
			height: 100%;
			overflow-x: hidden;
			overflow-y: scroll;
			box-sizing: border-box;
			padding: 0 15px 20px 20px;

		}

		& .el-aside {
			height: 100%;
			background: #141b2e;

			& .el-menu {
				border: none;
			}
		}
	}
</style>
