<template>
	<view class="plays">
		<text class="absolute animation" :style="animation">{{marquee.customContent}}</text>
		<view id="playerWapper" v-show="show_play"></view>
		<view id="playerback" v-show="!show_play"></view>
	</view>
</template>

<script>
	import lives from "@/components/live/live.vue"
	import courseware from "@/components/tabs/courseware/courseware.vue"

	var player
	var hlsJsPlayer
	export default {
		name: "live",
		mounted() {
			this.getusertoken();
			this.getmarquee();
		},
		data() {
			return {
				show_play: false,
				roomconfig: {},
				marquee:{},
				animation:{},
				margintop:0
			};
		},
		methods: {
			//获取房间token
			getusertoken() {
				this.$nextTick(() => {
					if (uni.getStorageSync("login_ok") == 'success') {
						this.$api.getusertoken().then(res => {
							var that = this
							this.getroomconfig()
							var roomdid = res.data.data
							//获取观看地址
							var opts = {
								"width": "100%",
								"height": "100%",
								"showLoading": 1,
								"mode": 1,
								"autoplay": true,
							};
							if (uni.getStorageSync('room_token')) {
								roomdid = uni.getStorageSync('room_token')
							}
							player = new Finezb.Player(roomdid, opts);
							player.onPubStatusChange(function(status) {
								console.log("主播端推流状态：" + status);
								if (status == 0) {
									that.show_play = false
									that.getbackinfo()
									player.pause();
								} else if (status == 1) {
									if (hlsJsPlayer) {
										hlsJsPlayer.destroy()
									}
									that.show_play = true
									player.play();
								}
							});
							player.appendTo("playerWapper")
						})
					}

				})
			},
			//获取房间基础设置
			getroomconfig() {
				this.$api.roomconfig().then(res => {
					this.roomconfig = res.data.data
				}).catch(err => {
					console.log(err);
				})
			},
			//获取回看地址
			getbackinfo() {
				this.$api.getbackinfo().then(res => {
					if (res.data.data.videoUrl && this.roomconfig.replayEnable) {
						var backinfourl = res.data.data.videoUrl
						console.log(backinfourl);
						if (backinfourl.indexOf('http:') == 0) {
							backinfourl = backinfourl.replace('http:', '')
						} else {
							backinfourl = backinfourl.replace('https:', '')
						}
						if (hlsJsPlayer) {
							hlsJsPlayer.destroy()
						}
						this.$nextTick(() => {
							hlsJsPlayer = new HlsPlayer({
								id: 'playerback',
								url: backinfourl,
								width: '100%',
								height: '420rpx',
								playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
							});
						})
					} else {

					}

				})
			},
			//获取跑马灯数据
			getmarquee(){
				let that = this;
				this.$api.getroommarquee().then(res => {
					console.log('res',res)
					if(res.data.code == 200){
						let data = res.data.data;
						that.marquee = data;
						length = data.fontSize * data.customContent.length;
						that.animation = {
							right: `-${length+50}rpx`,
							marginTop:"0"
						}
						that.getRandom()
					}
				})				
			},
			// 获取随机数
			getRandom(){
				let that = this;
				let timer = setTimeout(() => {
					let num = Math.floor(Math.random()*400)
					that.animation.marginTop = `${num}rpx`
					clearTimeout(timer);
					getRandom()
				},5000);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.plays {
		width: 100%;
		height: 420rpx;
	}
	// 公用样式
	.absolute{
		position:absolute;
		z-index: 2;
		color: white;
	}
	.animation{
		animation: identifier 5s infinite linear;
	}
	/* 跑马灯 */
	@keyframes identifier {
		0%{ right: -160rpx;display: none; }
		100%{ right:750rpx;display: inline; }
	}
</style>
