<template>
	<div class="wrapper">
		<iframe v-if="flag" ref="iframe" class="player-wrapper"></iframe>
		<!--<el-dropdown class="side-bar" trigger="click" size="mini" @command="onCommand">
			<el-button style="opacity: 0.5" circle plain class="micro" icon="el-icon-ice-cream-round" :underline="false"/>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="refresh">刷新</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>-->
		<!--<div ref="proxyIframeWrapper" class="proxy-iframe-wrapper">
			<iframe ref="proxyIframe" v-if="showProxyIframe"
							src="http://activity.m.duibadev.com.cn/projectx/p46967122/index.html?__proxy_mode__"
							@load="onProxyIframeLoaded"></iframe>
		</div>-->
		<el-button style="opacity: 0.5" circle plain class="side-bar micro" icon="el-icon-refresh" :underline="false"
		           @click="reload"/>
	</div>
</template>

<script>
	import {applyMock} from "./Preview/mock-serve";
	import db from "../utils/db-storage";
	import {newScriptContent, newScriptEl} from "../utils";

	export default {
		name: "Preview",
		components: {},
		data() {
			return {
				ts: '',
				flag: false,
				proxyReady: true,
				showProxyIframe: false,
			}
		},
		async mounted() {
			if (!this.ts) {
				this.ts = localStorage.getItem('preview-ts');
			}

			window.reloadPreview = ()=>{
				this.reload();
			};
			document.addEventListener("visibilitychange", this.onVisibilityChange);

			await db.open();

			this.reload();

			/*let url = 'http://activity.m.duibadev.com.cn/projectx/p46967122/index.html?__proxy_mode__';
			let proxyWindow = this.proxyWindow = window.open(url,"myWindow",'width=1,height=1');
			/!*proxyWindow.onload = function(){
				console.log('proxyWindow loaded');
			};*!/
			setTimeout(()=>{
				this.onProxyIframeLoaded();
				//this.showProxyIframe = true;
				//myWindow.close();
				//this.$refs.proxyIframeWrapper.innerHTML = iframe;
			},1000);*/
		},
		destroyed() {
			document.removeEventListener("visibilitychange", this.onVisibilityChange);
		},
		methods: {
			reload() {
				this.flag = false;
				setTimeout(() => {
					this.flag = true;
					this.buildPage();
				}, 500);
			},
			onCommand(command) {
				switch (command) {
					case 'refresh':
						this.reload();
						break;
				}
			},
			onVisibilityChange(e) {
				if (!document.hidden) {
					let ts = localStorage.getItem('preview-ts');
					if (this.ts !== ts) {
						//this.$refs.iframe.contentDocument.location.reload();
						//document.location.reload();
						this.ts = ts;

						this.reload();
					}
				}
			},
			async buildPage() {
				if (!this.proxyReady) {
					return;
				}
				const {projectID} = this.$route.params;
				const {data, tpl} = await db.get('preview', projectID);
				console.log(data);
				//console.log(JSON.stringify(data));
				let {options: {pageTitle, }, } = data;

				document.title = pageTitle;

				const doc = this.$refs.iframe.contentDocument;
				const win = this.$refs.iframe.contentWindow;
				doc.write(tpl);

				//win.proxy_window = this.$refs.proxyIframe.contentWindow;
				//win.proxy_window = this.proxyWindow;

				applyMock(projectID, win);
			},
			onProxyIframeLoaded() {
				this.proxyReady = true;
				//this.$refs.proxyIframe.contentWindow.postMessage('hello', '*');

				this.buildPage();
			},
		}
	}
</script>

<style scoped>
	.wrapper {
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
	}

	.side-bar {
		position: absolute;
		right: 3px;
		bottom: 3px;
	}

	.player-wrapper {
		border: 0;
		flex: 1;
	}

	.mock-button {
		position: absolute;
		right: 10px;
		bottom: 10px;
	}

	.proxy-iframe-wrapper {
		/*display: none;*/
		top: 0;
		position: absolute;
		width: 200px;
		height: 300px;

	}

	.proxy-iframe-wrapper iframe {
		width: 100%;
		height: 100%;
	}
</style>
