<template>
	<div class="mian-navbar">
		<div class="title-ctn">
			<h2 v-if="!!pondName">{{pondName}}<!-- 安全监测系统 --></h2>
		</div>

		<div class="navbar">
			<div class="right">
				<div class="right-menu">
					<div>
						<el-tooltip content="风险大屏" v-if="risk_entrance" effect="dark" placement="bottom">
							<a class="el-icon-data-line" href="/edge/ScreenFX" target="_blank" ></a>
						</el-tooltip>
						<el-tooltip content="可视化大屏" effect="dark" placement="bottom">
							<a class="el-icon-s-platform" href="/edge/Screen" target="_blank" ></a>
						</el-tooltip>
					</div>
					<!-- <template >
						<el-tooltip content="全屏缩放" effect="dark" placement="bottom">
						  <screenfull id="screenfull" class="right-menu-item hover-effect" />
						</el-tooltip>
					</template> -->
				</div>
				<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>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
//import Screenfull from '@/components/Screenfull'
import { reqApi} from '@/assets/js/httpApi.js';
export default {
	//components: {Screenfull},
	data() {
		return {
			dialogVisible: false,
			pondName:'',
			risk_entrance:0,
		}
	},
	computed: {
		...mapGetters([
		  'user',
		  'baseApi',
		  'device',
		]),
		show: {
			get() {
				return this.$store.state.settings.showSettings
			},
			set(val) {
				this.$store.dispatch('settings/changeSetting', {
				  key: 'showSettings',
				  value: val
				})
			}
		}
	},
	created() {
		var self = this;
		reqApi.common.requstEdge('get', 'tab/tailpondinfor/dryinfo', {}).then(function(res){
			var body = res.body || {};
			var tailingname = body.tailingname;
			//self.pondName = tailingname.indexOf('尾矿库') > -1 ? tailingname : (tailingname||'') + '尾矿库';
			self.pondName = tailingname;
			self.risk_entrance = body.risk_entrance;

			//var $appMain = self.$parent.$el.querySelector(".app-main").__vue__;
			//var $cmPage = $appMain.$children[0];
		});
	},
	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:.65rem;width:100%;line-height:.65rem;
		background-image:linear-gradient(to right, #071C6B, #0C5AAF, #138FE7);
		display:flex;

		.title-ctn{
			height:100%;display:flex;align-items:center;margin-left:1.093vw;
			h2{
				font-size:.29rem;background-image:-webkit-linear-gradient(top, white, white, #b5cbfa);
				-webkit-background-clip:text;
				-webkit-text-fill-color:transparent;
			}
		}
	
		.navbar{
			flex:1;height:100%;
			//background:no-repeat left bottom url('~@/assets/images/layout/title_3.png');
			background-size:100% auto;

			.right{
				display:flex;align-items:center;justify-content:flex-end;user-select:none;cursor:normal;
				position:absolute;top:0;right:1.2vw;height:100%;
				&>div{
					display:flex;align-items:center;
					a{font-size:24px;margin-right:.10rem;}
				}
			}

			.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;
			}

			.right-menu{
				flex:1;color:#ADCBBC;margin-right:.20rem;
				&>div:last-child{
					display:flex;margin-left:10px;
					&:not(rect){
						font-size:18px;
					}
				}
			}
		}

		.errLog-container {
			display: inline-block;
			vertical-align: top;
		}
	}

</style>