<template>
	<div class="app-wrapper">
		<div
			v-show="showSidebar && mobileDrawerOpen"
			class="sidebar-backdrop"
			aria-hidden="true"
			@click="closeMobileDrawer" />
		<div class="fixed-header">
			<nav-bar class="nav-bar" />
		</div>
		<div class="main-wrapper">
			<side-bar
				v-show="showSidebar"
				class="sidebar-wrapper"
				:class="{ collapsed: isCollapsed }" />
			<app-main />
		</div>
		<!-- <app-footer /> -->
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { sideBar, appMain, navBar, appFooter } from './components'

const LAYOUT_MOBILE_MAX = 768

export default {
	name: 'layout',
	components: {
		sideBar,
		appMain,
		navBar,
		appFooter
	},
	data() {
		return {
			layoutWidth:
				typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
		}
	},
	computed: {
		...mapGetters(['sidebar']),
		isCollapsed() {
			return !this.sidebar.opened
		},
		isMobileLayout() {
			return this.layoutWidth <= LAYOUT_MOBILE_MAX
		},
		mobileDrawerOpen() {
			return this.isMobileLayout && this.sidebar.opened
		},
		// 是否显示菜单
		showSidebar() {
			let { menu } = this.$route.query || {}
			return menu != 0
		}
	},
	mounted() {
		this._layoutOnResize = () => {
			this.layoutWidth = window.innerWidth
		}
		window.addEventListener('resize', this._layoutOnResize)
	},
	beforeUnmount() {
		window.removeEventListener('resize', this._layoutOnResize)
	},
	methods: {
		closeMobileDrawer() {
			if (this.isMobileLayout && this.sidebar.opened) {
				this.$store.dispatch('main/closeSideBar')
			}
		}
	}
}
</script>

<style lang="less" scoped>
.app-wrapper {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #0f0f12;

	.sidebar-backdrop {
		display: none;
	}

	.fixed-header {
		z-index: 100;
		.navbar {
			height: 60px;
		}
	}

	.main-wrapper {
		display: flex;
		height: calc(100% - 60px);
		position: relative;
	}
}

@media (max-width: 768px) {
	.app-wrapper .sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 60px 0 0 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.55);
		backdrop-filter: blur(2px);
	}
}
</style>
