<template>
	<div class="mian-navbar">
		<figure>
			<h2>虎提山综合信息平台系统</h2>
			<span class="font_digit" id="nowTime"></span>
		</figure>
		<div class="navbar">
			<div class="navbar-line">
				<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
					<div class="avatar-wrapper el-icon-caret-bottom">
						<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
						<span>{{user.nickName}}</span>
					</div>
					<el-dropdown-menu slot="dropdown">
					  <!-- <span style="display:block;" @click="show = true">
						<el-dropdown-item>
						  布局设置
						</el-dropdown-item>
					  </span> -->
					  <router-link to="/user/center">
						<el-dropdown-item>
						  个人中心
						</el-dropdown-item>
					  </router-link>
					  <span style="display:block;" @click="open">
						<el-dropdown-item divided>
						  退出登录
						</el-dropdown-item>
					  </span>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import Avatar from '@/assets/images/avatar.png'
import { Tools } from '@/assets/js/common.js';
import { reqApi} from '@/assets/js/httpApi.js';
export default {
	components: {},
	data() {
		return {
			Avatar: Avatar,
			dialogVisible: false
		}
	},
	computed: {
		...mapGetters([
		  'user',
		  'baseApi'
		]),
		show: {
			get() {
				return this.$store.state.settings.showSettings
			},
			set(val) {
				this.$store.dispatch('settings/changeSetting', {
				  key: 'showSettings',
				  value: val
				})
			}
		}
	},
	created() {
	},
	mounted() {
		this.$nextTick(() => {
			// 时钟
			var nowTimeEl = this.$el.querySelector("#nowTime");
			var Loop1 = Tools.intervalLoop(1000, function(){
				var dateTime = qf.UI.Dates().format('yyyy年MM月dd日 HH:mm:ss');
				dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'});
				nowTimeEl.innerHTML = dateTime;
				//Loop1.clear();
			}, function(){
				var dateTime = qf.UI.Dates().format('yyyy年MM月dd日 HH:mm:ss');
				dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'});
				nowTimeEl.innerHTML = dateTime;
			});
			
			// 弹窗
			(function reqAlarmsPopup(){
				reqApi.getSos('get', {}).then((res)=>{
					var list = res.body || [];
					qf.UI.asyncLoop.call(this, list, function(key, item, next){
						var Notify = new qf.UI.Notify({
							type: 'warning',
							duration: 15000,
							autoOpen:true,
							message: '<div><div><span style="">'+item.peoplename+'</span> 发起呼救！</div><div>时间：'+item.cjtime+'</div></div>',
							onClose: function(v){
								setTimeout(function(){
									next()
								}, ~~(1+Math.random()*3) * 1000);
							},
							onClick: function(tag){							},
						});
					}, function(){
						setTimeout(function(){
							reqAlarmsPopup();
						}, 15000);
					})
				});
			}.bind(this))();
		});
	},
	methods: {
		open() {
		  this.$confirm('确定注销并退出系统吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		  }).then(() => {
			this.logout()
		  })
		},
		logout() {
		  this.$store.dispatch('LogOut').then(() => {
			location.reload()
		  })
		}
	}
}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family:"diget year";
		src: url("~@/assets/fonts/DS-Digital.ttf");
	};
	.font_digit{font-family:diget year;}

	.mian-navbar{
		position:relative;height:.70rem;width:100%;flex:none;/* min-height:60px; */

		figure{position:absolute;top:0;left:1.562vw;right:9.01vw;height:.65rem;margin:0;padding:0;
			background:no-repeat top center url('~@/assets/images/layout/top.png');background-size:100% 100%;
			h2{
				font-size:.36rem;line-height:.65rem;margin-top:.03rem;text-align:center;margin-left:1.28rem;
				background-color:#fff;
				-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.07rem;
			}
			.font_digit{
				position:absolute;top:.10rem;left:.10rem;height:auto;
				margin-right:.20rem;font-size:.23rem;color:#2ef4ee;
				span{font-family:serif;font-size:.24rem;margin:0 .05rem;}
			}
		}

		.navbar{
			position:absolute;top:0;right:1.666vw;height:.65rem;width:7.343vw;
			display:flex;align-items:center;justify-content:flex-end;user-select:none;cursor:normal;

			.avatar-wrapper{
				&:before{position:absolute;right:0;height:auto;width:12px;}
				
				position:relative;display:flex;align-items:center;padding-right:15px;color:#51dbff;font-size:13px;
				img{height:26px;width:26px;border-radius:4px;margin-right:4px;border:0;}
				span{display:block;max-width:55px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
			}

			&:focus {
			  outline: none;
			}
		}

		.errLog-container {
			display: inline-block;
			vertical-align: top;
		}
	}
</style>
