<template>
	<video id="player" :class="clazz" :src="src" :autoplay="autoplay" :enable-play-gesture="false"
	 :enable-progress-gesture="false" :show-center-play-btn="false" :show-progress="true" @play="status=1" @pause="status=0"
	 @timeupdate="timeupdate" @fullscreenchange="fullscreenchange">
	  <cover-image class="controls-play img" v-if="status==0" src="/static/play.png"></cover-image>
	</video>
</template>

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

		},
		props: {
			clazz: {
				type: String
			},
			src: {
				type: String
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			showProgress: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				status: 0,
				currentTime: 0,
				fullScreen: false
			};
		},
		created() {
			this.viderContext = uni.createVideoContext("player");
			uni.$on('keyDown', (data) => {
				this.keyDown(data);
			});
		},
		methods: {
			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;
			},
			fullscreenchange: function(e) {
				this.fullScreen = e.detail.fullScreen;
				this.pageState.handleEvent = e.detail.fullScreen;
				if(this.fullScreen){
					this.viderContext.play();
				}
			}
		}
	}
</script>

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