<template>
	<view class="video-wrapper" id="video-container">
		<view style="position: relative;width: 414px; height: 300px;">
			<video :src="videoObjTmp.url" @ended="videoEnded()" :autoplay="auto" style="width: 414px;height: 300px;"></video>
			<view class="question"></view>

			<view class="popup-layer-back" v-show="question">
				<view class="popup-layer-close" @click="question=false">关闭</view>
				<view class="popup-layer">
					<h2>答案填充</h2>
					<p @click="nextQuestion()">答题后跳转下一视频</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "s-video",
		data() {
			return {
				videoObj: {
					url: "/static/videos/video1/video1.mp4",
					childen: {
						url: "/static/videos/video2/video2.mp4",
						childen: {
							url: "/static/videos/video3/video3.mp4"
						}
					}
				},
				videoObjTmp: {},
				videoUrl: "",
				auto: true,
				question: false,
			};
		},
		created() {
			this.initVideo();
		},
		methods: {
			initVideo() {
				this.videoObjTmp = this.videoObj;
			},
			videoEnded() {
				this.auto = false;
				this.question = true;
			},
			nextQuestion() {
				this.videoObjTmp = this.videoObjTmp.childen;
				this.question = false;
				this.auto = true;
			}
		}
	}
</script>

<style>
	/* 首先设置背景层 */
	.popup-layer-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9998;
	}

	/* 然后设置弹出层 */
	.popup-layer {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		padding: 20px;
		z-index: 9999;
	}

	/* 设置关闭按钮 */
	.popup-layer-close {
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
	}
</style>