<template>
	<view class="view_body">
		<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
			<view class="" :style="'height:'+statusBarHeight+'px'">

			</view>
			<view>
				<view class="search_content flex_a_c_j_sb">
					<view class="flex_a_c">
						<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
						<input type="text" v-model="keyword" placeholder="搜索主播或关键字"
							placeholder-style="font-size: 30rpx;" @input="change">
					</view>
					<button class="search_btn" @click="search">搜索</button>
				</view>

				<view class="content-detail">
					<view class="banner">
						<view class="banner-detail" v-for="(item,i) in list" :key='i' @click="zhisort(i)">
							<view class="banner-name">
								{{item.name}}
							</view>
							<view class="banner-t" v-if="isindex==i">

							</view>
						</view>


					</view>
					<view class="content-detaila" @click="jump_url">
						去开直播
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>

				<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==0">
					<view class="roomsbox">
						<view class="roomblock" v-for="(room,index) in roomList" :key="index" @click="jump(room)"
							style="border: 1px solid #e1d9d4;">
							<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
							<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
							<view class="livetitle">{{room.live_name}}</view>
							<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
							</view>
							<view class="roomstatus-d" v-else style="background-color:  #fa2306;">
							</view>

							<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
							</view>
							<view class="roomstatus" style="color: #fa2306;" v-else>已停播
							</view>

						</view>
					</view>

				</scroll-view>
				<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==1">
					<view v-for="(pp,index) in roomList" :key="index">
						<view class="roomsbox-a" v-for="(kk,i) in pp" :key="i">
							<view class="roomsbox-title">
								{{i}}
							</view>
							<view class="roomsbox">
								<view class="roomblock" style="border: 1px solid #e1d9d4;" v-for="(room,j) in kk"
									:key="j" @click="hsitroyjump(room)">
									<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
									<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
									<view class="livetitle">{{room.live_name}}</view>
									<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
									</view>
									<view class="roomstatus-d" v-else style="background-color:  #fa2306;">
									</view>
									<view class="roomstatus-d" v-if="room.status==3" style="background-color: #e1d9d4;">
									</view>
									<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
									</view>
									<view class="roomstatus" style="color: #fa2306;" v-else>已停播
									</view>

								</view>
							</view>
						</view>

					</view>

				</scroll-view>
				<view class="noshuju" v-if="roomList.length==0">
					<emptyPage title="暂无房间信息"></emptyPage>
				</view>
			</view>

		</z-paging>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue';
	import {
		live,
		playbackList
	} from '@/api/api.js'


	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				keyword: '',
				statusBarHeight: 0,
				page: 1,
				dataindex: 1,
				page_data: true,
				list: [{
						name: '直播精选'
					},
					{
						name: '历史直播'
					},

				],
				roomList: [],
				user: [],
				index: 0,
				isGetLoginInfo: true,
				isindex: 0,

			};
		},
		onLoad() {

			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		mounted() {
			if (this.isUserInfoExist()) {
				console.log('用户信息存在');
				this.getRoomList()
			} else {
				console.log('用户信息不存在');
				uni.showModal({
					// title: '标题',
					content: '用户信息不存在,是否重新登录',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							// 用户点击了确定按钮
							uni.redirectTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户点击了取消按钮');
						}
					}
				});
			}

		},
		onShow() {},
		onReachBottom() {
			if (this.isindex == 0) {
				this.getRoomList()
			} else {
				this.getbackList()
			}

		},


		onPullDownRefresh: function() {
			console.log('下拉刷新')
			this.getRoomList()
		},
		methods: {

			//下拉刷新被触发
			onRefresh() {
				//以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					//1.5秒之后停止刷新动画
					if (this.isindex == 0) {
						this.getRoomList()
					} else {
						this.getbackList()
					}
					this.$refs.paging.complete();
				}, 1500)
			},
			isUserInfoExist() {
				const userInfo = this.$store.state.app.userInfo;
				uni.sendHostEvent('userinfo', userInfo, (ret) => {
					//发送消息成功回调
					console.log('消息成功' + JSON.stringify(userInfo));
				});
				return !!userInfo; // 如果 userInfo 为空，则返回 false；否则返回 true
			},
			//输入
			change(e) {
				// console.log(e)
				if (e.detail.value.length <= 0) {
					this.page = 1
					this.getRoomList()
				}
			},
			//查询
			search() {

				this.page = 1
				this.roomList = []
				if (this.isindex == 0) {
					this.getRoomList()
				} else {
					this.getbackList()
				}
			},
			//分类
			zhisort(i) {
				this.isindex = i
				this.page = 1
				this.roomList = []
				if (i == 0) {
					this.getRoomList()
				} else {
					this.getbackList()
				}
			},
			getbackList: function() {
				playbackList({
					page_size: 100,
					page: this.page,
					app_name: 'shop',
					keyword: this.keyword
				}).then(res => {
					// console.log(res)
					if (res.data.code = 1) {
						uni.hideLoading()
						// this.roomList = res.data.lists
						// this.roomList.push(res.data.lists)
							if (res.data.lists.length > 0) {
						const groupedArray = res.data.lists.reduce((acc, obj) => {
							const date = obj.date;
							if (!acc[date]) {
								acc[date] = [];
							}
							acc[date].push(obj);
							return acc;
						}, {});

						this.roomList.push(groupedArray)
						// 输出结果
						console.log(this.roomList);
						}
						// this.page = this.page + 1
					}
				})
			},
			/**
			 * 拉取房间列表
			 * @return {[type]}            
			 * [description]
			 */
			getRoomList: function() {
				live({
					page_size: 10,
					page: this.page,
					app_name: 'shop',
					keyword: this.keyword
				}).then(res => {
					// console.log(res)
					if (res.data.code = 1) {
						uni.hideLoading()
						if (res.data.lists.length > 0) {
							let list = res.data.lists;
							let productList = this.$util.SplitArray(list, this.roomList);
							setTimeout(() => {
								this.$set(this, 'roomList', productList);
							}, 500)
							this.page = this.page + 1
						}

					}
				})
			},
			jump: function(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/live/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
				})

			},
			//历史直播间
			hsitroyjump: function(e) {
				console.log(e)
				
				uni.navigateTo({
					url: '/pages/live/histroyroom' + '?data=' + encodeURIComponent(JSON.stringify(e))
				})

			},
			//创建直播间
			jump_url() {
				if (this.isUserInfoExist()) {
					uni.navigateTo({
						url: '/pages/room/create_room'
					});
				} else {
					uni.showModal({
						// title: '标题',
						content: '用户信息不存在,是否重新登录',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
								// 用户点击了确定按钮
								uni.redirectTo({
									url: '/pages/login/login'
								})
							} else if (res.cancel) {
								// 用户点击了取消按钮
								console.log('用户点击了取消按钮');
							}
						}
					});
				}

			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.goods_body_scroll {
		margin-top: 50rpx;
	}

	.search_content {
		margin: 0 auto;
		width: 724rpx;
		height: 64rpx;
		padding: 2px 2px 2px 21.05rpx;
		border-radius: 175rpx;
		background: #fff;
		margin-bottom: 21rpx;
		position: relative;
		box-sizing: border-box;
		border: 2rpx solid #FCB9AD;
		margin-top: 30rpx;

		.icon-sousuo {
			font-size: 26.32rpx;
			font-weight: bold;
			color: #c8c7c6;
			margin-right: 17.54rpx;
		}

		.search_btn {
			color: #fff;
			width: 105.26rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: #f84221;
			border-radius: 100px;
			font-size: 28.07rpx;
		}
	}

	.content-detail {
		display: flex;
		justify-content: space-between;
	}

	.banner {
		display: flex;
		padding-left: 28rpx;

	}

	.roomsbox-title {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 30rpx;
		margin-left: 20rpx;
	}

	.banner-detail {
		width: 133rpx;
		margin-right: 30rpx;
	}

	.banner-name {
		font-size: 33rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.content-detaila {
		font-size: 33rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}

	.banner-t {
		width: 46px;
		height: 0rpx;
		opacity: 1;
		border: 2rpx solid #F84221;
		margin: 0 auto;
	}

	.noshuju {
		height: 760upx;
	}

	.mico-18 {
		margin-top: 10upx;
		color: #666666;
	}

	.view_body {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.roomstatus-d {
		width: 20upx;
		height: 20upx;
		border-radius: 20upx;
		position: absolute;
		left: 20upx;
		top: 20upx;
	}

	.roomstatus {
		position: absolute;
		left: 40upx;
		top: 10upx;
		font-size: 28upx;
	}

	.livetitle {
		position: absolute;
		bottom: 20upx;
		width: 100%;
		text-align: center;
		height: 70upx;
		line-height: 70upx;
		color: #FFFFFF;
	}

	.top {
		display: flex;
		padding: 20upx;
		top: 0;
		position: fixed;
		left: 0;
		width: 95%;
		background-color: #FFFFFF;
		z-index: 9999;
	}

	.top_li {
		font-size: 32upx;
		padding: 0 20upx;
		display: table-cell;
		/* vertical-align:bottom; */
		padding-top: 10upx;
		color: #666666;
	}

	.top-lable-box {
		/* #ifdef APP-PLUS */
		/* flex: 1; */

		/* #endif */
		width: 80%;
	}

	.active {
		font-size: 40upx;
		font-weight: 800;
		color: #333333;
		padding-top: 0;
	}

	image {
		width: 100%;
	}

	.roomsbox {
		display: flex;
		flex-wrap: wrap;
	}

	.roomblock {
		width: 45%;
		height: 300upx;
		border-radius: 10upx;
		overflow: hidden;
		margin-bottom: 20upx;
		position: relative;
		margin-left: 2.5%;
	}

	.right_top_scroll {
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.scroll-view {
		display: inline-block;
		margin-right: 30rpx;
		text-align: center;
		font-size: 32rpx;
		height: 60rpx;
		line-height: 60rpx;
		box-sizing: border-box;
		padding: 0 10rpx;

	}

	.view_body {
		background: #FFFFFF;
		width: 100%;
		overflow: hidden;
	}

	.mico-14 {
		margin-right: 4upx;
	}

	.noshuju {
		height: 750upx;
	}

	.noshuju_ico {
		width: 120upx;
		height: 80upx;
		margin: 0 auto;
		margin-top: 300rpx;

	}

	.noshuju_ico image {
		width: 100%;
		height: 100%;
	}

	.mico-18 {
		margin-top: 10upx;
		color: #666666;
	}

	.create-but {
		background-color: #1ce0c5;
		width: 120upx;
		height: 60upx;
		line-height: 60upx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 10upx;
		/* #ifdef MP-WEIXIN */
		margin-left: 40upx;
		/* #endif */
		margin-top: 4upx;
	}
</style>