<template>
	<div style="height: 100%;">
		<el-main :style='"horizontal" == "vertical" ? (2 == 1 ? {"minHeight":"100%","padding":"0","margin":"0 0 0 210px","position":"relative","display":"block"} : (2 == 2 ? (isCollapse ? {"minHeight":"100%","padding":"0px 0 0 56px","margin":"0","position":"relative","background":"url(http://codegen.caihongy.cn/20230807/bc751527d2454c82a345e91b17a44608.jpg) no-repeat center top / cover","display":"block"} : {"minHeight":"100%","padding":"0px 0 0 260px","margin":"0","position":"relative","background":"url(http://codegen.caihongy.cn/20230807/bc751527d2454c82a345e91b17a44608.jpg) no-repeat center top / cover","display":"block"}) : "")) : {"minHeight":"100%","margin":"0","position":"relative","background":"#fff"}'>
			<!-- top -->
			<index-header :style='{"boxShadow":"0 0px 0 0 rgba(0,0,0,.01), 0 0px 0px 0 rgba(0,0,0,.06)","padding":"8px 10% 8px 5%","margin":"0 auto","borderColor":"#f6dce0","alignItems":"center","color":"#eee","display":"flex","justifyContent":"space-between","background":"#494f5d","borderWidth":"0 0 0px","width":"calc(100% - 0px)","fontSize":"16px","position":"relative","borderStyle":"solid","zIndex":"1002","height":"70px"}'></index-header>
			
			<!-- menu -->
			<template v-if="'horizontal' == 'vertical'">
			  <template v-if="2 == 1">
				<index-aside :style='{"boxShadow":"1px 0 6px  rgba(64, 158, 255, .3)","overflow":"hidden","top":"0","left":"0","background":"#304156","bottom":"0","width":"210px","fontSize":"0px","position":"fixed","height":"100%","zIndex":"1001"}'></index-aside>
			  </template>
			  <template v-if="2 == 2">
				<index-aside :is-collapse="isCollapse" @oncollapsechange="collapseChange" :style='isCollapse ? {"boxShadow":"0px 0 0px rgba(255,205,155,1)","padding":"40px 0 0","borderColor":"#f6dce0","bottom":"0","transition":"width 0.3s","overflow":"hidden","top":"0","left":"0","background":"rgba(0, 0, 0, 0.1)","borderWidth":"0 0px 0 0","width":"56px","fontSize":"0px","position":"fixed","borderStyle":"solid","height":"100%","zIndex":"1003"} : {"boxShadow":"0px 0 0px rgba(255,205,155,1)","padding":"70px 0px 0px","borderColor":"#f0cad3","bottom":"0px","transition":"width 0.3s","overflow":"hidden","top":"0px","left":"10px","background":"rgba(0, 0, 0, 0.0)","borderWidth":"0 0px 0 0","width":"260px","fontSize":"16px","position":"fixed","borderStyle":"solid","height":"100%","zIndex":"1003"}'></index-aside>
			  </template>
			</template>
			<template v-if="'horizontal' == 'horizontal'">
			  <template v-if="2 == 1">
				<index-aside :style='{"width":"100%","borderColor":"#efefef","borderStyle":"solid","background":"#304156","borderWidth":"0 0 1px 0","height":"auto"}'></index-aside>
			  </template>
			  <template v-if="2 == 2">
				<index-aside :style='{"padding":"0 5%","borderColor":"#efefef","margin":"0 auto","background":"#494f5d","borderWidth":"0 0 0px 0","display":"block","width":"calc(100% - 0px)","borderStyle":"solid","height":"auto"}'></index-aside>
			  </template>
			</template>
			
			<!-- breadcrumb -->
			<bread-crumbs :title="title" :style='{"padding":"0px 5%","margin":"0px auto","borderColor":"#eee","borderWidth":"0 0 0px","background":"none","width":"calc(100% - 0px)","fontSize":"16px","borderStyle":"solid"}' class="bread-crumbs"></bread-crumbs>
			
			<!-- TagsView -->
			<tags-view />
			
			<router-view class="router-view"></router-view>
		</el-main>
	</div>
</template>

<script>
	import IndexAside from '@/components/index/IndexAsideStatic'
	import IndexHeader from '@/components/index/IndexHeader'
	import TagsView from '@/components/index/TagsView'
	import menu from "@/utils/menu";
	export default {
		components: {
			IndexAside,
			IndexHeader,
			TagsView
		},
		data() {
			return {
				menuList: [],
				role: "",
				currentIndex: -2,
				itemMenu: [],
				title: '',
				isCollapse: false,
			};
		},
		mounted() {
			let menus = menu.list();
			this.menuList = menus;
			this.role = this.$storage.get("role");
		},
		created() {
			this.init();
		},
		methods: {
			init(){
				this.$nextTick(()=>{
					
				})
			},
			collapseChange(collapse) {
				this.isCollapse = collapse
			},
			menuHandler(menu) {
				this.$router.push({
					name: menu.tableName
				});
				this.title = menu.menu;
			},
			titleChange(index, menus) {
				this.currentIndex = index
				this.itemMenu = menus;
			},
			homeChange(index) {
				this.itemMenu = [];
				this.title = ""
				this.currentIndex = index
				this.$router.push({
					name: 'home'
				});
			},
			centerChange(index) {
				this.itemMenu = [{
					"buttons": ["新增", "查看", "修改", "删除"],
					"menu": "修改密码",
					"tableName": "updatePassword"
				}, {
					"buttons": ["新增", "查看", "修改", "删除"],
					"menu": "个人信息",
					"tableName": "center"
				}];
				this.title = ""
				this.currentIndex = index
				this.$router.push({
					name: 'home'
				});
				
			}
		}
	};
</script>
<style lang="scss" scoped>
	a {
		text-decoration: none;
		color: #555;
	}

	a:hover {
		background: #00c292;
	}
	
	.el-main {
		padding: 0;
		display: block;
	}

	.nav-list {
		width: 100%;
		margin: 0 auto;
		text-align: left;
		margin-top: 20px;

		.nav-title {
			display: inline-block;
			font-size: 15px;
			color: #333;
			padding: 15px 25px;
			border: none;
		}

		.nav-title.active {
			color: #555;
			cursor: default;
			background-color: #fff;
		}
	}

	.nav-item {
		margin-top: 20px;
		background: #FFFFFF;
		padding: 15px 0;

		.menu {
			padding: 15px 25px;
		}
	}
	
	.detail-form-content {
	    background: transparent;
	}
</style>
