<template>
	<view class="qxcplayer-box" :style="'height:' + height + 'rpx'">
		<video id="qxc_player" class="qxc-video" :src="playUrl"
		autoplay="" @play="videoPlay()" @pause="videoPause()" @timeupdate="videoTimeUpdate"
		@error="videoError"
		referrer-policy="origin"
		@controlstoggle="controlstoggle"
		@fullscreenchange="fullScreenChange"
		:custom-cache="false"
		>
			<view :class="fullScreen? 'controller-top controller-top-nobg': 'controller-top'" v-if="topShow">
				<text class="speed-txt" @click="speedTap">X {{speedVal}}</text>
			</view>
			  <cover-image v-if="!isPlay && topShow" @click="centerPlayClick" src="../../static/qxc_play.png" :class="fullScreen ? 'centerbtn-fullscreen' : 'centerbtn'"></cover-image>
			  <cover-image v-if="isPlay && topShow" @click="centerPauseClick" src="../../static/qxc_pause.png" :class="fullScreen ? 'centerbtn-fullscreen' : 'centerbtn'"></cover-image>
			<SpeedView @speedChange="speedChange" ref="speedBox" class="speed-box"></SpeedView>
		</video>
	</view>
</template>

<script>
	import QXCMiniPlayerSDK from './lib/qxcplaysdk.es'
	import SpeedView from './speed/speedview.vue'
	let qxcplayerSDK = null	
	let videoCtx = null
	export default {
		name:"qxcplayer",
		components: {SpeedView},
		props: {
			height: {
				type: Number,
				default: 400
			}
		},
		data() {
			return {
				count: 0,
				isPlay: false,
				showControls: true,
				topShow: true,
				fullScreen: false,
				speedVal: 1.0,
				playUrl: null,
				VVideo: {
					curTime: 0
				}
			};
		},
		mounted() {
			videoCtx = uni.createVideoContext('qxc_player', this)
		},
		methods: {
			setTime: function(time) {/*设置视频初始化播放位置 参数 第一个 时间*/
				let that = this;
				if (time && time > 0) {
					videoCtx.seek(time);
				}
			},
			initData: function(params) {
				console.log('V1.0.0')
				qxcplayerSDK = new QXCMiniPlayerSDK({
					data: {
					  token: params.token,
					  // 用户名，可不填
					  name: params.name,
					  // 环境  test 测试环境  product 正式环境  默认是正式环境
					  env: params.env,
					  logLeve: 0, 
					  isWx: true
					},
					playerCallback: {
					          onConnectResult: (type, reason) => {
					          },
					          onDuplicateLoginKickOut:  () => {
					            // 异地登录
					            this.playUrl = ''
								uni.showToast({
									title: '异地登录' + this.count,
									icon:'error',
									duration: 2000
								});
					          },
					          onPlayUrl: (url, time) => {
								 //  uni.showToast({
								 //  	title: 'onPlayUrl' + url,
									// icon: 'none'
								 //  })
								  this.playUrl = url
					              videoCtx.seek(time)
					          },
					          onLineList: (linelist) => {
					          },
					          onPlayerInfo:  (title, total) => {
					          },
					          onMediaError: (code, msg) => {
								uni.showToast({
									title: msg + "#" + code,
									icon:'error',
									duration: 2000
								});
					          }
					        }
				})
				qxcplayerSDK.connect()
				this.count = this.count + 1
				console.log('mgs: initData', this.count)
			},
			videoPlay: function () {
				this.isPlay = true
			},
			videoPause: function () {
				this.isPlay = false
			},
			videoTimeUpdate: function (e) {
				qxcplayerSDK.setCurTime(Math.floor(e.detail.currentTime))
				this.VVideo.curTime = e.detail.currentTime
			},
			videoError: function (e) {
				console.log(e)
				uni.showToast({
					title: '播放失败' + this.count,
					icon:'error',
					duration: 2000
				});
				this.isPlay = false
			},
			speedTap: function (e) {
				this.$refs.speedBox.setShow()
			},
			speedChange: function (val) {
				videoCtx.playbackRate(Number(val))
				this.speedVal = val
			},
			controlstoggle: function (e) {
			    let show = e.detail.show
			    this.topShow = show
			},
			fullScreenChange: function (e) {
			    this.fullScreen = e.detail.fullScreen
			},
			centerPlayClick: function () {
			      if (videoCtx) videoCtx.play()
		    },
		    centerPauseClick: function () {
			      if (videoCtx) videoCtx.pause()
		    },
			destory: function () {
				this.playUrl = ''
				qxcplayerSDK.release()
			}
		}
	}
</script>

<style scoped>
	.qxcplayer-box{
	  position: relative;
	  width: 100%;
	}

	.qxc-video{
	  width: 100%;
	  height: 100%;
	}
	.controller-top{
	  width: 100%;
	  height: 30rpx;
	  position: fixed;
	  top: 0rpx;
	  display: flex;
	  flex-direction: row-reverse;
	  background: rgba(0, 0, 0, 0.3);
	  padding-top: 20rpx;
	}
	.controller-top-nobg{
	  background: rgba(0, 0, 0, 0.0);
	}
	
	.speed-txt{
	  color: white;
	  font-size: 10pt;
	  pointer-events: all;
	  margin-right: 40rpx;
	  padding: 2rpx;
	}
	
	.centerbtn{
	  position: absolute;
	  width: 30rpx;
	  height: 30rpx;
	  top: calc(200rpx - 37rpx);
	  left: calc(50% - 30rpx);
	  background-color: rgba(0, 0, 0, 0.2);
	  border-radius: 50%;
	  padding: 20rpx;
	}
	
	.centerbtn-fullscreen{
	  position: absolute;
	  width: 30rpx;
	  height: 30rpx;
	  top: calc(50% - 37rpx);
	  left: calc(50% - 30rpx);
	  background-color: rgba(0, 0, 0, 0.2);
	  border-radius: 50%;
	  padding: 20rpx;
	}
</style>