<template>
	<view class="view_body">
		<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="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>

			<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 dataList" :key="index">
						<view class="roomsbox-a">
							<view class="roomsbox-title">
								{{pp.date}}
							</view>
							<view class="roomsbox">
								<view class="roomblock" style="border: 1px solid #e1d9d4;" v-for="(room,j) in pp.records"
									: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&&isindex==0">
					<emptyPage title="暂无房间信息"></emptyPage>
				</view>
				<view class="noshuju" v-if="dataList.length==0&&isindex==1">
					<emptyPage title="暂无房间信息"></emptyPage>
				</view>
		</view>


	</view>
</template>

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


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

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

			};
		},
		onLoad() {


		},
		mounted() {
			this.getRoomList()
			this.getbackList()
		},
		onShow() {},
		onReachBottom() {
			this.getRoomList()
		},

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

			//输入
			change(e) {
				// console.log(e)
				if (e.detail.value.length <= 0) {
					this.page = 1
					this.getRoomList()
				}
			},
			//查询
			search() {
				this.page = 1
				this.roomList=[]
				this.dataList=[]
				if (this.isindex == 0) {
					this.getRoomList()
				} else {
					this.getbackList()
				}
			},
			//分类
			zhisort(i) {
				this.isindex = i
				this.page = 1
				this.keyword=''
				this.roomList=[]
				this.dataList=[]
				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 => {
				
				if (res.data.lists.length > 0) {
				
					// 初始化一个空数组来存储结果
					let result = [];
				
					// 遍历每一条直播记录
					for (let i = 0; i < res.data.lists.length; i++) {
						let record = res.data.lists[i];
						let date = record.date;
				
						// 检查结果数组中是否已存在该日期的分组
						let group = result.find((item) => item.date === date);
				
						// 如果不存在，则创建一个新的分组
						if (!group) {
							group = {
								date: date,
								records: []
							};
							result.push(group);
						}
				
						// 将当前记录添加到对应的分组中
						group.records.push(record);
					}
				
					this.dataList = result
					
					// 输出结果
				
				}
				})
			},
			/**
			 * 拉取房间列表
			 * @return {[type]}            
			 * [description]
			 */
			getRoomList() {
				live({
					page_size: 10,
					page: this.page,
					app_name: 'shop',
					keyword: this.keyword
				}).then(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
						}
			
					}else{
						uni.showModal({
							title:res.msg
						})
					}
				})
			},
			//历史直播间
			hsitroyjump: function(e) {
				
				uni.navigateTo({
					url: '/pages/room/histroyroom'+'?data=' + encodeURIComponent(JSON.stringify(e))
				})
			
			
			},
			
			jump: function(e) {
				uni.navigateTo({
					url: '/pages/room/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
				});

			},

		}
	}
</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;
		}
	}

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

	}

	.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;
	}

	.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;
	}

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

		margin-bottom: 30rpx;
		margin-left: 20rpx;
	}
	.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%;
		background-color: #fff;
	}

	.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>