<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<div v-for="v in setIframeList" style="overflow: hidden; width: 100%; height: 100%; flex: 1" :key="v.path" v-loading="v.meta.loading">
				<iframe
					:src="v.meta.isLink"
					:key="v.path"
					height="100%"
					width="100%"
					:data-url="v.path"
					v-show="getRoutePath === v.path"
					ref="myIframe"
					@load="onIframeLoad"
				/>
			</div>
			<div>
				<el-input v-model="message" style="width: 240px"></el-input>
				<el-button @click="sendToIframe">发送消息</el-button>
				<p>来自iframe的消息: {{ iframeMessage }}</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="layoutIframeView">
import { computed, watch, ref, nextTick, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';

// 定义父组件传过来的值
const props = defineProps({
	// 刷新 iframe
	refreshKey: {
		type: String,
		default: () => '',
	},
	// 过渡动画 name
	name: {
		type: String,
		default: () => 'slide-right',
	},
	// iframe 列表
	list: {
		type: Array,
		default: () => [],
	},
});
// 定义变量内容
const myIframe = ref<RefType>();
const route = useRoute();
// 处理 list 列表，当打开时，才进行加载
const setIframeList = computed(() => {
	return (<any>props.list).filter((v: any) => v.meta.isIframeOpen);
});
// 获取 iframe 当前路由 path
const getRoutePath = computed(() => {
	return route.path;
});
// 关闭 iframe loading
const closeIframeLoading = (val: string, item: any) => {
	nextTick(() => {
		if (!myIframe.value) return false;
		myIframe.value.forEach((v: any) => {
			if (v.dataset.url === val) {
				v.onload = () => {
					if (item.meta.isIframeOpen && item.meta.loading) item.meta.loading = false;
				};
			}
		});
	});
};
// 监听路由变化，初始化 iframe 数据，防止多个 iframe 时，切换不生效
watch(
	() => route.fullPath,
	(val) => {
		const item: any = props.list.find((v: any) => v.path === val);
		if (!item) return false;
		if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
		closeIframeLoading(val, item);
	},
	{
		immediate: true,
	}
);
// 监听 iframe refreshKey 变化，用于 tagsview 右键菜单刷新
watch(
	() => props.refreshKey,
	() => {
		const item: any = props.list.find((v: any) => v.path === route.path);
		if (!item) return false;
		if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
		setTimeout(() => {
			item.meta.isIframeOpen = true;
			item.meta.loading = true;
			closeIframeLoading(route.fullPath, item);
		});
	},
	{
		deep: true,
	}
);

const iframeMessage = ref('');
const message = ref('');
const sendToIframe = () => {
	if (!myIframe.value) return;

	const iframeEl = myIframe.value.find(
		(v: any) => v.dataset.url === getRoutePath.value
	);

	const iframeWindow = iframeEl?.contentWindow;
	iframeWindow?.postMessage(
		{
			type: 'FROM_PARENT',
			data: message.value,
		},
		'*'
	);
};

const handleMessage = (event: MessageEvent<Message>) => {
	if (event.data.type === 'FROM_CHILD') {
		iframeMessage.value = event.data.data;
	}
};

const onIframeLoad = () => {
	console.log('iframe loaded');
	window.addEventListener('message', handleMessage);
};
onMounted(() => {
});

onUnmounted(() => {
	window.removeEventListener('message', handleMessage);
});
</script>
<style>
iframe {
	border: none; /* 移除边框 */
	outline: none; /* 移除聚焦时的轮廓线 */
	background: transparent; /* 透明背景 */
	margin: 0; /* 移除外边距 */
	padding: 0; /* 移除内边距 */
	display: block; /* 避免内联元素的额外空间 */
	overflow: hidden; /* 隐藏滚动条 */
}
</style>
