<template>
	<el-container class="layout-container">
		<LayoutAside />
		<el-container class="layout-container-view h100">
			<el-scrollbar ref="layoutScrollbarRef" class="layout-backtop">
				<LayoutHeader />
				<LayoutMain ref="layoutMainRef" />
			</el-scrollbar>
		</el-container>
	</el-container>
</template>

<script setup lang="ts" name="layoutDefaults">
import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
import { NextLoading } from '@/utils/loading';
import mittBus from '@/utils/mitt';

// 引入组件
const LayoutAside = defineAsyncComponent(() => import('@/layout/components/aside.vue'));
const LayoutHeader = defineAsyncComponent(() => import('@/layout/components/header.vue'));
const LayoutMain = defineAsyncComponent(() => import('@/layout/components/main.vue'));

// 定义变量内容
const layoutScrollbarRef = ref<any>('');
const layoutMainRef = ref<any>('');
const route = useRoute();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
// 重置滚动条高度
const updateScrollbar = () => {
	// 更新父级 scrollbar
	layoutScrollbarRef.value?.update();
	// 更新子级 scrollbar
	layoutMainRef.value.layoutMainScrollbarRef?.update();
};
// 重置滚动条高度，由于组件是异步引入的
const initScrollBarHeight = () => {
	nextTick(() => {
		setTimeout(() => {
			updateScrollbar();
			layoutScrollbarRef.value.wrapRef.scrollTop = 0;
			layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
		}, 500);
	});
};
// 监听路由的变化，切换界面时，滚动条置顶
watch(
	() => route.path,
	() => {
		initScrollBarHeight();
	}
);
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
	themeConfig,
	() => {
		updateScrollbar();
	},
	{
		deep: true,
	}
);
// 页面加载时
onMounted(() => {
	initScrollBarHeight();
	NextLoading.done(600);
	// 监听页面需要滚动事件
	mittBus.on('scrollTopEmit', (res: any) => {
		layoutScrollbarRef.value?.scrollTo(res.top ? res.top : 0, res.left ? res.left : 0); // 滚动到一组特定坐标(x，y)
	});
});
</script>
