<template>
	<!-- 默认布局 -->
	<section class="aminui-wrapper">
		<div v-if="!ismobile" class="aminui-side-split">
			<div class="aminui-side-split-top">
				<router-link :to="$CONFIG.DASHBOARD_URL">
					<img class="logo" :title="$CONFIG.APP_NAME" src="img/logo_2.png">
				</router-link>
			</div>
			<div class="adminui-side-split-scroll">
				<el-scrollbar>
					<ul>
						<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
							@click="showMenu(item)">
							<el-icon><component :is="item.meta.icon || el-icon-menu" /></el-icon>
							<p>{{ item.meta.title }}</p>
						</li>
					</ul>
				</el-scrollbar>
			</div>
		</div>
		<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
			<div v-if="!menuIsCollapse" class="adminui-side-top">
				<h2>{{ pmenu.meta.title }}</h2>
			</div>
			<div class="adminui-side-scroll">
				<el-scrollbar>
					<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
						<NavMenu :navMenus="nextMenu"></NavMenu>
					</el-menu>
				</el-scrollbar>
			</div>
			<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
				<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
			</div>
		</div>
		<Side-m v-if="ismobile"></Side-m>
		<div class="aminui-body el-container">
			<Topbar>
				<userbar @fatherMethod="reloadMenu"></userbar>
			</Topbar>
			<Tags v-if="!ismobile && layoutTags"></Tags>
			<div class="adminui-main" id="adminui-main">
				<router-view v-slot="{ Component }">
					<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
						<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
					</keep-alive>
				</router-view>
				<iframe-view></iframe-view>
			</div>
		</div>
	</section>

	<div class="main-maximize-exit" @click="exitMaximize"><el-icon><el-icon-close /></el-icon></div>

	<!-- <div class="layout-setting" @click="openSetting"><el-icon><el-icon-brush-filled /></el-icon></div> -->

	<!-- <el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
		<setting @fatherMethod="reloadMenu"></setting>
	</el-drawer> -->
</template>

<script>
	import SideM from './components/sideM.vue';
	import Topbar from './components/topbar.vue';
	import Tags from './components/tags.vue';
	import NavMenu from './components/NavMenu.vue';
	import userbar from './components/userbar.vue';
	//import setting from './components/setting.vue';
	import iframeView from './components/iframeView.vue';
    import { $t } from '@/locales'

	export default {
		name: 'index',
		components: {
			SideM,
			Topbar,
			Tags,
			NavMenu,
			userbar,
			//setting,
			iframeView
		},
		data() {
			return {
				//settingDialog: false,
				menu: [],
				nextMenu: [],
				pmenu: {},
				active: '',
				lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
			}
		},
		computed:{
			ismobile(){
				return this.$store.state.global.ismobile
			},
			layout(){
				return this.$store.state.global.layout
			},
			layoutTags(){
				return this.$store.state.global.layoutTags
			},
			menuIsCollapse(){
				return this.$store.state.global.menuIsCollapse
			}
		},
		created() {
			this.onLayoutResize();
			window.addEventListener('resize', this.onLayoutResize);
			var menu = this.$router.sc_getMenu();
			this.menu = this.filterUrl(menu);
			this.showThis()
			this.pmenu.meta.title = $t('menu.' + this.pmenu.name);
		},
		watch: {
			$route() {
				this.showThis()
			},
			layout: {
				handler(val){
					document.body.setAttribute('data-layout', val)
				},
				immediate: true,
			},
			lang(val){
				alert(val);
			}
		},
		methods: {
			reloadMenu(){
				var menu = this.$router.sc_getMenu();
				this.menu = this.filterUrl(menu);
				this.pmenu.meta.title = $t('menu.' + this.pmenu.name);
				this.nextMenu = this.filterUrl(this.pmenu.children);
			},
			// openSetting(){
			// 	this.settingDialog = true;
			// },
			onLayoutResize(){
				this.$store.commit("SET_ismobile", document.body.clientWidth < 992)
			},
			//路由监听高亮
			showThis(){
				this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
				this.nextMenu = this.filterUrl(this.pmenu.children);
				this.$nextTick(()=>{
					this.active = this.$route.meta.active || this.$route.fullPath;
				})
			},
			//点击显示
			showMenu(route) {
				route.meta.title = $t('menu.' + route.name)
				this.pmenu = route;
				this.nextMenu = this.filterUrl(route.children);
				if((!route.children || route.children.length == 0) && route.component){
					this.$router.push({path: route.path})
				}
			},
			//转换外部链接的路由
			filterUrl(map){
				var newMap = []
				map && map.forEach(item => {
					item.meta = item.meta?item.meta:{};
					item.meta.title = $t('menu.' + item.name)
					//处理隐藏
					if(item.meta.hidden){
						return false
					}
					//处理http
					if(item.meta.type=='iframe'){
						item.path = `/i/${item.name}`;
					}
					//递归循环
					if(item.children&&item.children.length > 0){
						item.children = this.filterUrl(item.children)
					}
					newMap.push(item)
				})
				return newMap;
			},
			//退出最大化
			exitMaximize(){
				document.getElementById('app').classList.remove('main-maximize')
			}
		}
	}
</script>
