<template>
	<!-- 经典布局 -->
	<template v-if="layout === 'classical'">
		<a-layout>
			<a-layout-sider
				v-if="!ismobile"
				v-model:collapsed="$store.state.global.menuIsCollapse"
				:trigger="null"
				collapsible
				:theme="sideTheme"
				width="210"
			>
				<header id="snowyHeaderLogo" class="snowy-header-logo">
					<div class="snowy-header-left">
						<div class="logo-bar">
							<img class="logo" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
							<span>{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
						</div>
					</div>
				</header>
				<div :class="$store.state.global.menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
					<div class="adminui-side-scroll">
						<a-menu
							v-model:openKeys="openKeys"
							v-model:selectedKeys="selectedKeys"
							:theme="sideTheme"
							mode="inline"
							@select="onSelect"
							@openChange="onOpenChange"
						>
							<NavMenu :nav-menus="menu"></NavMenu>
						</a-menu>
					</div>
				</div>
			</a-layout-sider>
			<!-- 手机端情况下的左侧菜单 -->
			<Side-m v-if="ismobile"></Side-m>
			<!-- 右侧布局 -->
			<a-layout>
				<div id="snowyHeader" class="snowy-header">
					<div class="snowy-header-left w-full" style="padding-left: 0px">
						<moduleMenu class="w-full" @switchModule="switchModule" />
						<Topbar v-if="!ismobile && breadcrumbOpen" />
					</div>
					<div class="snowy-header-right">
						<userbar />
					</div>
				</div>
				<!-- 多标签 -->
				<Tags v-if="!ismobile && layoutTagsOpen"></Tags>
				<a-layout-content class="main-content-wrapper">
					<div id="adminui-main" class="adminui-main">
						<router-view v-slot="{ Component }">
							<keep-alive :include="$store.state.keepAlive.keepLiveRoute">
								<component :is="Component" :key="$route.name" v-if="$store.state.keepAlive.routeShow" />
							</keep-alive>
						</router-view>
						<iframe-view></iframe-view>
						<div class="main-bottom-wrapper">
							<a style="color: #a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
								sysBaseConfig.SNOWY_SYS_COPYRIGHT
							}}</a>
						</div>
					</div>
				</a-layout-content>
			</a-layout>
		</a-layout>
	</template>

	<!-- 双排菜单布局 -->
	<template v-else-if="layout === 'doublerow'">
		<a-layout>
			<a-layout-sider v-if="!ismobile" width="80" :theme="sideTheme" :trigger="null" collapsible>
				<header id="snowyHeaderLogo" class="snowy-header-logo">
					<div class="snowy-header-left">
						<div class="logo-bar">
							<router-link to="/">
								<img class="logo" :title="sysBaseConfig.SNOWY_SYS_NAME" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
							</router-link>
						</div>
					</div>
				</header>
				<a-menu v-model:selectedKeys="doublerowSelectedKey" :theme="sideTheme" class="snowy-doublerow-layout-menu">
					<a-menu-item
						v-for="item in menu"
						:key="item.path"
						style="
							text-align: center;
							border-radius: 2px;
							height: auto;
							line-height: 20px;
							flex: none;
							display: block;
							padding: 12px 0 !important;
						"
						@click="showMenu(item)"
					>
						<a
							v-if="item.meta && item.meta.type === 'link'"
							:href="item.path"
							target="_blank"
							@click.stop="() => {}"
						></a>
						<template #icon>
							<component :is="item.meta.icon" style="padding-left: 10px" />
						</template>
						<div class="snowy-doublerow-layout-menu-item-fort-div">
							<span class="snowy-doublerow-layout-menu-item-fort-div-span">
								{{ item.meta.title }}
							</span>
						</div>
					</a-menu-item>
				</a-menu>
			</a-layout-sider>
			<a-layout-sider
				v-if="!ismobile"
				v-show="layoutSiderDowbleMenu"
				v-model:collapsed="$store.state.global.menuIsCollapse"
				:trigger="null"
				width="170"
				collapsible
				:theme="secondMenuSideTheme"
			>
				<div v-if="!menuIsCollapse" id="snowyDoublerowSideTop" class="snowy-doublerow-side-top">
					<h2 class="snowy-title">{{ pmenu.meta.title }}</h2>
				</div>
				<a-menu
					v-model:collapsed="$store.state.global.menuIsCollapse"
					v-model:openKeys="openKeys"
					v-model:selectedKeys="selectedKeys"
					mode="inline"
					:theme="secondMenuSideTheme"
					@select="onSelect"
				>
					<NavMenu :nav-menus="nextMenu"></NavMenu>
				</a-menu>
			</a-layout-sider>
			<!-- 手机端情况下的左侧菜单 -->
			<Side-m v-if="ismobile"></Side-m>
			<a-layout>
				<div id="snowyHeader" class="snowy-header">
					<div class="snowy-header-left w-full" style="padding-left: 0px">
						<moduleMenu class="w-full" @switchModule="switchModule" />
						<Topbar v-if="!ismobile && breadcrumbOpen" />
					</div>
					<div class="snowy-header-right">
						<userbar />
					</div>
				</div>
				<!-- 多标签 -->
				<Tags v-if="!ismobile && layoutTagsOpen"></Tags>
				<a-layout-content class="main-content-wrapper">
					<div id="adminui-main" class="adminui-main">
						<router-view v-slot="{ Component }">
							<keep-alive :include="$store.state.keepAlive.keepLiveRoute">
								<component :is="Component" v-if="$store.state.keepAlive.routeShow" :key="$route.name" />
							</keep-alive>
						</router-view>
						<iframe-view></iframe-view>
						<div class="main-bottom-wrapper">
							<a style="color: #a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
									sysBaseConfig.SNOWY_SYS_COPYRIGHT
							}}</a>
						</div>
					</div>
				</a-layout-content>
			</a-layout>
		</a-layout>
	</template>

	<!-- 退出最大化 -->
	<div class="main-maximize-exit" @click="exitMaximize">
		<fullscreen-exit-outlined style="color: #fff" />
	</div>
</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 iframeView from './components/iframeView.vue'
	import moduleMenu from './components/moduleMenu.vue'
	import { ThemeModeEnum } from '@/utils/enum'
	import tool from '@/utils/tool'
	import store from '@/store'

	export default defineComponent({
		name: 'Index',
		components: {
			SideM,
			Topbar,
			Tags,
			NavMenu,
			userbar,
			moduleMenu,
			iframeView
		},
		data() {
			return {
				menu: [],
				moduleMenu: [],
				nextMenu: [],
				pmenu: {},
				doublerowSelectedKey: [],
				layoutSiderDowbleMenu: true,
				onSelectTag: false,
				selectedKeys: [],
				openKeys: [],
				openKeysOther: [],
				sysBaseConfig: tool.data.get('SNOWY_SYS_BASE_CONFIG') || store.state.global.sysBaseConfig
			}
		},
		computed: {
			sideTheme() {
				const theme = this.$store.state.global.theme
				return theme === ThemeModeEnum.REAL_DARK ? ThemeModeEnum.DARK : theme
			},
			secondMenuSideTheme() {
				const theme = this.$store.state.global.theme
				return theme === ThemeModeEnum.REAL_DARK ? ThemeModeEnum.DARK : ThemeModeEnum.LIGHT
			},
			ismobile() {
				return this.$store.state.global.ismobile
			},
			layout() {
				return this.$store.state.global.layout
			},
			layoutTagsOpen() {
				return this.$store.state.global.layoutTagsOpen
			},
			menuIsCollapse() {
				return this.$store.state.global.menuIsCollapse
			},
			breadcrumbOpen() {
				return this.$store.state.global.breadcrumbOpen
			},
			topHanderThemeColorOpen() {
				return this.$store.state.global.topHanderThemeColorOpen
			},
			topHanderThemeColorSpread() {
				return this.$store.state.global.topHanderThemeColorSpread
			}
		},
		watch: {
			$route() {
				this.showThis()
			},
			layout: {
				handler(val) {
					document.body.setAttribute('data-layout', val)
					if (val.includes('doublerow')) {
						this.setDoublerowSelectedKey()
					}
					this.$nextTick(() => {
						// 顶栏主题色
						this.switchoverTopHanderThemeColor()
					})
				},
				immediate: true
			},
			topHanderThemeColorOpen() {
				this.switchoverTopHanderThemeColor()
			},
			topHanderThemeColorSpread() {
				this.switchoverTopHanderThemeColor()
			}
		},
		created() {
			// 判断浏览器宽度，顺手加入缓存
			this.onLayoutResize()
			window.addEventListener('resize', this.onLayoutResize)
			this.moduleMenu = this.$router.getMenu()
			// 获取缓存中的菜单模块是哪个
			const menuModuleId = this.$TOOL.data.get('SNOWY_MENU_MODULE_ID')
			let menu = []
			if (menuModuleId) {
				// 防止切换一个无此应用的人
				const module = this.$router.getMenu().filter((item) => item.id === menuModuleId)
				if (module.length > 0) {
					menu = module[0].children
				} else {
					menu = this.$router.getMenu()[0].children
				}
			} else {
				menu = this.$router.getMenu()[0].children
			}
			// 此菜单为正常模块下的菜单
			this.menu = this.filterUrl(menu)
			this.showThis()
		},
		mounted() {
			this.switchoverTopHanderThemeColor()
		},
		methods: {
			// 切换应用
			switchModule(id) {
				const menu = this.moduleMenu
				if (menu.length > 0) {
					const menus = menu.filter((item) => item.id === id)[0].children
					if (menus.length > 0) {
						// 将此模块的唯一值加入缓存
						this.$TOOL.data.set('SNOWY_MENU_MODULE_ID', id)
						// 正儿八百的菜单
						this.menu = this.filterUrl(menus)
						// 然后将其跳转至指定界面，默认始终取排序第一的
						const path = this.traverseChild(this.menu)
						this.$router.push({ path })
					} else {
						this.$message.warning('该模块下无任何菜单')
					}
				}
			},
			// 遍历子集获取一个path
			traverseChild(menu) {
				if (menu[0].children !== undefined) {
					if (menu[0].children.length > 0) {
						return this.traverseChild(menu[0].children)
					} else {
						return menu[0].path
					}
				} else {
					return menu[0].path
				}
			},
			// 当菜单被选中时
			onSelect(obj) {
				this.onSelectTag = true
				const pathLength = obj.keyPath.length
				const path = obj.keyPath[pathLength - 1]
				this.$router.push({ path })
				// 设置选中
				this.selectedKeys = obj.selectedKeys
			},
			onLayoutResize() {
				const clientWidth = document.body.clientWidth
				if (clientWidth < 992) {
					this.$store.commit('SET_ismobile', true)
				} else {
					this.$store.commit('SET_ismobile', false)
				}
			},
			// 路由监听高亮
			showThis() {
				this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
				const nextTickMenu = this.filterUrl(this.pmenu.children)
				this.$nextTick(() => {
					let routeMenu = this.filterUrl(this.pmenu.children)
					const active = this.$route.meta.active || this.$route.fullPath
					const parentPathArray = this.getParentKeys(routeMenu, active)
					if (parentPathArray) {
						const parentPath = parentPathArray[parentPathArray.length - 1]
						// 这一串操作下来只为取到最上面的路由的孩子们，最后成为双排菜单的第二排
						const nextMenuTemp = nextTickMenu.filter((item) => item.path === parentPath)[0].children
						if (nextMenuTemp) {
							this.nextMenu = nextTickMenu.filter((item) => item.path === parentPath)[0].children
						}
					}
					this.selectedKeys = new Array(active)
					if (!this.onSelectTag) {
						const pidKey = this.getParentKeys(this.menu, active)
						this.openKeys = pidKey
					} else if (this.$store.state.global.sideUniqueOpen) {
						const pidKey = this.getParentKeys(this.menu, active)
						this.openKeys = pidKey
					}
					// 双排菜单下
					if (this.layout === 'doublerow') {
						this.setDoublerowSelectedKey()
					}
				})
			},
			// 双排菜单下点击显示右侧分栏
			showMenu(route) {
				this.pmenu = route
				if (this.pmenu.children) {
					this.nextMenu = this.filterUrl(this.pmenu.children)
				}
				if (!route.children || route.children.length === 0) {
					this.layoutSiderDowbleMenu = false
					this.$router.push({ path: route.path })
				} else {
					this.layoutSiderDowbleMenu = true
				}
				if (this.layout === 'doublerow') {
					this.doublerowSelectedKey = [route.path]
				}
			},
			// 设置双排菜单下的首列默认选中
			setDoublerowSelectedKey() {
				const pidKey = this.getParentKeys(this.menu, this.selectedKeys.toString())
				this.$nextTick(() => {
					const pidKeyArray = []
					for (const key in pidKey) {
						pidKeyArray.push(key)
					}
					if (pidKeyArray.length > 1) {
						this.layoutSiderDowbleMenu = true
					} else {
						this.layoutSiderDowbleMenu = false
					}
				})
				// 设置第一排选中的
				this.menu.forEach((item) => {
					if (pidKey !== undefined) {
						if (pidKey[pidKey.length - 1].toString() === item.path) {
							this.doublerowSelectedKey = [item.path]
						}
					}
				})
			},
			// 菜单展开/关闭的回调
			onOpenChange(keys) {
				if (this.$store.state.global.sideUniqueOpen) {
					// 获取最新的
					const openKey = keys[keys.length - 1]
					if (keys.length > 1) {
						// 获取上级
						const pidKey = this.getParentKeys(this.menu, openKey)
						this.openKeys = pidKey
					} else {
						this.openKeys = Array.of(openKey) // new Array(openKey);
					}
				} else {
					this.openKeys = keys
				}
			},
			// 获取上级keys
			getParentKeys(data, val) {
				// 递归父级key
				for (const element of data) {
					if (element.path === val) {
						return [element.path]
					}
					if (element.children) {
						const far = this.getParentKeys(element.children, val)
						if (far) {
							return far.concat(element.path)
						}
					}
				}
			},
			// 转换外部链接的路由
			filterUrl(map) {
				const newMap = []
				// eslint-disable-next-line no-unused-expressions
				map &&
					map.forEach((item) => {
						item.meta = item.meta ? item.meta : {}
						// 处理隐藏
						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')
			},
			// 切换顶栏颜色
			switchoverTopHanderThemeColor() {
				// 界面顶栏设置颜色
				const header = document.getElementById('snowyHeader')
				this.topHanderThemeColorOpen
					? header.classList.add('snowy-header-primary-color')
					: header.classList.remove('snowy-header-primary-color')
				// 判断是否开启了通栏
				const headerLogin = document.getElementById('snowyHeaderLogo')
				try{
					this.topHanderThemeColorSpread
						? headerLogin.classList.add('snowy-header-logo-primary-color')
						: headerLogin.classList.remove('snowy-header-logo-primary-color')
				}catch (e) { }
				// 如果是双排菜单，吧第二排的也给渲染了
				if (this.layout === 'doublerow') {
					const snowyDoublerowSideTop = document.getElementById('snowyDoublerowSideTop')
					try{
						this.topHanderThemeColorSpread
							? snowyDoublerowSideTop.classList.add('snowy-doublerow-side-top-primary-color')
							: snowyDoublerowSideTop.classList.remove('snowy-doublerow-side-top-primary-color')
					}catch (e) { }
				}
			}
		}
	})
</script>
