<template>
	<div class="h100">
		<router-view v-slot="{ Component }">
			<transition v-if="!isIframePage" :name="setTransitionName" mode="out-in">
				<keep-alive :max="10">
					<component :is="Component" :key="refreshRouterViewKey" class="w100" />
				</keep-alive>
			</transition>
			<Iframes v-if="isIframePage" />
		</router-view>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, toRefs, reactive, getCurrentInstance, defineAsyncComponent, onBeforeMount, onUnmounted, nextTick, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useThemeConfigStateStore } from '@/stores/themeConfig';
import { useKeepAliveNamesStore } from '@/stores/keepAliveNames';
import Iframes from '@/layout/routerView/iframes.vue';
export default defineComponent({
	name: 'layoutParentView',
	components: { Iframes },
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const route = useRoute();
		const theme = useThemeConfigStateStore();
		const keepAliveNames = useKeepAliveNamesStore();
		const state: any = reactive({
			refreshRouterViewKey: null,
			// keepAliveNameList: [],
			keepAliveNameNewList: [],
		});
		// 设置 iframe 显示/隐藏
		const isIframePage = computed(() => {
			return route.meta.isLink;
		});
		// 设置主界面切换动画
		const setTransitionName = computed(() => {
			return theme.themeConfig.animation;
		});
		// 获取布局配置信息
		const getThemeConfig = computed(() => {
			return theme.themeConfig;
		});
		// 获取组件缓存列表(name值)
		const getKeepAliveNames = computed(() => {
			return keepAliveNames.keepAliveNames;
		});
		// 页面加载前，处理缓存，页面刷新时路由缓存处理
		onBeforeMount(() => {
			// 暂时取消
			// state.keepAliveNameList = getKeepAliveNames.value;
			// proxy.mittBus.on("onTagsViewRefreshRouterView", (fullPath: string) => {
			//   state.keepAliveNameList = getKeepAliveNames.value.filter(
			//     (name: string) => route.name !== name
			//   );
			//   state.refreshRouterViewKey = null;
			//   nextTick(() => {
			//     state.refreshRouterViewKey = fullPath;
			//     state.keepAliveNameList = getKeepAliveNames.value;
			//   });
			// });
		});
		// 页面卸载时
		onUnmounted(() => {
			proxy.mittBus.off('onTagsViewRefreshRouterView');
		});
		// 监听路由变化，防止 tagsView 多标签时，切换动画消失
		watch(
			() => route.fullPath,
			() => {
				state.refreshRouterViewKey = route.fullPath;
			}
		);
		return {
			getThemeConfig,
			getKeepAliveNames,
			setTransitionName,
			isIframePage,
			...toRefs(state),
		};
	},
});
</script>

<style>
.slide-right-enter-active {
	transition: all 0.03s ease-out;
}

.slide-right-leave-active {
	transition: all 0.08s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-right-enter-from,
.slide-right-leave-to {
	transform: translateX(20px);
	opacity: 0;
}

/** left */

.slide-left-enter-active {
	transition: all 0.03s ease-out;
}

.slide-left-leave-active {
	transition: all 0.08s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-left-enter-from,
.slide-left-leave-to {
	transform: translateX(20px);
	opacity: 0;
}

/** opacitys */

.opacitys-enter {
	opacity: 0;
}

.opacitys-enter-to {
	opacity: 1;
}

.opacitys-enter-active {
	transition: opacity 0.2s;
}

.opacitys-leave {
	opacity: 1;
}

.opacitys-leave-to {
	opacity: 0;
}

.opacitys-leave-active {
	transition: opacity 0.2s;
}
</style>
