<template>
	<view class="content">
		<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
		<view class="playvideo">
			<view class="playvideowrap">
				
				<view class="title">{{title}}</view>
				
				<view v-if="type=='video'">
					<video style="width:100%" ref="videos" id="videos" :autoplay="true"
						@play="playFullScreen" :src="url?url:''" play-btn-position="center"></video>
				</view>
				<view  v-if="type=='audio'" style="padding:20rpx;padding-top:0">
					<image :src="image" mode="heightFix" style="max-width:690rpx;height:500rpx;display:block;margin:20rpx auto;margin-top:0"></image>
					<free-audio startPic='../../static/detail-play.png'
						endPic='../../static/detail-stop.png' audioId='audio1' :url="url?url:''"></free-audio>
				</view>
				<!--  -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseJson
	} from "@/config/index.js"
	import freeAudio from '@/components/free-audio.vue'
	export default {
		components: {
			freeAudio
		},
		data() {
			return {
				id: '',
				type: 'video',
				url: '',
				baseUrl: "http://h5.ali251.langye.net",
				title: '',
				image:''
			}
		},
		onLoad(options) {
			console.log("options", options)

			this.id = options.id ? options.id : ''
			this.type = options.type ? options.type : 'video'
			if (this.id) {
				baseJson.map(item => {
					if (this.id == item.id) {
						this.url = this.baseUrl + item.url
						this.type = item.type
						this.title = item.name
						if(item.type==='audio'){
							this.image = this.baseUrl + item.image
						}
					}
				})
			}
			console.log("baseJson", baseJson, this.id, this.url, this.title)
		},
		methods: {
			playFullScreen() {
				let videoContext = uni.createVideoContext('videos', this)
				videoContext.requestFullScreen()
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.bg {
		height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
	}

	.playvideo {
		position: absolute;
		width: 100%;
		top: 40%;
		/* text-align: center; */
		transform: translate(0, -50%);
	}

	.title {
		padding: 20px;
		text-align: center;
	}
</style>