<template>
	<div class="navbar">
		<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
		<div class="title-container-index">
			<div class="index-top-title">
				<!-- <img src="../../icons/images/login/logo_login.png" alt=""> -->
				<div class="desc">靖安乡村民宿管理平台</div>
			</div>

			<div class="right-menu">
				<div class="show-time">
					<div class="d_show">{{date_show}}</div>
					<div class="t_show">{{time_show}}</div>
					<div class="w_show">{{week_show}}</div>
				</div>
				<span class="svg-shuxian">
					<svg-icon icon-class="shuxian" />
				</span>
				<span class="svg-czsc">
					<el-tooltip content="操作手册" placement="bottom" effect="light">
						<a href="https://www.jinganrenjiams.com/manage/" target="_blank">
							<img src="../../icons/images/index/czsc.png" alt="">
						</a>
					</el-tooltip>
				</span>
				<span class="svg-shuxian">
					<svg-icon icon-class="shuxian" />
				</span>
				<span class="svg-user">
					<!-- <svg-icon icon-class="user" /> -->
					<el-tooltip :content="role" placement="bottom" effect="light">
						<img src="../../icons/images/index/user.png" alt="">
					</el-tooltip>
				</span>
				<!-- <div class="right-role">{{role}}</div> -->
				<span class="svg-shuxian">
					<svg-icon icon-class="shuxian" />
				</span>
				<div class="exit" @click="logout">
					<span class="svg-exit">
						<svg-icon icon-class="exit" />
					</span>
					<div class="right-exit">退出</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	// import Breadcrumb from '@/components/Breadcrumb'
	import Hamburger from '@/components/Hamburger';

	export default {
		components: {
			// Breadcrumb,
			Hamburger
		},
		data() {
			return {
				role: this.$store.state.user.name,
				date_show: '',
				time_show: '',
				week_show: ''
			}
		},
		created() {
			// 获取日期-星期
			setTimeout(() => {
				this.getdataTime()
			}, 1000)
			// 读秒
			setInterval(() => {
				this.getnewTime()
			}, 1000)
		},
		updated() {
			if (typeof this.role == 'undefined' || this.role == '') {
				this.autoLogout();
			}
		},
		computed: {
			...mapGetters([
				'sidebar',
				'avatar'
			])
		},
		methods: {
			// 侧边栏 显示 和 隐藏
			toggleSideBar() {
				this.$store.dispatch('app/toggleSideBar')
			},
			// 无用户名自动退出
			autoLogout() {
				this.$store.dispatch('user/logout')
				this.$router.push(`/login?redirect=${this.$route.fullPath}`)
				this.$message({
					type: 'success',
					message: '登录已过期，请重新登录！'
				});
			},
			// 退出登录
			async logout() {
				await this.$confirm('即将退出登录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$store.dispatch('user/logout')
					this.$router.push(`/login?redirect=${this.$route.fullPath}`)
					this.$message({
						type: 'success',
						message: '已退出成功！'
					});
				}).catch(() => {
					this.$message({
						type: 'error',
						message: '已取消退出！'
					});
				});
			},
			// 获取当前日期时间星期
			get_datetime() {
				this.datetime = new Date().toLocaleString() + ' 星期' + '日一二三四五六'.charAt(new Date().getDay())
			},
			// 获取当前系统日期
			getdataTime() {
				let wk = new Date().getDay()
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();

				mm = mm < 10 ? '0' + mm : mm
				dd = dd < 10 ? '0' + dd : dd

				let weeks = ['日', '一', '二', '三', '四', '五', '六']
				this.week_show = '星期' + weeks[wk]
				this.date_show = yy + "-" + mm + "-" + dd + " "
			},
			// 获取当前系统的时间
			getnewTime() {
				let hh = new Date().getHours();
				let mf = new Date().getMinutes()
				let ss = new Date().getSeconds()

				mf = mf < 10 ? "0" + mf : mf;
				ss = ss < 10 ? "0" + ss : ss;

				this.time_show = hh + ":" + mf + ":" + ss;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		// height: 50px;
		height: 90px;
		overflow: hidden;
		position: relative;
		background: #FFFFFF;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

		.hamburger-container {
			line-height: 46px;
			height: 100%;
			float: left;
			cursor: pointer;
			transition: background .3s;
			-webkit-tap-highlight-color: transparent;

			&:hover {
				background: rgba(0, 0, 0, .025)
			}
		}

		.breadcrumb-container {
			float: left;
		}

		.title-container-index {
			display: flex;
			justify-content: space-between;
			height: 90px;

			.index-top-title {
				display: flex;
				align-items: center;

				// img {
				// 	width: 48px;
				// 	height: 48px;
				// 	margin-right: 10px;
				// }

				.desc {
					font-size: 30px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #46515E;
				}
			}

			.right-menu {
				display: flex;
				align-items: center;
				font-size: 22px;
				padding-right: 20px;

				.show-time {
					display: flex;
					align-items: center;
					font-family: Microsoft YaHei-3970(82674968);
					color: #53575A;

					.w_show {
						margin: 0;
					}

					.t_show {
						font-weight: bold;
						margin: 0 10px;
					}
				}

				.svg-shuxian {
					font-size: 40px;
					color: #808080;
				}

				.svg-user {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50px;
					height: 50px;
					border-radius: 30px;
					font-size: 32px;
					background-color: #E0E9FD;
					color: #4493F8;
					overflow: hidden;

					img {
						width: 50px;
						height: 50px;
					}
				}

				.svg-czsc {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50px;
					height: 50px;
					font-size: 32px;
					border-radius: 30px;
					background-color: #E0E9FD;
					color: #4493F8;
					overflow: hidden;

					img {
						width: 60px;
						height: 60px;
						margin-top: 10px;
					}
				}

				.right-role {
					margin: auto 0 auto 10px;
				}

				.exit {
					display: flex;
					align-items: center;
					cursor: pointer;
				}

				.svg-exit {
					font-size: 26px;
					margin-right: 10px;
				}
			}


			// .right-menu {
			// 	display: flex;
			// 	height: 100%;
			// 	line-height: 90px;
			// 	margin-right: 20px;

			// 	&: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 .3s;

			// 			&:hover {
			// 				background: rgba(0, 0, 0, .025)
			// 			}
			// 		}
			// 	}

			// 	.avatar-container {
			// 		margin-right: 30px;

			// 		.avatar-wrapper {
			// 			display: flex;
			// 			align-items: center;
			// 			height: 90px;
			// 			margin-top: 5px;
			// 			position: relative;

			// 			.user-avatar {
			// 				cursor: pointer;
			// 				width: 40px;
			// 				height: 40px;
			// 				border-radius: 10px;
			// 			}

			// 			.el-icon-caret-bottom {
			// 				cursor: pointer;
			// 				position: absolute;
			// 				right: -20px;
			// 				top: 35px;
			// 				font-size: 14px;
			// 			}
			// 		}
			// 	}
			// }
		}
	}
</style>