<template>
	<view class="preview-page">
		<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
		<view class="nav">
			<view class="back" @tap="back">‹</view>
			<view class="title">视频</view>
			<view class="ghost"></view>
		</view>
		<video class="video-player" v-if="url" :src="url" :controls="true" :autoplay="true" object-fit="contain"></video>
		<view class="empty" v-else>视频地址为空</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: { top: 44 },
				url: ''
			}
		},
		onLoad(options) {
			if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.url = decodeURIComponent((options && options.url) || '')
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #05070d; }
	.preview-page { min-height: 100vh; box-sizing: border-box; color: #fff; background: #05070d; }
	.nav { height: 88rpx; display: flex; align-items: center; padding: 0 24rpx; box-sizing: border-box; }
	.back, .ghost { width: 72rpx; color: rgba(255,255,255,.78); font-size: 56rpx; }
	.title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; }
	.video-player { width: 100vw; height: calc(100vh - 150rpx); background: #000; }
	.empty { margin-top: 200rpx; text-align: center; color: rgba(255,255,255,.56); font-size: 26rpx; }
</style>
