<template>
	<view class="fullHeight">
		<!-- <levitatedsphere id="levitatedsphere" :x="100" :y="80"></levitatedsphere> -->
		<view>
			<!-- :webview-styles="styles" -->
			<web-view ref="myWv" class="webView" :src="work_url" @message="handleMessage" :fullscreen="false" @onPostMessage="handlePostMessage">
				
			</web-view>
		</view>
		<!-- <footers class="footer" activeTab="submit"></footers> -->
	</view>
</template>

<script>
	import footers from '@/components/footers/footers.vue'
	export default {
		components: {
			footers
		},
		data() {
			return {
				styles: {
					height: '0',
					screenHeight: '',
				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let screenHeight = res.screenHeight;
					this.screenHeight = screenHeight;
				}
			})
		},
		mounted(){
			// #ifdef H5
			window.addEventListener("message", (e) => {
				console.log(e.data)
				const dataInfo = e.data.data;
				console.log("handleMessage", dataInfo);
				if(dataInfo.type == "路由"){
					uni.redirectTo({
						url: dataInfo.url
					})
				}
			}, false);
			// #endif
		},
		onReady() {
			try {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				const _funName = 'msgFromUniapp'
				const _data = {
					token: userInfo.token,
					loginUser: userInfo
				};
				// #ifdef H5
					setTimeout(() => {
						this.$nextTick(() => {
							if(this.$refs.myWv.iframe){
								// this.$refs.myWv.iframe.style.width = "100vw";
								// this.$refs.myWv.iframe.style.height = "100vh";
								this.$refs.myWv.iframe.scrolling = "no";
								this.$refs.myWv.iframe.contentWindow.postMessage(_data, "*")
								// this.$refs.myWv.evalJs(`${_funName}(${JSON.stringify(_data)})`);
							} else {
								const iframe = window.document.getElementsByTagName("iframe")[0];
								iframe.scrolling = "no";
								iframe.contentWindow.postMessage(_data, "*")
							}
							
						})
					}, 500);
				// #endif
				// #ifdef APP-PLUS
					var currentWebview = this.$scope.$getAppWebview();
					setTimeout(function() {
						console.log(JSON.stringify(currentWebview.children()[0]));
						let wv = currentWebview.children()[0]
						wv.setStyle({
							top: 0,
							height: ((this.screenHeight - 300)),
							// bottom: uni.upx2px(110)
							bottom: 0
						})
						// let query=uni.createSelectorQuery();
						// let dom = query.select("#levitatedsphere");
						// console.log(dom);
						// currentWebview.appendChild(dom)
						wv.evalJS(`${_funName}(${JSON.stringify(_data)})`);
					}, 1000);
				// #endif
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			handleLoad(data){
				console.log(11111,data);
				let query=uni.createSelectorQuery();
				let dom = query.select("#levitatedsphere");
				console.log(dom);
				console.log(uni.createSelectorQuery().select("#app"));
				console.log(document.body);
				uni.createSelectorQuery().select("#app").appendChild(dom);
			},
			handlePostMessage(data) {
				console.log(data);
				uni.showToast({
					title: data
				})
			},
			handleMessage (value){
				const dataInfo = value.detail.data.length > 0 ? value.detail.data[0] : {};
				console.log("handleMessage", dataInfo);
				if(dataInfo.type == "路由"){
					uni.redirectTo({
						url: dataInfo.url
					})
				}
				
			},
		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}
</style>

<style lang="less" scoped>
	.fullHeight {
		height: 100vh
	}

	:deep(.webView) {
		width: 100vw;
		height: 100vh;
		z-index: 10;
	}
	:deep(iframe){
		width: 100% !important;
		height: 100% !important;
		border-width: 0;
	}
</style>