<template>
	<view>
		<!-- <web-view :src="vUrl"></web-view> -->
		<view class="whitebg">
			<image class="ccover" v-if="form.coursePic&&!playVideo&&!playAudio" mode="aspectFill" :src="config.baseUrl_api + form.coursePic"></image>
			<video v-if="playVideo" @timeupdate="videoing" id="myVideo" :autoplay="false"
			:src="vUrl" controls @error="videoErrorCallback"
			play-btn-position="center" controlslist="nodownload"
			style="width: 100%;"
			></video>
			<audio v-if="playAudio" 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>

			<view class="name">{{form.courseName}}
				<view v-if="isBuy" style="font-size: 32rpx;color: #1EC886;display: inline-block;float: right;">
					<uni-icons color="#1EC886" size="22" type="checkbox-filled"></uni-icons>已兑换
				</view>
			</view>
			<!-- <view class="text-warning pp">{{form.explains}}</view> -->
			<view class="text-warning pp" v-if="form.isFree==1">
				<text v-if="form.allGold>0">金币{{form.allGold}}</text>
				<text v-if="form.allGold>0&&form.allScore>0">/</text>
				<text v-if="form.allScore>0">积分{{form.allScore}}</text>
				<text v-if="form.gold>0">/金币{{form.gold}}+积分{{form.score}}</text>
			</view>
			<view class="text-warning pp" v-else>免费</view>
		</view>

		<view class="plane">
			<view class="phead">
				<view>
					<image class="tag01" src="@/course/img/tag01.png" style="width:30rpx;height: 30rpx;"></image>
					课程介绍
				</view>
				<view class="text-warning">讲师：{{form.speaker}}</view>
			</view>
			<view class="pbody">
				{{form.description}}
			</view>
		</view>

		<!-- list -->
		<view class="wList" v-if="form.audioUrl">
			<view class="pp">
				<image src="@/course/img/book.png" style="width:24rpx;height: 24rpx;"></image>
				音频
			</view>
			<view class="name">{{form.audioUrl.name}}</view>
			<view class="playBtn" @click="play('a')">
				<image src="@/course/img/play.png" style="width:48rpx;height: 48rpx;"></image>
			</view>
		</view>
		<view class="wList" v-if="form.videoUrl">
			<view class="pp">
				<image src="@/course/img/book.png" style="width:24rpx;height: 24rpx;"></image>
				视频
			</view>
			<view class="name">{{form.videoUrl.name}}</view>
			<view class="playBtn" @click="play('v')">
				<image src="@/course/img/play.png" style="width:48rpx;height: 48rpx;"></image>
			</view>
		</view>
<!-- 		<view v-if="!isBuy" style="padding:0 30rpx;">
			<view class="text-warning">未购买可体验十秒</view>
		</view> -->
		
		<view style="height: 200rpx;"></view>
		<view class="fixedBottom">
			<!-- form.isFree==1&&!isBuy -->
			<button class="btn btn-submit" v-if="!isBuy" @click="goBill">立即兑换</button>
			<button class="btn btn-submit" v-else @click="goBill">立即学习</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,onReady,onShareAppMessage
	} 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 playVideo = ref(false)
	const playAudio = ref(false)
	const isBuy = ref(false)
	const myvideo = ref(null)
	const myaudio = ref(null)
	const vUrl = ref('')
	const system = uni.getStorageSync('systemType')
	let goodsId = ''
	let shareId = '0'
	onLoad((option) => {
		if (option.id) {
			goodsId = option.id
		}
		if (option.shareId) {
			console.log(option.shareId)
			shareId = option.shareId
		}
		getData(goodsId)
	})
	onShareAppMessage(() => {
		return {
			title: form.value.courseName,
			path: `/course/courseDetail?id=${goodsId}&shareId=${currUser.userId}`,
			imageUrl: config.baseUrl_api+form.value.coursePic
		};
	});
	onShow(() => {
		api.getUserIsPay({
			orderType: 0,
			goodsId: goodsId
		}).then(Response => {
			isBuy.value = Response.data
		})
	})
	function getData(id) {
		uni.showLoading({
			title: '加载中'
		})
		api.getCourseById(id).then(res => {
			form.value = res.data
			if (form.value.audioUrl) {
				form.value.audioUrl = JSON.parse(form.value.audioUrl)
				myaudio.value = uni.createVideoContext('myAudio', this)
			}
			if (form.value.videoUrl) {
				form.value.videoUrl = JSON.parse(form.value.videoUrl)
				vUrl.value = config.baseUrl_api+form.value.videoUrl?.url
				myvideo.value = uni.createVideoContext('myVideo', this)
				myvideo.value.stop()
			}
			uni.hideLoading()
			console.log(vUrl.value)
		})
	}

	function goBill() {
		if(isBuy.value){
			 if(form.value.videoUrl){
				play('v')
			 } else if(form.value.audioUrl){
				 play('a')
			 }
		}else{
			if(form.value.isFree == 0){
				api.submitOrder({
					orderType: 0,
					goodsId: form.value.courseId,
					payType: "0",
					shareId:shareId
				}).then(res => {
					uni.showModal({
						content:'已兑换！',
						success:function(respons){
							if(respons.confirm){
								api.getUserIsPay({
									orderType: 0,
									goodsId: goodsId
								}).then(Response => {
									isBuy.value = Response.data
								})
							}
						}
					})
				})
			} else {
				const obj = encodeURIComponent(JSON.stringify(form.value))
					let path = `/course/courseBill?form=${obj}`
					uni.navigateTo({
						url: path
					});
				
			}
			
		}
	}

	function play(flag) {
		// const mate = encodeURIComponent(JSON.stringify(form.value))
		if(flag=='v'){
			console.log(vUrl.value)
			playVideo.value = true
			playAudio.value = false
			myvideo.value.play()
		}
		if(flag=='a'){
			playAudio.value = true
			playVideo.value = false
			myaudio.value.play()
		}
		// if (isBuy.value) {
			// let path = `/course/play/play?obj=${mate}&flag=${flag}&isBuy=${isBuy.value}`
			// uni.navigateTo({
			// 	url: path
			// });

		// } else {
		// 	uni.showToast({
		// 		title: '请购买课程',
		// 		icon: 'none'
		// 	})
		// }
	}
	function videoErrorCallback(e){
		console.log(e)
	}
	function videoing(e) {
		// console.log(e.detail.currentTime)
		if (form.value.isFree==1 && !isBuy.value && e.detail.currentTime > 10) {
			console.log('111')
			myvideo.value.pause()
			playVideo.value = false
			uni.showModal({
				content: '试看结束，请兑换课程',
				success: function(res) {
					if (res.confirm) {
						goBill()
					} else {
						myvideo.value.stop()
					}
				}
			})
		}
	}
	
	function audioing(e) {
		// console.log(e.detail.currentTime)
		if (form.value.isFree==1 && !isBuy.value && e.detail.currentTime >= 10) {
			console.log('111')
			myaudio.value.stop()
			playAudio.value = false
			uni.showModal({
				content: '试看结束，请兑换课程',
				success: function(res) {
					if (res.confirm) {
						goBill()
					}
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	.whitebg {
		background: #fff;
		padding: 25rpx;
	}

	.plane {
		background: #fff;
		width: 700rpx;
		border-radius: 15rpx;
		margin: 30rpx auto;
		padding: 25rpx;
		box-sizing: border-box;

		.phead {
			border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;
			padding: 0 0 15rpx;
			align-items: center;
			font-size: 30rpx;
			box-sizing: border-box;

			.text-warning {
				font-size: 28rpx;
			}

			.tag01 {}
		}

		.pbody {
			padding: 15rpx 0;
			box-sizing: border-box;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #4C5359;
		}
	}

	.wList {
		background: #fff;
		padding: 36rpx 23rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		width: 700rpx;
		margin: 0 auto 30rpx;
		position: relative;

		.pp {
			display: flex;
			color: #8F8E94;
			font-size: 24rpx;
			align-items: center;

			image {
				margin-right: 6rpx;
			}
		}

		.name {
			color: #2B3133;
			font-size: 30rpx;
			margin: 15rpx 0 0;
		}

		.playBtn {
			position: absolute;
			right: 24rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			height: 48rpx;
		}
	}

	.text-warning {
		color: #F39800;
	}

	.ccover {
		width: 700rpx;
		margin: 0 auto 30rpx;
		display: block;
		height: 320rpx;
		background: #85A6E0;
		border-radius: 15rpx;
	}

	.whitebg {
		.name {
			font-size: 32rpx;
		}

		.text-warning {
			font-size: 26rpx;
			margin: 10rpx 0 0;
		}
	}
</style>