<template>
	<view class="page_box">
		<view class="head_box">
			<view class="live-tab">
				<view class="live-tab__item" v-for="tab in liveTab" :key="tab.title" @tap="selTab(tab)">
					<view class="live-tab__item-name">{{ tab.name }}</view>
					<text class="live-tab__item--link" :class="{ 'live-tab__item--active': tabCur == tab.title }"></text>
				</view>
			</view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<view class="list-box">
					<block v-for="live in liveList" :key="live.roomId">
						<shop-live-card :detail="live"></shop-live-card>
					</block>
				</view>
				<view v-if="liveList.length" class="cu-load text-gray" :class="loadStatus"></view>
			</scroll-view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>

	</view>
</template>

<script>
	import Api from '@/common/api';
	/* import ShopLiveCard from '@/components/ShopLiveCard.vue' */
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

	export default {
		components: {
			
			uniLoadMore
		},
		data() {
			return {
				tabCur: 'all',
				liveStatus: '',
				loadingType: 'more', //加载更多状态
				loaded: false,
				loading: false,
				liveTab: [{
						title: 'all',
						name: '全部',
						code: ''
					},
					{
						title: 'prevue',
						name: '预告',
						code: '102'

					},
					{
						title: 'living',
						name: '直播中',
						code: '101'

					},
					{
						title: 'lived',
						name: '已结束',
						code: '103'

					}
				],
				liveList: [],
				loadStatus: '', //loading,over
				currentPage: 0,
				size: 100,
				lastPage: 0
			};
		},
		computed: {},
		onLoad() {
			this.getLiveList();
		},
		onHide() {},
		methods: {
			// 切换tab
			selTab(tab) {
				console.log(tab)
				this.tabCur = tab.title;
				this.liveStatus = tab.code;
				this.liveList = [];

				this.getLiveListTab();
			},

			// 直播列表
			async getLiveListTab() {
				let that = this;

				let params = {
					liveStatus: this.liveStatus,
					start: 0,
					size: this.size

				};
				let groupHotGoodsList = await Api.apiCall('get', Api.index.queryliveplayerroomlist, params);
				groupHotGoodsList.forEach(item => {
				console.log(this.liveStatus+','+item.live_status)
					if (item.live_status == this.liveStatus) {
						that.liveList.push(item)
					}
				});


			},
			// 直播列表
			async getLiveList() {
				let that = this;

				let params = {
					liveStatus: this.liveStatus,
					start: 0,
					size: this.size

				};
				let groupHotGoodsList = await Api.apiCall('get', Api.index.queryliveplayerroomlist, params);

				that.liveList = that.liveList.concat(groupHotGoodsList);
				this.currentPage++;

				this.loadingType = groupHotGoodsList.length > that.size ? 'nomore' : 'more';

			}
		},
		onReachBottom() {
			this.getLiveList();
		}
	};
</script>

<style lang="scss">
	// tab
	.live-tab {
		width: 100%;
		height: 96rpx;
		background: #fff;
		display: flex;
		align-items: center;

		&__item {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}

		&__item-name {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&__item--link {
			width: 68rpx;
			height: 4rpx;
			background: transparent;
			border-radius: 2rpx;
		}

		&__item--active {
			width: 68rpx;
			height: 4rpx;
			background: rgba(213, 166, 90, 1);
			border-radius: 2rpx;
		}
	}

	// 瀑布流 list
	.scroll-box {
		.list-box {
			width: 100%;
			-moz-column-count: 2;
			-webkit-column-count: 2;
			column-count: 2;
			padding: 25rpx;
		}
	}
</style>
