<template>
	<div class="navbar">
		<logo :collapse="isCollapse" />
		<div style="position: absolute;top: 0;left: 50%;transform: translate(-50%,0);width: calc(100% - 250px);">
			<Menu/>
		</div>
		<div class="right-menu">
			<div class="avatar-container">
				<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
					<div class="avatar-wrapper flex align-center">
						<UserAvatar :src="$store.state.user.user.avatar" size="40px" :enablePreview="false" />
						<div class="margin-left-xs" style="color:var(--van-white);">
							<div class="text-df text-bold">{{ $store.state.user.user.nickName }}</div>
							<div class="text-sm">{{ $store.state.user.user.userName }}</div>
						</div>
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<router-link to="/user/profile">
								<el-dropdown-item>个人中心</el-dropdown-item>
							</router-link>
							<el-dropdown-item divided command="logout">
								<span>退出登录</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>			
	</div>
</template>

<script setup>
	import modal from "@/plugins/modal";
	import Logo from "./Sidebar/Logo";
	import Tab from "./Sidebar/Tab";
	import Menu from "./Sidebar/Menu";
	// 自定义主题
	const showLogo = computed(() => proxy.$store.state.settings.sidebarLogo);
	const isCollapse = computed(() => !proxy.$store.state.app.sidebar.opened);
	const store = useStore();
	const getters = computed(() => store.getters);
	const activeIndex =ref('1');
	const {
		proxy
	} = getCurrentInstance();
	function handleCommand(command) {
		switch (command) {
			case "logout":
				logout();
				break;
			default:
				break;
		}
	}
	function logout() {
		modal
			.confirm("确定注销并退出系统吗？")
			.then(() => {
				store.dispatch("LogOut").then(() => {
					proxy.$router.replace("/login");
					proxy.$store.state.tagsView.visitedViews = [];
				});
			})
			.catch(() => {});
	}

	const emits = defineEmits(["setLayout"]);

	function setLayout() {
		emits("setLayout");
	}
</script>

<style lang='scss' scoped>
	.navbar {
		position: fixed;
		/* position: relative; */
		top: 0;
		left: 0;
		width:100%;
		z-index: 444;
		height: 60px;
		padding: 6px 10px;
		overflow: hidden;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
		background-color: #0071aa;
		.breadcrumb-container {
			float: left;
		}
		.topmenu-container {
			position: absolute;
			left: 50px;
		}
		.errLog-container {
			display: inline-block;
			vertical-align: top;
		}
		.right-menu {
			float: right;
			height: 100%;
			line-height: 50px;
			display: flex;
			&:focus {
				outline: none;
			}
			.right-menu-item {
				display: inline-block;
				padding: 0 8px;
				height: 100%;
				font-size: 18px;
				color: #5a5e66;
				vertical-align: text-bottom;
				&.hover-effect {
					cursor: pointer;
					transition: background 0.3s;
					&:hover {
						background: rgba(0, 0, 0, 0.025);
					}
				}
			}
			.avatar-container {
				margin-right: 20px;
				.avatar-wrapper {
					margin-top: 5px;
					position: relative;
					.user-avatar {
						cursor: pointer;
						width: 40px;
						height: 40px;
						border-radius: 10px;
					}
					i {
						cursor: pointer;
						position: absolute;
						right: -20px;
						top: 25px;
						font-size: 12px;
						
					}
				}
			}
		}
	}
</style>