<template>
	<view class="banner content ">
		<video id="video" class="video" :src="url" direction="-90"
			:poster="poster" show-mute-btn @play="onstart" @pause="onpause" @ended="onfinish" @error="onfail"
			@waiting="waiting" @timeupdate="timeupdate" @fullscreenchange="fullscreenchange">
			<cover-view class="mask" v-if="buyModal">
				<cover-view class="buy-modal">
					<cover-image :src="picUrl+'course/coverImg.png'" style="width: 100%;height: 100%;"
						></cover-image><!-- @click="startLearning()" -->
					<cover-image :src="picUrl+'course/×.png'" class="close-btn" @click="buyModal = false"></cover-image>
				</cover-view>
			</cover-view>
		</video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picUrl:'https://qiniu.manmanxinli.com/wechat/user/',
				url: '',
				poster: '',
				lessons_id: '',
				token: '',
				context: null,
				api: '',
				buyModal: false, // 提示购买弹框
			}
		},
		onReady() {
			this.context = uni.createVideoContext("video", this);
		},
		onLoad(e) {
			console.log(123, e)
			this.poster = e.poster
			this.url = e.url
			this.token = e.token
			this.lessons_id = e.lessons_id
			this.api = e.api
			this.$nextTick(() => {
				this.play();
			})
		},
		methods: {
			onstart(e) {
				// console.log("onstart:" + JSON.stringify(e));
				this.buyModal = false;
			},
			onpause(e) {
				// console.log("onpause:" + JSON.stringify(e));
			},
			onfinish(e) {
				// console.log("onfinish:" + JSON.stringify(e));
				this.buyModal = true;
			},
			onfail(e) {
				// console.log("onfail:" + JSON.stringify(e));
			},
			fullscreenchange(e) {
				// console.log("fullscreenchange:" + JSON.stringify(e));
			},
			waiting(e) {
				// console.log("waiting:" + JSON.stringify(e));
			},
			timeupdate(e) {
				// console.log("timeupdate:" + JSON.stringify(e));
			},

			play() {
				this.context.play();
			},
			pause() {
				this.context.pause();
			},
			seek() {
				this.context.seek(50);
			},
			stop() {
				this.context.stop();
			},
			fullScreen() {
				this.context.requestFullScreen({
					direction: 90
				});
			},
			exitFullScreen() {
				this.context.exitFullScreen();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.video {
		width: 750rpx;
		height: 400rpx;
	}

	.banner {
		width: 750rpx;
		height: 400rpx;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
		}

		.video {
			width: 100%;
			height: 100%;
			background-color: #808080;

			.mask {
				position: relative;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .7);

				.buy-modal {
					width: 510rpx;
					height: 260rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);

					.close-btn {
						position: absolute;
						width: 32rpx;
						height: 32rpx;
						right: 0;
						top: 0;
					}
				}
			}
		}

		.tag {
			background: linear-gradient(90deg, #F73917 0%, #FC9A84 100%);
			border-radius: 0px 0px 20rpx 0px;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 32rpx;
			padding: 2rpx 12rpx 2rpx 8rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.play-btn {
			width: 84rpx;
			height: 84rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.class-num {
			background: rgba(0, 0, 0, .7);
			border-radius: 4rpx;
			font-size: 24rpx;
			font-weight: 700;
			color: #FFFFFF;
			line-height: 32rpx;
			padding: 4rpx 10rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}
</style>