<template>
	<video id="player" :class="clazz" :src="src" :autoplay="autoplay" :initial-time="initialTime" :enable-play-gesture="false" :title="title"
		:enable-progress-gesture="false" :show-center-play-btn="false" :show-fullscreen-btn="false" :show-progress="true" @play="status=1"
		@pause="status=0" @timeupdate="timeupdate" @fullscreenchange="fullscreenchange" :poster="pauseImg"
		@ended="$emit('ended')" @error="errorFun" width="100%" height="100%" style="width: 100%;height: 100%;">
		<cover-image src="../../static/loading_1920.gif" class="loading_box" v-if="isSHowLoading"
			:play-strategy="2"></cover-image>
	</video>
</template>

<script>
	export default {
		inject: ['pageId', 'pageState'],
		watch: {

		},
		props: {
			clazz: {
				type: String
			},
			title: {
				type: String,
				default: ""
			},
			src: {
				type: String
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			showProgress: {
				type: Boolean,
				default: false
			},
			isSHowLoading: {
				type: Boolean,
				default: false
			},
			pauseImg: {
				type: String,
				default: ""
			},
			failStatus: {
				type: Number,
				default: 0
			},
      initialTime: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				status: 0,
				currentTime: 0,
				fullScreen: false,
			};
		},
		mounted() {
			this.viderContext = uni.createVideoContext("player", this);
		},
		onLoad() {
			uni.$on('keyDown', this.keyDownFun);
		},
		onUnload() {
			uni.$off('keyDown', this.keyDownFun);
		},
		methods: {
			keyDownFun(data) {
				console.log("keyDownFun")
				this.keyDown(data);
			},
			keyDown(Arrow) {
				console.log("监测到按键：" + Arrow)
				switch (Arrow) {
					case 'KeyLeft': {
						var time = parseInt(this.currentTime - 15, 10);
						this.viderContext.seek(time < 0 ? 0 : time)
					}
					break;
					case 'KeyRight': {
						var time = parseInt(this.currentTime + 15, 10);
						this.viderContext.seek(time);
					}
					break;
					case 'KeyEnter': {
						this.clickVideo();
					}
					break;
				};
			},
			clickVideo() {
				if (this.status) {
					this.viderContext.pause();
					this.viderContext.showStatusBar();
				} else {
					this.viderContext.play();
					this.viderContext.hideStatusBar();
				}
			},
			timeupdate: function(e) {
				this.currentTime = e.detail.currentTime;
        this.$emit("timeupdate", e.detail.currentTime)
			},
			fullscreenchange: function(e) {
				this.fullScreen = e.detail.fullScreen;
				this.pageState.handleEvent = e.detail.fullScreen;
        uni.$off('keyDown', this.keyDownFun);
				if (this.fullScreen) {
					this.viderContext.play();
          uni.$on('keyDown', this.keyDownFun);
				}
				this.$emit("fullscreenchange", e.detail.fullScreen)
			},
			errorFun() {
				this.$emit("errorFun")
			},
		}
	}
</script>

<style>
	.controls-play.img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 0%;
		transform: translateY(-50%);
	}

	.loading_box {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0px;
		top: 0px;
		z-index: 100;

	}

	.fail_img {
		width: 100%;
		height: 100%;
	}
</style>
