<template>
	<div class="navbar">
		<div class="left-menu">
			<logo/>
		</div>
		<div class="left-menu" style="width:calc(100% - 766px);">
			<sidebar/>
		</div>
		<div class="right-menu">
			<time-zone/>
			<div>
				<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
					<div class="avatar-wrapper flex align-center">
						<svg-icon icon-class="user"/>
						<div class="margin-left-xs">
							<div class="text-df text-bold" style="text-decoration: underline;">{{ $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 command="setLayout">
								<span>布局设置</span>
							</el-dropdown-item>
							<el-dropdown-item divided command="logout">
								<span>退出登录</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="margin-right-sm pointer">
				<svg-icon icon-class="close"/>
			</div>
		</div>
	</div>
</template>

<script setup>
	import modal from "@/plugins/modal";
	import Logo from './Sidebar/Logo.vue';
	import Sidebar from "./Sidebar/index.vue";
	import TimeZone from "@/components/TimeZone";
	// import ShipSelect from "@/components/ShipSelect";
	import ToggleTheme from "@/components/ToggleTheme";

	const store = useStore();
	const getters = computed(() => store.getters);

	function toggleSideBar() {
		store.dispatch("app/toggleSideBar");
	}

	function handleCommand(command) {
		switch (command) {
			case "setLayout":
				setLayout();
				break;
			case "logout":
				logout();
				break;
			default:
				break;
		}
	}

	function logout() {
		modal
			.confirm("确定注销并退出系统吗？")
			.then(() => {
				store.dispatch("LogOut").then(() => {
					location.href = "./";
				});
			})
			.catch(() => {});
	}

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

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

<style lang='scss' scoped>
	.navbar {
		height: 60px;
		overflow: hidden;
		position: relative;
		color: #fff;
		background: #2da5f0;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
		.left-menu{
			float: left;
			padding: 0 8px;
		}
		.right-menu {
			float: right;
			height: 100%;
			/* line-height: 60px; */
			display: flex;
			align-items: center;
			&:focus {
				outline: none;
			}
			.right-menu-item {
				display: inline-block;
				padding: 0 8px;
				height: 100%;
				font-size: 18px;
				color: #fff;
				vertical-align: center;
				&.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>