<template>
	<section class="app-main">
		<transition name="fade-transform" mode="out-in">
			<keep-alive :include="cachedViews">
				<router-view :key="key" />
			</keep-alive>
		</transition>
	</section>
</template>

<script>
export default {
	name: 'AppMain',
	data() {
		return {
			cachedViewsList: []
		}
	},
	computed: {
		cachedViews() {
			return this.$store.state.tagsView.cachedViews
		},
		key() {
			return this.$route.path
		}
	}
}
</script>

<style lang="scss" scoped>
.app-main {
	/* 50= navbar  50  */
	display: flex;
	flex-direction: column;
	// min-height: calc(100vh - 50px);
	// min-height: 100vh;
	height: 100vh;
	width: 100%;
	background: #f0f2f5;
	position: relative;
	// overflow: hidden;
	overflow: auto;
}

.fixed-header + .app-main {
	padding-top: 50px;
}

.hasTagsView {
	.app-main {
		/* 84 = navbar + tags-view = 50 + 34 */
		// min-height: calc(100vh - 84px);
	}

	.fixed-header + .app-main {
		padding-top: 84px;
	}
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
	.fixed-header {
		padding-right: 15px;
	}
}
</style>
