<template>
	<el-config-provider :locale="i18nLocale">
		<router-view />
	</el-config-provider>
</template>

<script lang="ts">
import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from '/@/store/index';
import other from '/@/utils/other';
import { Local, Session } from '/@/utils/storage';
import setIntroduction from '/@/utils/setIconfont';

export default defineComponent({
	name: 'app',
	components: {},
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const route = useRoute();
		const router = useRouter();
		const store = useStore();
		const state = reactive({
			i18nLocale: null,
		});

		// 设置初始化，防止刷新时恢复默认
		onBeforeMount(() => {
			// 设置批量第三方 icon 图标
			setIntroduction.cssCdn();
			// 设置批量第三方 js
			setIntroduction.jsCdn();
		});

		// 页面加载时
		onMounted(() => {
			nextTick(() => {
				console.log('初始化app.vue');
				// 获取缓存中的布局配置
				if (Local.get('themeConfig')) {
					store.dispatch('themeConfig/setThemeConfig', Local.get('themeConfig'));
					document.documentElement.style.cssText = Local.get('themeConfigStyle');
				}
			});
		});

		// 页面销毁时，关闭监听
		onUnmounted(() => {
			proxy.mittBus.off('openSetingsDrawer', () => {});
			proxy.mittBus.off('getI18nConfig', () => {});
		});

		// 监听路由的变化，设置网站标题
		watch(
			() => route.path,
			(newVal: string) => {
				other.useTitle();
			}
		);

		return {
			...toRefs(state),
		};
	},
});
</script>