<template>
	<div class="mian-navbar">
		<figure>
			<h3>物联网综合云平台系统</h3>
		</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'

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() {
	},
	methods: {
		open() {
		  this.$confirm('确定退出系统吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		  }).then(() => {
			this.logout()
		  })
		},
		logout() {
		  this.$store.dispatch('LogOut').then(() => {
			location.reload()
		  })
		}
	}
}
</script>

<style lang="scss" scoped>

	.mian-navbar{
		position:relative;height:6.018vh;width:100%;min-height:60px;

		figure{position:absolute;top:0;left:1.562vw;right:9.01vw;height:100%;margin:0;padding:0;
			//background:no-repeat top center url('~@/assets/images/layout/top_normal_min.png');background-size:100% 100%;
			display:flex;align-items:center;
			h3{flex:1;text-align:center;color:#fff;margin-left:6.6vw;font-size:2.0vw;letter-spacing:.4vw;}
		}

		.navbar{
			position:absolute;top:0;right:1.666vw;height:100%;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>
