<template>
	<!-- 通栏布局 -->
	<template v-if="layout == 'header'">
		<header class="adminui-header">
			<div class="adminui-header-left">
				<div class="logo-bar" v-if="!ismobile">
					<img class="logo" src="img/logo.png">
					<span>{{ baseData.title ? baseData.title : $CONFIG.APP_NAME }}</span>
				</div>
				<ul 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">
			<sc-water-mark ref="wm" :text="userName" :subtext="dateTime" color="rgba(228, 231, 237,0.3)">
				<div v-if="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>
			</sc-water-mark>
		</section>
	</template>

	<!-- 经典布局 -->
	<template v-else-if="layout == 'menu'">
		<header class="adminui-header">
			<div class="adminui-header-left">
				<div class="logo-bar">
					<img class="logo h40" :src="baseData.logo ? baseData.logo : 'img/logo.png'">
					<!-- <span>{{ baseData.title ? baseData.title : $CONFIG.APP_NAME }}</span> -->
					<div class="ml10">
						<el-tag v-if="userInfo.type==1">管理后台</el-tag>
						<el-tooltip class="box-item" effect="dark" :content="userInfo.vip_at==0?'到期时间：永久':'到期时间：'+$TOOL.getTime(userInfo.vip_at,'YYYY年MM月DD日')" placement="right" v-else>
							<el-tag v-if="userInfo.type==2">管理后台</el-tag>
							<el-tag v-if="userInfo.type==3">门店-旗舰版</el-tag>
							<el-tag v-if="userInfo.type==4">工厂-旗舰版</el-tag>
						</el-tooltip>
					</div>
				</div>
			</div>
			<div class="adminui-header-right">
				<userbar></userbar>
			</div>
		</header>
		<section class="aminui-wrapper">
			<div :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>
			<div class="aminui-body el-container">
				<Tags v-if="layoutTags"></Tags>
				<!-- <Topbar></Topbar> -->
				<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="img/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="#222b45"
						text-color="#fff" 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 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.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="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>

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

	<auto-exit></auto-exit>
</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 autoExit from './other/autoExit.js';
export default {
	name: 'index',
	components: {
		SideM,
		Topbar,
		Tags,
		NavMenu,
		userbar,
		setting,
		iframeView,
		autoExit
	},
	data() {
		return {
			settingDialog: false,
			menu: [],
			nextMenu: [],
			pmenu: {},
			userName: "",
			active: '',
			baseData: {},
			userInfo:{},
			notificationPermission: 'default',
			heartbeatTimer: null
		}
	},
	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);
		var userInfo = this.$TOOL.data.get("USER_INFO");
		this.userInfo = userInfo;

		this.userName = userInfo.truename;
		var baseData = this.$TOOL.data.get("SERVICE");
		this.baseData = baseData;
		this.showThis()
		// 页面加载时检查权限
		if (window.Notification && Notification.permission !== 'denied') {
			this.requestPermission()
		}
		if (this.userInfo.type == 3) {
			this.startHeartbeat()
		}
	},
	watch: {
		$route() {
			this.showThis()
		},
		layout: {
			handler(val) {
				document.body.setAttribute('data-layout', val)
			},
			immediate: true,
		}
	},
	beforeDestroy() {
		this.stopHeartbeat()
	},
	methods: {
		startHeartbeat() {
			this.sendHeartbeat() // 立即发送一次
			this.heartbeatTimer = setInterval(() => {
				this.sendHeartbeat()
			}, 45 * 1000)
		},
		stopHeartbeat() {
			if (this.heartbeatTimer) {
				clearInterval(this.heartbeatTimer)
				this.heartbeatTimer = null
			}
		},
		async sendHeartbeat(){
			await this.$API.serHeart.beat.get();
		},
		async requestPermission() {
			if (!("Notification" in window)) {
				alert("当前浏览器不支持通知功能")
				return false
			}
			try {
				const permission = await Notification.requestPermission()
				this.notificationPermission = permission
				return permission === "granted"
			} catch (error) {
				console.error('请求通知权限失败:', error)
				return false
			}
		},
		showNotification(title, options = {}) {
			if (this.notificationPermission !== 'granted') {
				console.warn('没有通知权限')
				return null
			}
			
			const notification = new Notification(title, {
				body: options.body || '',
				icon: options.icon || '/favicon.ico',
				tag: options.tag || Date.now().toString(),
				requireInteraction: options.requireInteraction || false,
				silent: options.silent || false,
				...options
			})
			
			// 点击通知回调
			notification.onclick = () => {
				window.focus()
				notification.close()
				if (options.onClick) options.onClick()
			}
			
			// 关闭通知回调
			notification.onclose = () => {
				if (options.onClose) options.onClose()
			}
			
			return notification
		},
		sendTestNotification() {
			this.showNotification('Vue 2 通知', {
				body: '这是一条测试通知',
				icon: 'https://vuejs.org/images/logo.png',
				tag: 'test-notification'
			})
		},
		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) {
			this.pmenu = route;
			this.nextMenu = this.filterUrl(route.children);
			if (route.meta.type == 'link') {
				window.open(route.path);
			} else {
				this.$router.push({ path: route.path })
			}
			// 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 : {};
				//处理隐藏
				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')
		}
	}
}
</script>

<style>
.ml10 {
	cursor: pointer;
}
</style>