<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" :header="{'Referer':REFERER}" 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'
	import {
		REFERER
	} from "@/common/config.js"
	let qxcplayerSDK = null
	let videoCtx = null
	export default {
		name: "qxcplayer",
		components: {
			SpeedView
		},
		props: {
			height: {
				type: Number,
				default: 400
			}
		},
		data() {
			return {
				REFERER,
				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) => {
							//  console.log(url)
							//  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>