<!-- pages/webview/webview.vue -->
<template>
	<view class="webview-container">
		<navBar class="nav-bar" :title="pageTitle" :bgColor="data.navBar.bgColor" isBack></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",
})

let {
	systemBarHeight
} = toRefs(data)

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

onLoad((options) => {
	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
	util.setAndroidSystemBarColor('#ffffff')
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("dark");
	}, 500);
	// #endif
})

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>