<template>
	<a-layout style="min-height: 100vh">
		<a-layout-sider
			v-if="app.layout.layout === 'side'"
			v-model:collapsed="collapsed"
			collapsible
			:theme="themeV"
			:style="siderStyle"
			:width="config.layout.sideBarWidth"
			:collapsed-width="64"
		>
			<div class="ant-pro-sider-logo">
				<site-logo :collapsed="collapsed" :logo="app.logo" :name="app.title"></site-logo>
			</div>
			<side-menu></side-menu>
			<template #trigger>
				<a-row
					:style="
						themeV === 'light'
							? { backgroundColor: token.colorBgContainer, borderRight: `1px solid ${token.colorBorder}` }
							: {}
					"
				>
					<a-col :span="24">
						<RightOutlined v-if="collapsed" />
						<LeftOutlined v-else />
					</a-col>
				</a-row>
			</template>
		</a-layout-sider>
		<a-layout-header v-else class="header" :style="headerStyle">
			<div
				class="ant-pro-top-nav-header-logo"
				:style="{
					lineHeight: `${config.layout.headerHeight}px`,
				}"
			>
				<site-logo :collapsed="collapsed"></site-logo>
			</div>
			<top-menu></top-menu>
			<right-content></right-content>
		</a-layout-header>
		<a-layout
			v-if="app.layout.layout === 'mix'"
			:style="{
				marginTop: app.layout.fixedHeader ? `${config.layout.headerHeight}px` : '0px',
				marginLeft:
					app.layout.fixSiderbar && hasMemu
						? `${app.layout.collapsed ? config.layout.collapsedWidth : config.layout.sideBarWidth}px`
						: '0px',
			}"
		>
			<mix-side-menu @has-menu="(v) => (hasMemu = v)"></mix-side-menu>
			<a-layout-content style="margin: 16px">
				<main-content></main-content>
				<a-layout-footer style="text-align: center">{{ app.copyright }}</a-layout-footer>
			</a-layout-content>
		</a-layout>
		<a-layout
			v-else
			:style="
				app.layout.fixSiderbar && app.layout.layout === 'side'
					? {
							marginLeft: `${app.layout.collapsed ? config.layout.collapsedWidth : config.layout.sideBarWidth}px`,
							zIndex: 0,
						}
					: {}
			"
		>
			<a-layout-header v-if="app.layout.layout === 'side'" class="header" :theme="themeV" :style="sideHeaderStyle">
				<div :style="{ flex: ' 1 1 0%' }"></div>
				<right-content></right-content>
			</a-layout-header>
			<a-layout :style="app.layout.fixedHeader ? { marginTop: `${config.layout.headerHeight}px` } : {}">
				<a-layout-content style="margin: 16px">
					<main-content></main-content>
				</a-layout-content>
				<a-layout-footer style="text-align: center">
					{{ app.copyright }}
				</a-layout-footer>
			</a-layout>
		</a-layout>
		<setting-drawer></setting-drawer>
	</a-layout>
</template>
<script lang="ts" setup>
	import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
	import SettingDrawer from './components/setting-drawer.vue'
	import SiteLogo from './components/site-logo.vue'
	import RightContent from './components/right-content.vue'
	import MainContent from './components/main-content.vue'
	import SideMenu from './components/side-menu.vue'
	import TopMenu from './components/top-menu.vue'
	import MixSideMenu from './components/mix-side-menu.vue'

	import { theme } from 'ant-design-vue'
	import { config } from '@/settings/application'
	import { useAppStore } from '@/stores/app'

	const app = useAppStore()
	const collapsed = computed({
		get() {
			return app.layout.collapsed
		},
		set(newValue) {
			app.layout.collapsed = newValue
		},
	})

	const themeV = computed(() => {
		return app.layout.navTheme === 'light' ? 'light' : 'dark'
	})
	const hasMemu = ref(true)
	const { useToken } = theme
	const { token } = useToken()

	const headerStyle = computed(() => {
		return Object.assign(
			app.layout.fixedHeader ? { position: 'fixed', zIndex: 1, width: '100%' } : {},
			app.layout.layout === 'mix'
				? {
						height: `${config.layout.headerHeight}px`,
					}
				: {
						height: `${config.layout.headerHeight}px`,
						backgroundColor: themeV.value === 'dark' ? '#001529' : token.value.colorBgContainer,
						borderBottom: `1px solid ${token.value.colorBorder}`,
					},
		)
	})
	const sideHeaderStyle = computed(() => {
		return {
			height: `${config.layout.headerHeight}px`,
			backgroundColor: token.value.colorBgContainer,
			padding: 0,
			borderBottom: `1px solid ${token.value.colorBorder}`,
			...(app.layout.fixedHeader
				? {
						position: 'fixed',
						zIndex: 1,
						width: `calc(100% - ${app.layout.collapsed ? config.layout.collapsedWidth : config.layout.sideBarWidth}px)`,
					}
				: {}),
		}
	})

	const siderStyle = computed(() => {
		return app.layout.fixSiderbar
			? {
					borderRight: `1px solid ${
						app.layout.navTheme === 'dark' ? token.value.colorBgSpotlight : token.value.colorBorder
					}`,
					position: 'fixed',
					left: 0,
					top: 0,
					bottom: 0,
				}
			: {
					borderRight: `1px solid ${
						app.layout.navTheme === 'dark' ? token.value.colorBgSpotlight : token.value.colorBorder
					}`,
				}
	})
</script>
<style scoped>
	.site-layout .site-layout-background {
		background: #fff;
	}

	[data-theme='dark'] .site-layout .site-layout-background {
		background: #141414;
	}

	.header {
		display: flex;
		padding: 0 16px;
	}

	.ant-menu-inline-collapsed .ant-menu-item-selected {
		margin-right: 0;
	}

	.ant-pro-sider-logo {
		position: relative;
		display: flex;
		align-items: center;
		width: 208px;
		padding: 16px;
		cursor: pointer;
		transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.ant-layout-sider-collapsed .ant-pro-sider-logo {
		width: 64px;
	}

	.ant-pro-top-nav-header-logo {
		position: relative;
		min-width: 165px;
		height: 100%;
		padding-right: 50px;
		overflow: hidden;
	}
</style>
