<template>
	<view class="playBox" v-show="!loading">
		<audio v-if="flag=='a'" style="text-align: left" :src="config.baseUrl_api+form.audioUrl?.url"
			:poster="config.baseUrl_api+form.coursePic" :name="form.audioUrl?.name" :author="form.speaker" controls
			@timeupdate="audioing" id="myAudio"></audio>
		<video v-if="flag=='v'" ref="myvideo" @timeupdate="videoing" id="myVideo"
			:src="config.baseUrl_api+form.videoUrl?.url" controls></video>
		<view v-if="isBuy=='false'">
			<view class="text-warning" v-if="flag=='v'">未购买可试看十秒</view>
			<view class="text-warning" v-if="flag=='a'">未购买可试听十秒</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
	import config from '@/config.js';
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import * as api from '@/common/api.js';
	const form = ref({})
	const flag = ref('')
	const isBuy = ref()
	const myvideo = ref(null)
	const myaudio = ref(null)
	const loading = ref(true)
	onLoad((option) => {
		console.log(option)
		if ('obj' in option) {
			form.value = JSON.parse(decodeURIComponent(option.obj))
			console.log(form.value.videoUrl.url)
			loading.value = false
		}
		flag.value = option.flag
		isBuy.value = option.isBuy
	})
	onReady(() => {
		if (flag.value == 'a') {
			uni.setNavigationBarTitle({
				title: form.value.audioUrl.name
			});
			myaudio.value = uni.createVideoContext('myAudio', this)
		} else if (flag.value == 'v') {
			uni.setNavigationBarTitle({
				title: form.value.videoUrl.name
			});
			myvideo.value = uni.createVideoContext('myVideo', this)
		}
	})

	function videoing(e) {
		// console.log(e.detail.currentTime)
		if (e.detail.currentTime > 10) {
			myvideo.value.pause()
			uni.showModal({
				content: '试看结束，请购买课程',
				success: function(res) {
					if (res.confirm) {
						uni.navigateBack()
					} else {
						myvideo.value.stop()
					}
				}
			})
		}
	}

	function audioing(e) {
		// console.log(e.detail.currentTime)
		if (e.detail.currentTime > 10) {
			myaudio.value.pause()
			uni.showModal({
				content: '试看结束，请购买课程',
				success: function(res) {
					if (res.confirm) {
						uni.navigateBack()
					} else {
						myaudio.value.stop()
					}
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.playBox {
		text-align: center;
		margin: 5vh 0;
	}
</style>