<template>
	<view class="page">
		<view style="height:150rpx;width:100%;"></view>
		<view class="row-space-around" >
			<view class="bg-gray-help margin-sm padding-lr-lg padding-tb-sm radius-xs" v-for="(item,index) in MemberPostsList" :key="index" @tap="goLive(item.story_id)">
				<image lazy-load :src="item.story_file[0]"  style="width:366rpx;" />
				<view class="item-info">
					<image :src="item.user_avatar" mode="aspectFill" class="info-avatar" />
					<text class="item-name">{{item.user_nickname}}</text>
				</view>
			</view>
		</view>
		<view class="m-loading-box" style="margin-top:120rpx;">
			<block v-if="ispage">
				<view class="u-loadmore">
					<label class="u-loading"></label>
					<text class="u-loadmore-tips">{{__('正在加载')}}</text>
				</view>
				<view>
					<text></text>
				</view>
			</block>
			<block v-else>
				<view class="u-loadmore u-loadmore-line">
					<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	
	import dateUtil from "@/helpers/util_date";
	import statusBar from '@/components/status-bar.vue'
	import { mapState, mapMutations } from 'vuex';
	export default {
		props:{
			// 瀑布流列表
			videoList:{
				type:Array,
				require:true
			},
		
		},
		data() {
			return {
				flag: false,
				ispage: false,
				page:1,
				MemberPostsList: [],
				is_loaded:false,
			};
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin','__', '$',]),
		components: {
			statusBar,
		},
		
		created() {
			this.getPostsList()
		},
		
		watch:{
			
		},
		methods:{
			 ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
	
			
			getPostsList: function (force_refresh) {
				let that = this;
				var params = {page: this.page, 'rand':1};
			
				that.$.request({
					url: this.Config.URL.sns.story_lists,
					data: params,
					success: function (data, status, msg, code) {
						if (data.items.length > 0) {
							for (var r = 0; r < data.items.length; r++) {
								data.items[r]['story_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['story_time']));
							}
			
							let tmp = []
			
							if (force_refresh)
							{
								tmp = data.items.concat(that.MemberPostsList);
							}
							else
							{
								tmp = that.MemberPostsList.concat(data.items);
							}
			
							if (data.page >= data.total) {
								that.MemberPostsList = tmp
								that.flag = false
								that.ispage = false
							} else {
								that.MemberPostsList = tmp
								that.flag = true
								that.ispage = true
							}
			
						} else {
							that.flag = false
							that.ispage = false
							
						}
						
						that.is_loaded = true
						
			
						that.$.stopPullDownRefresh()
						that.$.hideLoading();
					}
				});
			},
			
			goLive: function(e) {
				this.$emit('confirm', e);
			},
			
			scrollbottom: function(e) {
			    if (this.flag) {
			        var that = this;
					that.flag = false;
			         clearTimeout(n);
			      
			       that.page = parseInt(that.page) + 1;
			
			        var n = setTimeout(function() {
			                that.getPostsList();
			        }, 500);
			    }
			},
			
		
	
		}
	}
</script>

<style scoped>
	
	.page {
		background-color: #000000;
	}
	/* 横向两端对齐,位于各行之前、之间、之后都留有空白的容器内 */
	.row-space-around {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: relative;
		/* #endif */
		flex-direction: row !important;
		/* justify-content: space-around !important; */
		flex-wrap:wrap !important;
		background-color: #000000;
	}
	
	.radius-xs {
		/* padding:10rpx; */
		border-radius: 10rpx;
		background-color: #fff;
		margin: 4rpx;
	}
	
	.lv-status {
		
/* 		height:50rpx;
		width:120rpx; */
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 50rpx;
		color: #fff;
		font-size: 18rpx;
		padding: 4rpx 12rpx;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		display: flex;
		flex-direction:row !important;
		/* #ifdef APP-PLUS-NVUE */
		padding-top:14rpx;
		/* #endif */
		
	}
	
	.dot-gray {
		background-color: #ababab;
		border-radius: 50%;
		margin-right: 4rpx;
		margin-top: 14rpx;
		height: 12rpx;
		width: 12rpx;
		width: 12rpx;
		/* #ifdef APP-PLUS-NVUE */
		margin-top: 4rpx;
		/* #endif */
	}
	
	.dot {
		background-color: #ababab;
		border-radius: 50%;
		margin-right: 4rpx;
		margin-top: 14rpx;
		height: 12rpx;
		width: 12rpx;
		/* #ifdef APP-PLUS-NVUE */
		margin-top: 4rpx;
		/* #endif */
	}
	
	.info-avatar {
		height: 50rpx;
		width: 50rpx;
		border-radius: 50rpx;
	
	}
	
	.item-name {
		color: #fff;
		margin-left: 10rpx;
		font-size: 24rpx;
		line-height: 50rpx;
	}
	
	.item-info {
		position: absolute;
		width:300rpx;
		bottom:30rpx;
		left:20rpx;
		display: flex;
		flex-direction:row !important;
		flex-wrap: wrap !important;
		overflow:hidden;
	}
	
	.live-room-name {
		width:344rpx;
	
		padding:10rpx 6rpx;
	}
	
	.room-name {
		overflow:hidden;
		text-overflow:ellipsis;  
		lines: 2;
		font-size: 24rpx;
	}
	.u-loading {
		width:40rpx;
		height:40rpx;
		margin-left:220rpx;
	}
	.u-loadmore-tips {
		background-color: #000000;
		color:#fff;
		/* #ifdef APP-PLUS-NVUE */
		width:400rpx;
		margin-left:280rpx;
		/* #endif */
	}
</style>
