<template>
	<!-- 通栏布局 -->
	<template v-if="layout=='header'">
		<header class="adminui-header">
			<div class="adminui-header-left">
				<div class="logo-bar">
					<img class="logo" :src="'/static/images/logo.png'">
					<span>{{ $CONFIG.APP_NAME }}</span>
				</div>
				<ul v-if="!ismobile" class="nav">
					<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>
						<span>{{ item.meta.title }}</span>
					</li>
				</ul>
			</div>
			<div class="adminui-header-right">
				<userbar></userbar>
			</div>
		</header>
		<section class="aminui-wrapper">
			<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 v-if="!ismobile"></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>
	</template>

	<!-- 经典布局 -->
	<template v-else-if="layout=='menu'">
		<header class="adminui-header">
			<div class="adminui-header-left">
				<div class="logo-bar">
					<img class="logo" :src="'/static/images/logo.png'">
					<span>{{ $CONFIG.APP_NAME }}</span>
				</div>
			</div>
			<div class="adminui-header-right">
				<userbar></userbar>
			</div>
		</header>
		<section class="aminui-wrapper">
			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
				<div class="adminui-side-scroll">
					<el-scrollbar>
						<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
							<NavMenu :navMenus="menu"></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 v-if="!ismobile"></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>
	</template>

	<!-- 功能坞布局 -->
	<template v-else-if="layout=='dock'">
		<header class="adminui-header">
			<div class="adminui-header-left">
				<div class="logo-bar">
					<img class="logo" :src="'/static/images/logo.png'">
					<span>{{ $CONFIG.APP_NAME }}</span>
				</div>
			</div>
			<div class="adminui-header-right">
				<div v-if="!ismobile" class="adminui-header-menu">
					<el-menu mode="horizontal" :default-active="active" router background-color="#fff" text-color="#222b45" active-text-color="var(--el-color-primary)">
						<NavMenu :navMenus="menu"></NavMenu>
					</el-menu>
				</div>
				<Side-m v-if="ismobile"></Side-m>
				<userbar></userbar>
			</div>
		</header>
		<section class="aminui-wrapper">
			<div class="aminui-body el-container">
				<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>
	</template>

	<!-- 默认布局 -->
	<template v-else>
		<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="'./static/images/logo-r.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></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>
	</template>

	<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>
	<div class="layout-setting layout-feedback" @click="openFeedback" v-auth="'feedback'"><el-icon><el-icon-chat-dot-square /></el-icon></div>

	<feedback ref="feedbackBox" v-if="feedbackDialog"></feedback>

	<el-drawer title="布局配置" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
		<setting></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 feedback from './components/feedback.vue';
import iframeView from './components/iframeView.vue';
import tool from '@/utils/tool'

export default {
	name: 'index',
	components: {
		SideM,
		Topbar,
		Tags,
		NavMenu,
		userbar,
		setting,
		feedback,
		iframeView
	},
	data() {
		return {
			settingDialog: false,
			feedbackDialog: false,
			menu: [],
			nextMenu: [],
			pmenu: {},
			active: ''
		}
	},
	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.setCache()
	},
	watch: {
		$route() {
			this.showThis()
		},
		layout: {
			handler(val){
				document.body.setAttribute('data-layout', val)
			},
			immediate: true,
		}
	},
	methods: {
		openSetting(){
			this.settingDialog = true;
		},
		openFeedback(){
			this.feedbackDialog = true
			this.$nextTick(() => {
				this.$refs.feedbackBox.open();
			})
		},
		onLayoutResize(){
			this.$store.commit("SET_ismobile", document.body.clientWidth < 992)
		},
		//路由监听高亮
		showThis(){
			this.active = ''
			this.pmenu = this.getParentMenu(this.$route.meta.parent_id)
			this.nextMenu = this.filterUrl(this.pmenu.children)
			this.$nextTick(()=>{
				this.active = this.$route.meta.active || this.$route.fullPath
			})
		},
		//点击显示
		showMenu(route) {
			this.pmenu = route;
			this.nextMenu = this.filterUrl(route.children);
			if((!route.children || route.children.length == 0) && route.component){
				this.$router.push({path: route.path})
			}
		},
		getParentMenu(pid){
			var menu = this.$TOOL.tree_to_list(this.$router.sc_getMenu())
			var pmenu = {}
			menu.map(item=>{
				if(item.id == pid){
					this.active = item.path
					if(item.parent_id == 0){
						pmenu = item
					}else{
						pmenu = this.getParentMenu(item.parent_id)
					}
				}
			})
			return pmenu
		},
		//转换外部链接的路由
		filterUrl(map){
			var newMap = []
			map && map.forEach(item => {
				item.meta = item.meta?item.meta:{};
				//处理隐藏
				if(item.meta.hidden || item.meta.type=="button"){
					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')
		},
		//设置缓存
		async setCache(){
			// 配置数据缓存
			if(!tool.data.get('cache_config')){
				let config = await this.$API.system.setting.list.get()
				if(config.code == 1){
					tool.data.set('cache_config', config.data)
				}
			}
			//字典数据缓存
			let res = await this.$API.system.dictionary.alldic.get();
			if(res.code == 1){
				for(let key in res.data){
					tool.data.set('cache_' + key, res.data[key])
				}
			}
			if(!tool.data.get('cache_department')){
				let department = await this.$API.auth.department.list.get({is_tree: 1})
				if(department.code == 1){
					tool.data.set('cache_department', department.data)
				}
			}
			// if(!tool.data.get('cache_area')){
			// 	let district = await this.$API.system.area.list.get({is_tree: 1})
			// 	if(district.code == 1){
			// 		tool.data.set('cache_area', district.data)
			// 	}
			// }
		}
	}
}
</script>
<style>
.layout-feedback{bottom: 160px;}
</style>
