<template>
	<view :class="(listlength < 3)?'newLive':'oldlive'" :style="{backgroundColor: bgc,paddingBottom:'10px'}">
		<loadlogo v-if="!loadlogo" />
		<block v-if="loadlogo">
			<far-bottom></far-bottom>
			<!-- #ifndef H5 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="interval" :duration="duration" style="margin: 0upx 10upx 10upx 10upx;">
				<swiper-item
					v-for="(item, index) in swiperList"
					:key="index"
					style="border-radius: 15upx;border: 5upx solid #FFFFFF;box-sizing: border-box;"
					@click.stop="goimgUrl(item)"
				>
					<image :src="item.thumb" mode="aspectFill" style="width: 100%; height: 100%;"></image>
				</swiper-item>
			</swiper>
			<view  style="margin: 10upx 30upx 30upx 30upx;">
				<view class="dis-flex b-f" style="height: 300upx;margin-bottom: 20upx;border-radius: 10upx;" v-for="(items, indexs) in liveList" :key="indexs" @click.stop="golive(items)">
					<view  style="flex: 0.45;position: relative;">
						<!-- <view class="titleImg" :style="{background: 'url('+ items.cover_img +') no-repeat'}">
							
						</view> -->
						<image :src="items.cover_img" style="width: 100%;height: 100%;border-radius: 10upx 0 0 10upx;" mode="aspectFill"></image>
						<view class="advance dis-flex" v-if="item.is_playback == 1">
							<view class="f-22 bgcr" style="border-radius: 60upx;padding: 5upx 10upx;">
								直播回看
								<text class="iconfont icon-playfill" style="font-size: 22upx;"></text></view>
						</view>
						<view class="advance dis-flex" v-else-if="items.live_status == 103  || items.live_status == 102">
							<view class="f-22" style="border-radius: 60upx;background-color: #2889FC;padding: 5upx 10upx;" v-if="items.newtime !== '已结束'">预告</view>
							<view class="f-20" style="padding: 5upx 10upx;">{{ items.newtime }}</view>
						</view>
						<view class="advance dis-flex" v-else-if="items.live_status == 101">
							<view class="f-22" style="border-radius: 60upx;background-color: #7ACF38;padding: 5upx 10upx;">正在直播</view>
						</view>
						
						<view class="advance dis-flex" v-else-if="items.live_status == 104 || items.live_status == 105 || items.live_status == 106 || items.live_status == 107">
							<view class="f-22 bgcr" style="border-radius: 60upx;padding: 5upx 10upx;">
								{{(items.live_status == 104)?'禁播':(items.live_status == 105)?'暂停':(items.live_status == 106)?'异常':(items.live_status == 107)?'已过期':''}}</view>
						</view>
					</view>
					<view  style="flex: 0.55;padding: 20upx; position: relative;">
						<view class="f-30" style="padding-bottom: 20upx;">{{ items.name }}</view>
						<view class="dis-flex">
							<image :src="items.share_img" mode="aspectFill" style="width: 40upx;height: 40upx;border-radius: 50%;"></image>
							<view class="f-24" style="color: #999999;line-height: 40upx;height: 40upx;padding-left: 20upx;">{{ items.anchor_name }}</view>
						</view>
						<view class="dis-flex" style="position: absolute;bottom: 10upx;left: 10upx;">
							<view
								
								style="border-radius: 10upx;padding-left: 10upx;position: relative;"
								v-for="(item, index) in items.goods"
								:key="index"
								@click.stop="goodsUrl(item)"
								v-if="index < 3"
							>
								<image :src="item.cover_img" mode="aspectFill" style="width: 100upx;height: 100upx;border-radius: 7upx;"></image>
								<view class="UpshowNums f-w" v-if="(index !== 2 && items.goods.length > 3) || (items.goods.length <= 3) ">¥{{ item.price }}</view>
								<view class="UpshowNum" v-if="index == 2 && items.goods.length > 3" @click.stop="numgolive(items)">{{ items.goodsnum - 3 }}件</view>
							</view>
						</view>
					</view>
					
				</view>
				<load-more :isMore="loadingMore" v-if="!loadingMore"></load-more>
			</view>
			<!-- 视频 -->
			<PopManager :show="videoshow" @clickmask="videoshow = false" type="center">
				<view  v-if="videoshow" style="width: 100vw;height: 100vh;position: relative;">
					<video id="myvideo" :src="videolint[videoindex].media_url" @fullscreenchange="videoControl"  style="width: 100%;height: 100%;"
					  @click.stop="" :show-fullscreen-btn="false" autoplay ></video>
					 <view  style="position: absolute;left: 30upx;top: 30upx;color: #ffffff;padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(255,255,255,0.3);" @click="cloce">
					 	<text class="iconfont icon-roundleftfill" style="font-size: 36upx;"></text>
						<text class="f-36">返回</text>
					 </view>
					 <view class="dis-flex" style="width: 100%;position: absolute;top: 50%;transform: translateY(-50%);">
						 <view class="flex-box ">
							 <view  v-if="videoindex == 0 && videopage == 1">
							 	
							 </view>
						 	<view class="dis-il-block t-c col-f f-40" style="border-radius: 0 60upx 60upx 0;padding: 20upx;" 
							v-else
							@click="topvideo">
						 		<text class="iconfont icon-back"></text>
						 	</view>
						 </view>
					 	<view class="flex-box">
							<view  v-if="videoindex == (videolint.length - 1) && videopage == videototal">
								
							</view>
					 		<view class="dis-il-block t-c col-f f-40" style="border-radius: 60upx 0 0 60upx;float: right;padding: 20upx;" 
							v-else
							@click="downvideo">
					 			<text class="iconfont icon-right"></text>
					 		</view>
					 	</view>
						
					 </view>
				</view>
			</PopManager>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="qurl">
				<view class="f-30" style="padding: 30upx 0 ;">
					应官方要求,直播功能目前只支持小程序平台,长按识别二维码前往小程序端观看直播。
				</view>
				<view   style="box-shadow: 0upx 0upx 35upx #333333;width: 600upx;height: 600upx;">
					<image :src="qrimg" mode="" style="width: 600upx;height: 600upx;border-radius: 10upx;"></image>
				</view>
			</view>
			<!-- #endif -->
		</block>
		
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import loadMore from '@/components/template/loadmore.vue';
import Loadlogo from '@/components/template/loadlogo.vue';
import PopManager from '@/components/template/PopManager';
export default {
	components: {
		loadMore,
		Loadlogo,
		PopManager
	},
	data() {
		return {
			loadingMore: false,
			loadlogo: false,
			// 轮播图
			swiperList: [
				{
					thumb: ''
				}
			],
			duration: 500, //滑动时间
			interval: 2000, //间隔时间
			page: 1,
			liveList: [],
			bgc: '',
			count: 100,
			outtime:null,
			oneTime:true,
			qrimg:'',
			listlength:0,
			videoshow:false,
			videoContext:null,
			videolint:[],
			videoindex:0,
			videopage:1,
			videototal:0,
			roomid:0
		};
	},
	onLoad() {
		console.log('onLoad');
		// this.getliveList();
	},
	onReady(){
		// 页面初次渲染！  createVideoContext uni video自带 上下文 如果不懂可以去百度
		this.videoContext = uni.createVideoContext('myvideo');
		this.videoContext.requestFullScreen();
	},
	onShow() {
		console.log('onShow');
		if(this.oneTime){
			this.getliveList();
			this.oneTime = false;
			return
		}else if(this.page == 1){
			this.getliveList();
		}
		this.timesout();
	},
	methods: {
		cloce(){
			this.videoshow = false;
			this.videopage = 1;
			this.videoindex = 0;
		},
		downvideo(){
			if(this.videoindex == this.videolint.length - 1){
				if(this.videototal == this.videopage) return;
				this.videopage++;
				this.videoindex = 0;
				this.getpagelive()
			}else{
				this.videoindex++;
			}
		},
		topvideo(){
			if(this.videoindex == 0){
				// if(this.videopage == 1) return;
				this.videopage--;
				this.videoindex = 0;
				this.getpagelive();
			}else{
				this.videoindex--;
			}
			
		},
		getpagelive(){
			let _this = this,
				requestData = {
					page:this.videopage,
					room_id:this.roomid
				};
			App._post_form('&p=wxapp&do=playBack', requestData, res => {
				this.videolint  = res.data.live_replay;
			}) 
		},
		videoControl(e){
			console.log(e)
			if(e.detail.fullScreen){  //e.detail.fullScreen是否为全屏
				this.videoContext.play();
			}else{
				//停止播放
				this.videoContext.pause();
			}
		},
		numgolive(item){
			App.navigationTo({
				url: `pages/subPages/livePlayer/livePlayer?id=${item.roomid}`
			})
		},
		golive(item){
			if(item.live_status == 103){
				let _this = this,
					requestData = {
						page:this.videopage,
						room_id:item.roomid
					};
					this.roomid = item.roomid;
				App._post_form('&p=wxapp&do=playBack', requestData, res => {
					this.videototal = res.data.total_page;
					this.videolint  = res.data.live_replay;
				}) 
				this.videoshow = true;
				
				    // 获取当前视频id
				    // let currentId = e.currentTarget.dataset.id
				    // uni.createVideoContext获取视频上下文对象
					this.videoContext.requestFullScreen({
						direction:0
					})
				   
			}else{
				App.navigationTo({
					url: `pages/subPages/livePlayer/livePlayer?id=${item.roomid}`
				})
			}
				
		},
		//商品图片的跳转
		goodsUrl(item) {
			console.log(item.url)
			clearInterval(this.outtime);
			App.navigationTo({
				url: item.url
			});
		},
		// 轮播图路由跳转
		goimgUrl(item) {
			clearInterval(this.outtime);
			
				App.navigationTo({
								url: item.link
							});
			
			
		},
		timesout(){
			this.outtime =  setInterval(() => {
				let agoTimer = new Date().getTime();
				this.liveList.map((item, index) => {
					let newTimer = item.starttime;
					//获取之间的时间戳差值
					let useDay =  newTimer - (agoTimer/1000);
					//对差值进行换算，得到相应的单位
					let day = Math.floor(useDay / 86400);
					let hour = Math.floor((useDay % 86400) / 3600);
					let minute = Math.floor(((useDay % 86400) % 3600) / 60);
					let second = Math.floor(((useDay % 86400) % 3600) % 60);
					this.$set(item,'newtime', (day>0?day + '天':'') + hour + '时' + minute + '分' + second + '秒');
					if(useDay < 0){
						this.$set(item,'newtime','已结束');
						// clearInterval(this.outtime);
					}
					console.log(item.newtime);
				});
			}, 1000);
		},
		getliveList(flag = false) {
			App._post_form(`&p=wxapp&do=newLiveList&page=${this.page}`, {}, res => {
				console.log(res);
				//#ifdef H5
				this.qrimg = res.data.qrimg;
				//#endif
				//#ifndef H5
				if (flag) {
					this.liveList = this.liveList.concat(res.data.list);
				} else {
					this.swiperList = res.data.advs;
					this.bgc = res.data.bgc;
					this.liveList = res.data.list;
					// this.liveList[0].goods.push(this.liveList[0].goods[0]);
					console.log(this.liveList,this.liveList.length)
					if (this.count == false) {
						uni.showToast({
							icon: 'none',
							title: '刷新成功'
						});
					}
					this.count = 100;
				};
				this.listlength = this.liveList.length;
				if(res.data.list.length !== 0){
					clearInterval(this.outtime);
					this.timesout();
				}
				
				//#endif
				this.loadlogo = true;
				this.loadingMore = true;
			});
		}
	},
	onHide() {
		console.log('onHide');
		clearInterval(this.outtime);
	},
	onUnload() {
		console.log('onUnload');
		clearInterval(this.outtime);
	},
	onPullDownRefresh: function() {
		this.page = 1;
		this.count = false;
		this.getliveList();
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		console.log(this.page,this.count)
		this.loadingMore = false;
		
		if (this.page == this.count) {
			this.loadingMore = true;
		} else {
			this.page++;
			this.getliveList(true);
		}
	}
};
</script>

<style lang="scss" scoped>
.bgcr{
	background: -webkit-linear-gradient(right, #999999 , #999999); /* Safari 5.1 - 6.0 */
	            background: -o-linear-gradient(right, #999999, #999999); /* Opera 11.1 - 12.0 */
	            background: -moz-linear-gradient(right, #999999, #999999); /* Firefox 3.6 - 15 */
	            background: linear-gradient(right, #999999 , #999999); /* 标准的语法（必须放在最后） */
}
.newLive{
	height: 100vh;
	overflow: auto;
	padding-bottom: 20upx;
}
.qurl{
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translate(-50%);
		
	}
.UpshowNum {
	height: 100upx;
	font-size: 24upx;
	text-align: center;
	line-height: 100upx;
	width: 100upx;
	position: absolute;
	left: 10upx;
	border-radius: 7upx;
	color: #ffffff;
	top: 0;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.5);
}
.UpshowNums {
	height: 100upx;
	font-size: 18upx;
	text-align: left;
	line-height: 150upx;
	width: 100upx;
	position: absolute;
	left: 20upx;
	border-radius: 7upx;
	color: rgba(0,0,0,0.5 );
	top: 0;
	z-index: 100;
}
.advance {
	position: absolute;
	font-size: 24upx;
	color: #ffffff;
	left: 20upx;
	top: 20upx;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 60upx;
}
.titleImg{
	width: 100%;
	// background: url(../../../static/chooseCade/BG.png) no-repeat;
	height: 100%;
	border-radius: 10upx 0 0 10upx;
	background-size: 150upx 150upx;
}
</style>
