<template>
	<div v-show="$route.meta.type==='iframe'" class="iframe-pages">
		<iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url===item.meta.url"
				:src="item.meta.url" frameborder='0'></iframe>
	</div>
</template>

<script setup>
import {computed, watch} from "vue"
import {useRoute} from "vue-router";
import globalStore from "@/store/global"
import iframeStore from "@/store/iframe"

const iframe = iframeStore()
const global = globalStore()

const route = useRoute()
const iframeList = computed(() => iframe.iframeList)
const isMobile = computed(() => global.isMobile)
const layoutTags = computed(() => global.layoutTags)

push(route)

watch(route, (e) => {
	push(e)
})

function push(route) {
	if (route.meta.type === 'iframe') {
		if (isMobile || !layoutTags) {
			iframe.setIframeList(route)
		} else {
			iframe.pushIframeList(route)
		}
	} else {
		if (isMobile || !layoutTags) {
			iframe.clearIframeList()
		}
	}
}

</script>

<style scoped>
.iframe-pages {
	width: 100%;
	height: 100%;
	background: #fff;
}

iframe {
	border: 0;
	width: 100%;
	height: 100%;
	display: block;
}
</style>
