<style lang="scss">
@import '../style/home.scss';
.head{
	width:30px;
	height:30px;
	border-radius:50%;
	float:left;
	margin:10px;
}
.settings{
	ul{
		position:relative;
		left:50px;
		top:-11px;
		z-index:4;
		background-color:#eee;
		border-radius:5px;
		list-style: none;
		color:#000;
		li{
			height:40px;
			line-height:40px;
		}
	}
}
</style>

<template>
	<el-container>
		<el-header class="header">
			<h1><img height="60px" src="../images/logo.png" alt=""> <span>
				<!-- <el-divider direction="vertical"></el-divider>  -->
				{{now}}</span></h1>
			<!-- <img class="logo" src="../images/logo.png" alt=""> -->
			<div class="settings">
				<span>
					<i class="el-icon-s-custom"></i>
					{{info.name}}
				</span>
				<!-- <el-dropdown >
					<span> <i class="el-icon-s-custom"></i>{{checkedCompany?checkedCompany:info.name}} <i class="el-icon-arrow-down"></i></span>
					<el-dropdown-menu slot="dropdown">
						<div v-for='(item,i) in info.enterprise_children' :key='i'  @click='getDataAgain(item)'>
							<el-dropdown-item>{{item.name}}</el-dropdown-item>
						</div>
						
					</el-dropdown-menu>
				</el-dropdown> -->
        <span class="logout" @click="logout"><i class="el-icon-switch-button"></i> 退出登录</span>
			</div>
		</el-header>
		<el-container class="main">
			<!-- 左侧菜单 -->
			<el-aside class="left-aside" width="210px">
				<el-menu background-color='#151932'	text-color='#ffffff' :unique-opened='true'  :default-active="$route.path" router class="left-menue" active-text-color="#ffffff">
					<template v-for="(item, index) in $router.options.routes"  >
							<el-menu-item v-show="permission(item.name)"  v-if='item.show&&item.isLeaf' :index="item.path"  :key='index'>
								<i :class="item.icon"></i>
								<span slot="title">{{item.name}}</span>
							</el-menu-item>
							<el-submenu v-show="permission(item.name)"  v-if='item.show&&!item.isLeaf' :index="'index_'+index"  :key='index'>
								<template slot="title" >
								<i :class="item.icon"></i>
								<span>{{item.name}}</span>
								</template>
								<el-menu-item-group>
									<el-menu-item class="child" v-for="(child,idx) in item.children"   :key="index+'_'+idx" :index="child.path" v-show='permission(child.name) && !child.hide'>
									{{child.name}}
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
					</template>
				</el-menu>
			</el-aside>
			<!-- 右侧内容 -->
			<el-container>
				<el-main>			
					
						<transition name="fade" mode="out-in">
						<router-view  :info='info' :community='community' v-if='isShow'></router-view>
						</transition>
				</el-main>
				<!-- <el-footer>Footer</el-footer> -->
			</el-container>
		</el-container>
	</el-container>
</template>

<script>
export default {
	name: 'home',
	data() {
		return {
			checkedCompany:'',
			menuList:[],
			path:'',
			info:{},
			community_list:[],
			community:{},
			menu:[],
			now:(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString(),
			isShow:true
		};
	},
	methods: {
		getDate(){
			this.now=(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString()
		},
		logout(){
			localStorage.setItem('token','')
			localStorage.setItem('utype','')
			this.$api.logout().then(res=>{
				this.$router.push({path:'/login'})
			})
		},
		permission(name){
			let permissions=this.info.permissions||[];
			let list=[];
			for(let i=0;i<permissions.length;i++){
				list.push(permissions[i].name)
			}
			if(list.indexOf(name)<0){
				return false;
			}else{
				return true;
			}	
		},
		getData(){
			this.$api.getInfo().then(res=>{
				this.info=res.data.data
			})
		},
		getDataAgain(item){
			console.log(111,this.store)
			this.checkedCompany = item.name;
			this.$router.push({path:`/companyData`,query:{
				enterprise_id:item.id
			}})
			this.relode()
			// this.$store.commit("setId",item.id)
			// console.log(this.$store.getters.getId)
		},
		relode(){
			this.isShow = false;
			this.$nextTick(()=>{
				this.isShow = true;
			})
		}
	},
	created(){
		// console.log(this.$route)
		this.getData()
		var that=this;
		setInterval(function(){
			that.getDate();
		},1000)
	}
};
</script>
