<template>
	<view class="content">
		<uni-nav-bar class="nav-bar" fixed :status-bar="true" :left-icon="back" :left-text="leftText" @clickLeft="onLeft" color="#ffffff" background-color="#2F78E4">
			<view class="title">{{ title ? title : '微怀化' }}</view>
		</uni-nav-bar>
		<!-- <view class="status_bar"></view> -->
		<view id="content"></view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	components: { uniNavBar },
	onLoad(options) {},
	data() {
		return {
			pageURL: 'https://www.huaihua.gov.cn/',
			webviewStyles: {
				progress: {
					color: '#f00'
				}
			},
			webView: null,
			back: '',
			leftText: '',
			title: '微怀化'
		};
	},
	onReady() {
		// #ifdef APP-PLUS
		var that = this;
		const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		const webView = plus.webview.create(
			this.pageURL,
			'content',
			{
				top: statusBarHeight + 44, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
				//因为设置top之后 webview的高度依然不变会往下移 底部会被遮住  所以设置一下高度
				height: uni.getSystemInfoSync().windowHeight - 44 - statusBarHeight,
				progress: {
					color: '#f00'
				}
			},
			{
				preload: 'preload webview'
			}
		); // 可直接通过以下方法获取preload值
		var currentWebview = this.$scope.$getAppWebview(); //获取当前页面的webview对象
		currentWebview.append(webView); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
		this.webView = webView;
		this.webView.addEventListener('loaded', this.loading, false);
		this.webView.onloading = this.loading;
		// #endif
	},
	methods: {
		loading(event) {
			console.log(event);
			if (this.webView) { 
				this.webView.canBack(e => {
					console.log('是否可返回：' + e.canBack);
					if (e.canBack) {
						this.back = 'back';
						this.leftText = '返回';
					} else {
						this.back = '';
						this.leftText = '';
					}
				});
				this.onloaded(event);
			}
		},
		onloaded(event) { 
			const title = this.webView.getTitle();
			if(title){ 
				this.title = title;  	 
			}
		},
		onNext() {
			console.log('kalshdfkas');
			this.back = 'back';
			this.leftText = '返回';
		},
		onLeft() {
			if (this.webView) {
				this.webView.canBack(e => { 
					if (e.canBack) {
						this.webView.back();
					}
				});
			}
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
}
.title {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden; 
	word-break: break-all;
	width: 500upx;
	line-height: 30upx;
	text-align: center;
}
.nav-bar {
	z-index: 9999;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
</style>