<!-- pages/webview/webview.vue -->
<template>
	<view class="webview-container">
		<navBar class="nav-bar" :title="pageTitle" :bgColor="data.navBar.bgColor" isBack>
			<template v-if="isClose" v-slot:right>
				<image style="width:22px;height: 22px;" src='/static/image/close.png' @click="onConfirm()"></image>
			</template>
		</navBar>
		<web-view :src="url" :webview-styles="webviewStyles"></web-view>
	</view>
</template>

<script setup>
	// 自定义头部
	// import ZdyNavbar from "@/components/navbar/navbar.vue"
	import navBar from '@/components/nav-bar/nav-bar.vue'
	import {
		util
	} from '@/utils/common.js'

	import {
		ref,
		reactive,
		watch,
		nextTick,
		getCurrentInstance,
		onMounted,
		onBeforeUnmount,
		toRefs,
		computed
	} from "vue";
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'

	const data = reactive({
		navBar: {
			title: "",
			bgColor: '#ffffff',
		},
		dark: "dark",
		// 状态栏高度
		systemBarHeight: "0",
		isClose: false
	})

	let {
		systemBarHeight,
		isClose
	} = toRefs(data)

	const url = ref('')
	const pageTitle = ref('')

	onLoad((options) => {
		if (options.isClose) {
			isClose.value = options.isClose
		}
		uni.getSystemInfo({
			success: res => {
				systemBarHeight.value = res.statusBarHeight; // 获取状态栏高度
			}
		})
		if (options.url) {
			url.value = decodeURIComponent(options.url)
			// const videoExps = [/\.mp4$/i, /\.m3u8$/i, /\.flv$/i, /\.avi$/i, /\.mov$/i, /\.wmv$/i, /\.webm$/i,
			// 	/\.mkv$/i
			// ];
			// const isVideo = videoExps.some(exp => exp.test(url.value))
			// console.log(isVideo)
			// if (isVideo) {
			// 	plus.navigator.setStatusBarStyle("light");
			// } else {
			// 	plus.navigator.setStatusBarStyle("dark");
			// }
		}
		console.log("options参数", options);
		if (options.title) {
			console.log("标题", options.title);
			pageTitle.value = decodeURIComponent(options.title)
		}
	})

	onShow(() => {
		// #ifdef APP-PLUS&&!APP-HARMONY
		util.setAndroidSystemBarColor('#ffffff')
		setTimeout(() => {
			plus.navigator.setStatusBarStyle("dark");
		}, 500);
		// #endif
	})

	const onConfirm = () => {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}

	const goBack = () => {
		uni.navigateBack()
	}

	const isVideo = computed(() => {
		if (!url.value) return false
		const videoExps = [/\.mp4$/i, /\.m3u8$/i, /\.flv$/i, /\.avi$/i, /\.mov$/i, /\.wmv$/i, /\.webm$/i,
			/\.mkv$/i
		];
		return videoExps.some(exp => exp.test(url.value));
	})

	const webviewStyles = computed(() => {
		return {
			top: `${Number(systemBarHeight.value) + 40}px`,
			bottom: '0px',
			'padding-bottom': '20px'
		}
	})
</script>

<style scoped>
	.webview-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.header {
		padding: 20rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	.video-web {
		position: fixed;
		width: 100%;
		background-color: #000;
	}
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>