<template>
	<el-container style="display: flex;flex-direction: column;">
		<el-header class="header">
			<div class="header-logo">
				贵州“林产品态势图”应用平台
				<!-- <img src="../assets/images/logo.png" /> -->
			</div>
			<div class="header-nav">
				<el-menu
					:default-active="activeIndex"
					mode="horizontal"
					@select="handleSelect"
					background-color="#000"
					text-color="#fff"
					active-text-color="#409EFF"
					:router="true"
				>
					<template v-for="(item, index) in leftMenus">
						<el-menu-item :index="item.url" :key="index">{{ item.name }}</el-menu-item>
						<!-- <el-menu-item v-if="!item.childs" :index="item.entity.path" :key="index">{{ item.entity.title }}</el-menu-item>
						<my-sub-menu v-if="item.childs" :subData="item.childs" :parIndex="index" :title="item.entity.title" :key="index + '0'"></my-sub-menu> -->

					</template>
				</el-menu>
			</div>
			<div class="header-user">
			  <div class="header-user-info">
				  <span>您好! {{getSysName}}</span>
				  <el-dropdown>
					  <i class="el-icon-setting" style="margin-right: 15px"></i>
					  <el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="loginOut">退出系统</el-dropdown-item>
					  </el-dropdown-menu>
				  </el-dropdown>
			  </div>
			</div>
		</el-header>
		<el-main class="mian">
			<router-view></router-view>
		</el-main>
		<!-- <el-footer class="footer" height="40px"><div>copyright&copy;2019 贵州弘维软件科技有限公司</div></el-footer> -->
		<!-- <el-footer class="footer" height="20px"></el-footer> -->
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			//leftMenus: [
				// {
				// 	entity: {
				// 		title: '区域数据管理',
				// 		path: '/data-source'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '坝区信息管理',
				// 		path: '/data-source'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '专家团队管理',
				// 		path: '/expert-team'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '数据源',
				// 		path: '/data-source'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '专题',
				// 		path: '/special-topic'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '可视化配置',
				// 		path: '/a-picture'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '角色管理',
				// 		path: '/role'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '用户管理',
				// 		path: '/user'
				// 	},
				// 	childs: false
				// },
				// {
				// 	entity: {
				// 		title: '系统管理',
				// 		path: ''
				// 	},
				// 	childs: [
				// 		{
				// 			entity: {
				// 				title: '角色管理',
				// 				path: '/role'
				// 			},
				// 			childs: false
				// 		},
				// 		{
				// 			entity: {
				// 				title: '用户管理',
				// 				path: '/user'
				// 			},
				// 			childs: false
				// 		}
				// 	]
				// }
			//]
		};
	},
	created(){
		//登录成功获取用户菜单及用户权限
		this.$port.getUserMenuTree().then(res => {
			this.$store.commit('saveUserTree',res.list || []);
			//跳转到菜单第计算页
			this.showPage && this.$router.push(this.showPage);
		});
	},
	computed: {
		//当前路由
		activeIndex() {
			return this.$route.path || '';
		},
		//获取登录用户名
		getSysName(){
			return this.$store.state.userInfo.name
		},
		//当前用户树
		leftMenus(){
			return this.$store.state.userTree || [];
		},
		//计算显示页
		showPage(){
			if(this.leftMenus.length){
				return (this.leftMenus.filter(x=>{
					if(x.url == this.activeIndex)return true;
				}).shift() || {})["url"] || this.leftMenus[0].url || '';
			}else{
				return false;
			}
		}
	},
	methods: {
		goYiManage(){
			this.$port.goYlAdmin()
				.then(res=>{
					window.open(res.loginUrl)
				})
		},
		loginOut(){
			let params = {
				userId:this.$store.state.userInfo.userId
			}
			console.log(params)
			this.$port.loginOut(params)
				.then(res=>{
					if (!res.code) {
						this.$message({
							message: '退出成功',
							type: 'success',
							duration:800
						});
						//同步数据到状态管理
						this.$store.commit("logout");
						this.$router.push('/login');
					}
				})
		},
		handleSelect(key, keyPath) {
			// console.log(key, keyPath);
		}
	}
};
</script>
<style lang="less">
.header {
	background-color: #000;
	display: flex;
	z-index: 2;
	&-logo {
		text-align: center;
		width: 25%;
		color:#fff;
		font-size:20px;
		font-weight:bold;
		&::after {
			content: '';
			display: inline-block;
			height: 100%;
			width: 0;
			opacity: 0;
			vertical-align: middle;
		}
		// img {
		// 	display: inline-block;
		// 	height: 70%;
		// 	vertical-align: middle;
		// }
	}
	&-nav {
		width:70%;
		// display: flex;
		// justify-content: flex-end;
	}
	&-user {
		width:10%;
		&-info{
			float:right;
			height:60px;
			line-height:60px;
			font-size:14px;
			text-align:right;
			color:#fff;
			.el-icon-setting{
				color:#fff;
				font-size:20px;
				vertical-align:middle;
			}
		}
	}
	&-userBtn{
		margin-top:15px;
		float:right;
	}
}
.mian {
	padding-bottom: 0;
	height: 100%;
}
.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.6;
	font-size: 14px;
}
</style>
