<template>
	<div id="app">
		<el-container class="is-vertical fullheight">
			<template v-if="!$route.meta.single">
				<el-header
					class="theme_color no-print"
					v-if="
						$route.name &&
						$route.name != 'templateFormSingle' &&
						$route.name != 'onlineForm' &&
						$route.name != 'doneReadOnly'
					"
					height="48px"
					style="padding: 0 10px;"
				>
					<navigator />
				</el-header>
				<el-main
					class="base-main hidden_scroll fullheight"
					name="app-base-main"
				>
					<router-view
						v-if="isRouterAlive"
						style="margin: 0 auto; height: 100%;"
					/>
				</el-main>
			</template>
			<router-view v-if="$route.meta.single" />
		</el-container>
	</div>
</template>

<script>
import Navigator from '@/views/Navigator.vue';

export default {
	name: 'app',
	components: {
		Navigator,
	},
	data() {
		return {
			isRouterAlive: true,
		};
	},
	methods: {
		reload() {
			this.isRouterAlive = false;
			setTimeout(() => {
				this.isRouterAlive = true;
			}, 10);
		},
	},
	mounted() {
		// 因为resize事件在整个项目中只能监听一次，所以这里通过全局广播发送这个事件
		window.onresize = () => {
			this.$root.$emit('resize');
		};
		if ('login' != this.$route.name)
			this.$store.dispatch('setting/loadTenantSetting');
	},
	created() {
		const that = this;
		that.$store._vm.$root.$on('login-completed', function () {
			//获取静态资源目录
			that.$store.dispatch('menu/getStaticMenus');
			// 获取用户接口权限
			that.$store.dispatch('menu/getCurrentUserMethodAuth');
			// 获取动态资源目录
			that.$store.dispatch('menu/getSyncMenus');
		});
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.theme_color {
	background-color: $--theme-color;
}
#app {
	background: #f5f5f5;
}
@media print {
	#app {
		height: auto !important;
	}
	.no-print {
		display: none;
	}
	.base-main {
		background: #ffffff !important;
		padding: 0px !important;
	}
}
.base-main {
	background-color: $--bg-color-page;
	padding-top: 8px;
}
.hidden_scroll {
	&::-webkit-scrollbar {
		width: 0;
		background-color: transparent;
	}
}
.base-footer {
	border-top: 1.5px solid #ededed;
}

.el-dialog__header {
	padding: 10px !important;
	background: #f8f8f8;
	border-bottom: 1px solid #eee;
}

.el-dialog__header > .el-dialog__title {
	font-size: 15px;
}

.el-dialog__header > .el-dialog__headerbtn {
	top: 13px;
}

.el-dialog__header .el-dialog__close {
	font-weight: bold;
}

.el-dialog__footer {
	border-top: 1px solid #eee;
}

.rotating {
	animation: rotating 1.7s linear infinite;
}
</style>
