<template>
	<view class="web-view">
		<web-view class="web-view" :src="url" :webview-styles="webviewStyles" ref="webview" @pagestart="onPageStart"
			@onPostMessage="handlePostMessage" @pagefinish="onPageFinish" @receivedtitle="onReceivedTitle"></web-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	var currentWebview;
	import webviewApi from '@/common/app-plus/webview.js';
	export default {
		data() {
			return {
				params: {},
				url: '',
				webviewStyles: {
					progress: '#FFFFFF'
				},
				pagestart: '',
				pagefinish: '',
				error: '',
				canGoBack: false,
				canGoForward: false
			};
		},
		computed: {
			...mapState(['openid'])
		},
		onLoad: function(e) {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			currentWebview = page.$getAppWebview();
			this.check_webview_token_white_list(e);
		},
		onNavigationBarButtonTap: function(e) {
			if (e.index == 1) {
				this.reloadWebviewUrl();
			} else {
				uni.navigateBack();
			}
		},
		onShow() {
			this.onPageStart();
		},
		methods: {
			async check_webview_token_white_list(e) {

				var reg = /^http(s)?:\/\/(.*?)\//;
				var url = decodeURIComponent(e.url);
				let domain = '';

				try {
					domain = reg.exec(url)[2] || '';
				} catch (e) {
					//TODO handle the exception
				}
				if (domain != '') {
					var token = encodeURIComponent(this.openid || '');
					if (/\?/g.test(url)) {
						url = url + '&token=' + token;
					} else {
						url = url + '?token=' + token;
					}
				}
				console.log('web-view加载的网址：' + url);
				this.url = url;
				this.params = e;
				this.webviewStyles.progress = e.progress || '#eb3f43';
				uni.report &&
					uni.report('webview', {
						url: url,
						params: JSON.stringify(e),
						hasLogin: this.openid != '' ? 0 : 1,
						domain: domain
					});
			},
			handlePostMessage: function(e) {
				for (let i = 0; i < e.detail.data.length; i++) {
					var detail = e.detail.data[i]['data'];
					webviewApi.parsePostMessage({
						action: detail.action || '',
						methods: detail.methods || '',
						params: detail.params || ''
					});
				}
			},
			goBack: function() {
				var webview = weex.requireModule('webview');
				webview.goBack(this.$refs.webview);
			},
			goForward: function() {
				var webview = weex.requireModule('webview');
				webview.goForward(this.$refs.webview);
			},

			onPageStart: function(e) {
				// try{
				// 	var js = "window.setLoginToken('"+this.openid+"')";
				// 	this.$refs.webview.evalJs(js);
				// }catch(e){
				// 	console.log(e);
				// }
			},
			onPageFinish: function(e) {
				this.pagefinish = e.url;
				this.canGoBack = e.canGoBack;
				this.canGoForward = e.canGoForward;
			},
			onReceivedTitle: function(e) {
				if (e.title) {
					var tn = currentWebview.getStyle().titleNView;
					tn.titleText = e.detail.title || '第三方网站';
					currentWebview.setStyle({
						titleNView: tn
					});
				}
			},
			reloadWebviewUrl() {
				var webview = weex.requireModule('webview');
				webview.reload(this.$refs.webview);
			}
		}
	};
</script>

<style>
	.web-view {
		flex: 1;
		flex-direction: column;
		background-color: #f5f5f5;
	}
</style>
