<template>
	<!-- 签到页面 -->
	<!-- 签到墙纸 -->
	<div class="homepage">
		<!-- 顶部栏内容 -->
		<div class="Panel_Top" >
			<div class="top_menu">
				<img class="activity_logo" src="@/assets/news/cb17d06b638982473bb08483878b0626.png">
				<div class="istoptab">
					<router-link to="/" class="tabitme">签到墙</router-link>
					<router-link to="/Luckdraw" class="tabitme">大抽奖</router-link>
				</div>
				<div class="tp2">
					
					<div class="tp-1" style="">
						<div class="tp-3" id="counter">参与人数：{{usersigcount}}人</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<!-- 视频背景 -->
		<div class="bgvideo" style="width: 100%;height: 100%;position: absolute;left:0;top: 0;z-index: -1;">
			<!-- bgvideo.mp4 -->
			<!-- beijvie.mp4 -->
			<video src="@/assets/news/piantou.mp4" style="object-fit:fill;" autoplay autoplay="autoplay" autobuffer=""
				autoloop="" loop="" width="100%" height="100%"></video>
		</div>

		<div class="Panel Lottery">
			<div class="qiandao" id="ddd" style="display: block;">
				<ul id="divDetail">
					<li class="qiaodaosf" v-for="(item,index) in Checkuserlist" :key="index">
						<img  class="qiaodaotx" :src="item.avatar">
						<p  class="qiaodaoxm">{{item.nickname}}</p>
					</li>
				</ul>
			</div>
		</div>
		
		<qrcodebox ref="qrcodebox"></qrcodebox>
		
	</div>
</template>

<script>
	import qrcodebox from "@/components/qrcodebox.vue";
	import {
		userlist
	} from "@/utils/userlist.js";
	import {getSignNewList} from "@/utils/api/api.js"
	export default {
		name: 'Home',
		components: {
			qrcodebox,
		},
		data(){
			return {
				usersigcount:0,//参会总人数
				jgtime:5000,
				moniuserlist: userlist, //模拟数据列表

				//显示的数据
				Checkuserlist:[
					{
						username:"春暖花开",
						usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
					},
				]
			}
		},
		created() {
			// this.demoadduser();

			this.initgetdata();
		},
		methods:{
			demoadduser(){
				// let index = 0;
				// let clearnm =  setInterval(()=>{
				// 	this.Checkuserlist.push(this.moniuserlist[index]);
					
				// 	let viedeheiht = document.getElementById("divDetail").clientHeight;
				//     document.getElementById('ddd').scrollTop=viedeheiht+200;//通过scrollTop设置滚动到100位置
				// 	index++;
					
				// 	if(index>=this.moniuserlist.length){
				// 		clearInterval(clearnm);
				// 	}

				// },1500)

				//加载更多数据
				getSignNewList({
					user_id:this.Checkuserlist[this.Checkuserlist.length-1].user_id,
				}).then((res)=>{
					
					if(res.code==0){
						this.Checkuserlist = [...this.Checkuserlist,...res.data.list];//加入数据
						this.usersigcount = res.data.count;
						let viedeheiht = document.getElementById("divDetail").clientHeight;
						document.getElementById('ddd').scrollTop=viedeheiht+999999;//通过scrollTop设置滚动到100位置

						setTimeout(()=>{
							this.demoadduser();//加载更多的数据
						},this.jgtime)
					}
				}).catch((err)=>{
					//报错了也要继续请求
					setTimeout(()=>{
						this.demoadduser();//加载更多的数据
					},this.jgtime)
				})
			},
			//获取数据 
			initgetdata(){
				getSignNewList({

				}).then((res)=>{
					console.info("res",res);
					if(res.code==0){
						this.Checkuserlist = res.data.list;
						this.usersigcount = res.data.count;
						setTimeout(()=>{
							let viedeheiht = document.getElementById("divDetail").clientHeight;
							document.getElementById('ddd').scrollTop=viedeheiht+999999;//通过scrollTop设置滚动到100位置
						},500)

						setTimeout(()=>{
							this.demoadduser();//加载更多的数据
						},this.jgtime)
					}
				})
			}
		}
	}
</script>
<style>
	
	@import "./home.css";
</style>
