<template>
	<a-layout class="app-wrapper" :class="layoutClass">
		<!-- 默认布局：左侧双栏布局 -->
		<template v-if="layoutMode === 'default'">
			<a-layout-sider theme="dark" width="70"></a-layout-sider>
			<a-layout-sider theme="light"></a-layout-sider>
			<a-layout>
				<a-layout-header class="app-header">
					<breadcrumb />
				</a-layout-header>
				<a-layout-content><router-view></router-view></a-layout-content>
			</a-layout>
		</template>

		<!-- Menu布局：左侧菜单栏布局 -->
		<template v-else-if="layoutMode === 'menu'">
		</template>

		<!-- Top布局：顶部菜单栏布局 -->
		<template v-else-if="layoutMode === 'top'">
		</template>
	</a-layout>
</template>

<script setup>
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import breadcrumb from './components/breadcrumb.vue';

const layoutMode = ref('default')
const layoutClass = ref('layout-default')
</script>

<style scoped lang="scss">
.app-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;

	.app-header {
		display: flex;
		background-color: #ffffff;
		padding-inline: 20px;
		height: 50px;
		align-items: center;
	}

	/* 默认布局 */
	&.layout-default {
		flex-direction: row;

		.main-container {
			margin-left: 200px;

			&.has-sidebar {
				margin-left: 200px;
			}

			.fixed-header {
				width: calc(100% - 200px);
			}
		}

		&.is-collapse {
			.main-container {
				margin-left: 64px;

				.fixed-header {
					width: calc(100% - 64px);
				}
			}
		}
	}

	/* Menu布局 */
	&.layout-menu {
		.main-container {
			margin-left: 200px;

			&.has-sidebar {
				margin-left: 200px;
			}

			.fixed-header {
				width: calc(100% - 200px);
			}
		}

		&.is-collapse {
			.main-container {
				margin-left: 64px;

				.fixed-header {
					width: calc(100% - 64px);
				}
			}
		}
	}

	/* Top布局 */
	&.layout-top {
		.top-layout-container {
			width: 100%;
			height: 100%;

			.top-header {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 1002;
			}

			.top-main {
				padding-top: 50px;

				.top-userbar {
					position: fixed;
					top: 50px;
					right: 0;
					z-index: 1001;
					width: 100%;
					padding: 0;
				}

				.app-main {
					padding-top: 60px;
				}
			}
		}
	}
}
</style>
