<template>
	<view class="iframe" :style="{height: formProps.height + 'px', width: '100%'}">
		<web-view v-if="show" :webview-styles="webviewStyles" :fullscreen="false" :src="formProps.url"
			:style="{height: formProps.height + 'px', width: '100%'}" class="w-iframe" scrolling="auto"
			frameborder="0"></web-view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { onUnload } from "@dcloudio/uni-app";

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: String,
		readonly: Boolean
	})
	
	const show = ref(true)

	const webviewStyles = ref({
		progress: {
			color: '#FF3333'
		},
		width: '100%',
		height: props.formProps.height + 'px',
		position: 'absolute' //"static",
	})

	uni.$on('wv:scorll', () => {
		reloadPos(pos => {
			webviewStyles.value.top = pos.top;
		})
	})
	
	uni.$on('hideFp', () => {
		show.value = false
	})
	
	uni.$on('showFp', () => {
		show.value = true
	})

	onUnload(() => {
		uni.$off('wv:scorll')
		uni.$off('showFp')
		uni.$off('hideFp')
	})
	
	onMounted(() => {
		reloadPos(pos => {
			webviewStyles.value.top = pos.top;
		})
	})
	

	function reloadPos(callback) {
		// #ifdef APP-VUE
		const view = uni.createSelectorQuery().in(this).select('.iframe')
		view.fields({ size: true, rect: true }, ({ height, width, top, left, right, bottom }) => {
			uni.createSelectorQuery().selectViewport().scrollOffset(({ scrollTop }) => {
				return callback({
					top: parseInt(top) + parseInt(scrollTop) + 40 + 'px',
					left: parseInt(left) + 'px',
					width: parseInt(width) + 'px',
					height: parseInt(height) + 'px'
				})
			}).exec()
		}).exec()
		// #endif
	}


	// #ifdef H5
	//在h5下使用js去除iframe边框，style设置居然不能生效
	onMounted(() => {
		const iframe = document.getElementsByTagName('iframe')
		for (let im of iframe) {
			im.setAttribute('frameborder', 0)
		}
	})
	// #endif
</script>

<style lang="less" scoped>

</style>