<template>
	<div class="Topmenu">
		<div class="TopmenuPir">
			<div class="TopmenuPir-logo">
				<div class="TopmenuPir-logo1">
					<img src="@/assets/img/logo2-1.png" alt="logo">
				</div>
				<div class="TopmenuPir-logo2">
					<img src="@/assets/img/logo2-2.png" alt="logo">
				</div>
			</div>
			<div class="TopmenuPir-mai">
				<div class="TopmenuPir-mai-ul">
					<el-popover placement="top-start" title="系统消息" trigger="hover"
						content="接收系统下发的新消息">
						<div slot="reference" class="TopmenuPir-mai-ul-li" @click="SetMenu(1)">
							<i class="el-icon-bell" style="font-size: 26px;"></i>
						</div>
					</el-popover>
					<el-popover placement="top-start" title="更换主题" trigger="hover"
						content="更改系统整体风格,字体颜色,背景色等等">
						<div slot="reference" class="TopmenuPir-mai-ul-li" @click="SetMenu(2)">
							<i class="el-icon-magic-stick" style="font-size: 26px;"></i>
						</div>
					</el-popover>
					<el-popover placement="top-start" title="全屏/正常模式" trigger="hover"
						content="切换全屏或者正常展示模式">
						<div slot="reference" class="TopmenuPir-mai-ul-li" @click="quan"><i class="el-icon-monitor" style="font-size: 26px;"></i></div>
					</el-popover>
					<div class="TopmenuPir-mai-ul-li">
						<el-dropdown @command="commands">
							<div class="el-dropdown-link dropdown-links" style="">
								<i class="el-icon-user" style="font-size: 26px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="a">设置</el-dropdown-item>
								<el-dropdown-item command="b">个人信息</el-dropdown-item>
								<el-dropdown-item command="c">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			SetMenu(e){
				this.$notify.error({
					title: '错误提示',
					message: '功能正在更新中，敬请留意',
					offset: 100
				});
			},
			commands(e){
				console.log(e)
				switch(e){
					case 'a':
						this.$notify.error({
							title: '错误提示',
							message: '功能正在更新中，敬请留意',
							offset: 100
						});
						break
					case 'b':
						this.$notify.error({
							title: '错误提示',
							message: '功能正在更新中，敬请留意',
							offset: 100
						});
						break
					default:
					this.$router.replace('/')
				}
			},
			quan() {//全屏
				if (window.innerHeight === window.screen.height) { // 利用屏幕分辨率和window对象的内高度来判断兼容IE
					document.exitFullscreen()
				} else {
					document.documentElement.requestFullscreen()
				}
			},
		}
	}
</script>

<style lang="scss">
	.Topmenu {
		background-color: #3a394e;
		height: 60px;
		color: #fff;
		.TopmenuPir {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100%;
			padding-right: 0 15px;

			.TopmenuPir-mai {
				color: #fff !important;

				.TopmenuPir-mai-ul {
					display: flex;
					align-items: center;

					.TopmenuPir-mai-ul-li {
						margin-right: 30px;
						cursor: pointer;

						.dropdown-links {
							width: 30px;
							height: 30px;
							background: #fff;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							outline: none;
						}
					}
				}
			}

			.TopmenuPir-logo {
				height: 60px;
				display: flex;
				align-items: center;
				.TopmenuPir-logo1 {
					width: 80px;
					height: 80px;
					display: flex;
					justify-content: center;
					align-items: center;
					// background: #fff;
					img {
						width: 60%;
						height: 60%;
						object-fit: contain;
					}
				}

				.TopmenuPir-logo2 {
					height: 60px;
					display: flex;
					margin-left: 10px;
					align-items: center;
					img {
						width: auto;
						height: 100%;
					}
				}
			}
		}
	}
</style>
