<template>
	<view>
		<web-view :webview-styles="webviewStyles" :src="webviewSrc" ref="webview" @onPostMessage="handlePostMessage"></web-view>
		<button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
	</view>
</template>


<script>
var wv;//计划创建的webview
import projectConfig from '@/env.config.js';
export default {
	data(){
		return {
			id: '',
			info: {},
			dp: {},
			webviewSrc: '/pages_player/static/app-plus/video.html',
			decoderUrl: '',
			editInterval: null,
			webviewStyles: {
				progress: {
					color: '#FF3333'
				}
			}
		}
	},
	onLoad(option) {
		if(option.id){ this.id = option.id }
	},
	onReady() {
		// #ifdef APP-PLUS
		var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
		this.decoderUrl = projectConfig.decoderUrl;
		setTimeout(function() {
			wv = currentWebview.children()[0]
			wv.setStyle({top:150,height:300})
		}, 1000); //如果是页面初始化调用时，需要延时一下
		// #endif
	},
	mounted() {
		var url = "https://live.nodemedia.cn:8443/live/b480_264.flv";
		this.weburl+='?data='+ encodeURIComponent(JSON.stringify({ "apiUrl": url }));
		//如果是页面初始化调用时，需要延时一下
		this.webviewSrc = 'about:blank'; // 清空当前页面
		this.$nextTick(() => {
		  this.webviewSrc = '/pages_player/static/app-plus/video.html?data=' +
		  encodeURIComponent(JSON.stringify({ "apiUrl": res.playurl ,"decoderUrl":this.decoderUrl})) ;
		});
	},
	methods:{
		// webview向外部发送消息
		handlePostMessage: function(data) {
			console.log("接收到消息：" + JSON.stringify(data.detail));
		},
		// 调用 webview 内部逻辑
		evalJs: function() {
			this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
		}

	}
}
</script>

<style>
	.webview {
		width: 100vw;
		height: 200vh;
	}
</style>
