<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/28.mp4" style="object-fit:fill;" autoplay autoplay="autoplay" autobuffer=""
				autoloop="" loop="" width="100%" height="100%"></video>
		</div>

		<div id="lottery-panel" class="">
			<div v-show="centerDialogVisible==false" class="lottery-side lottery-left">
				<div class="lottery-img">
					<img src="@/assets/news/defaultaward.jpg" alt="">
				</div>
				<div class="lottery-control">
					<div class="control-item">
						中奖人数：<span @click="jianren" class="icon-ctrol icon-minus" title="按上下键增减人数"></span>
						<em class="lottery-num">{{Wintheprizenum}}</em>
						<span @click="jiaren" class="icon-ctrol icon-plus" title="按上下键增减人数"></span>
					</div>
					<div @click="startchoujiang" class="control-item-btn">
						<div class="lottery-btn btn-start" title="开始抽奖">&nbsp;</div>
					</div>
				</div>
			</div>
			<!-- 左边的 -->




			<div v-show="centerDialogVisible==false" class="lottery-side lottery-right" style="">
				<span class="winnernum">中奖名单(<span class="winnernum_txt">{{userjzlisy}}</span>人)</span>
				<div class="lottery-win-list lottery-horizontal">
					<div class="lottery-winner" id="lottery-winner">

						<div v-for="(itema,index) in zjusercount" :key="index" class="ulul">
							<div class="lunci">第{{index+1}}轮</div>
							<ul class="lottery-win-scroll" tabindex="5000">
								<li v-for="(item,index1) in itema.list" :key="index1">
									<div class="lottery-avatar-bd">
										<div class="lottery-avatar-bg">
										<img :src="item.avatar">
										</div>
									</div>
									<div class="winner-name">
										{{item.nickname}}
										<br>
										ID:{{item.user_id}}
									</div>
								</li>
							</ul>
						</div>
						
					</div>
				</div>
			</div>
			<!-- 右边的 -->


			<el-dialog @close="close" @open="openrun" :close-on-click-modal="false" :close-on-press-escape="false"
				:modal-append-to-body="false" title="" :visible.sync="centerDialogVisible" width="30%" center>
				<ul class="lottery-scroll">
					<li v-for="(item,index) in dtuserzj" :key="index" style="width:14%;padding:14% 0 0 0;">
						<div class="lottery-item" style="font-size:1.4em">
							<p>{{item.nickname}}</p>
							<p>ID:{{item.user_id}}</p>
						</div>
						<img :src="item.avatar">
					</li>
				</ul>
				<div v-show="isshowstop"  class="control-item-btn1">
					<div @click="stopkaijiang" class="lottery-btn1 btn-stop" title="停止抽奖" style="">&nbsp;</div>
				</div>

			</el-dialog>

		</div>


		<qrcodebox ref="qrcodebox"></qrcodebox>

	</div>
</template>

<script>
	import {
		userlist
	} from "@/utils/userlist.js"
	let cls = 0;
	import qrcodebox from "@/components/qrcodebox.vue";
	import {getSignNewList,getWinner,getWinnerList} from "@/utils/api/api.js"
	export default {
		components:{
			qrcodebox
		},
		name: "Luckdraw",
		data() {
			return {
				moniuserlist: userlist, //模拟数据列表
				Checkuserlist:[],//参会人员的数据
				usersigcount:0,

				Wintheprizenum: 1,
				centerDialogVisible: false,


				//模拟数据
				imitateuserlist: [
					{
						nickname: "w_code",
						avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLUVQibXaS2mk2scS5ZacUyc4dQkqfZXsz8K6at0b8UM0JxxCFQRs44KEiaG5DDItKFV6y6hrbklubQ/132",
						user_id:"9718",
					},
				],
				dtuserzj: [], //动态中奖用户名单
				isshowstop:false,//是否显示停止按钮

				//中奖人员的信息
				zjusercount:0,
				userjzlisy:[],//中奖名单

			}
		},
		created(){
			this.initgetdata();

			this.getWinnerListfun();
		},
		methods: {
			//获取中奖人员名单
			getWinnerListfun(){
				getWinnerList({

				}).then((res)=>{
					if(res.code==0){
						this.zjusercount=res.data.list;
						this.userjzlisy=res.data.count;//中奖名单
					}
				})
			},
			//获取数据 参会人员的数据
			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位置
						},1000)
					}
				})
			},
			//取指定范围内的随机数
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			},
			//减人
			jianren() {
				this.Wintheprizenum--;
				if (this.Wintheprizenum <= 0) {
					this.Wintheprizenum = 1;
				}
			},
			//加人  
			jiaren() {
				this.Wintheprizenum++;
				if(this.Wintheprizenum>=10){
					this.Wintheprizenum = 10;
				}
			},
			//开始抽奖
			startchoujiang() {
				this.centerDialogVisible = true;
				let index = 0;
				this.isshowstop = true;
				cls = setInterval(() => {
					let suijiarr = [];
					for (let i = 0; i < this.Wintheprizenum; i++) {
						let suijindex = this.randomNum(0, this.Checkuserlist.length);
						// console.info("suijindex",suijindex);
						suijiarr.push(this.Checkuserlist[suijindex]);
					}
					this.dtuserzj = suijiarr; //赋值集合
					index++;
					
				}, 100)
			},
			//停止按钮点击 也就是开奖的方法
			stopkaijiang(){
				
				//开奖 这个最后要请求真实数据
				//请求开奖
				getWinner({
					count:this.Wintheprizenum,
				}).then((res)=>{
					if(res.code==0){
						this.dtuserzj = []; //设置最后的结果
						clearInterval(cls);//清除定时器
						this.isshowstop = false;//隐藏停止按钮
						this.dtuserzj = res.data;//赋值中奖名单
					}else{
						this.dtuserzj = [];
					}
				}).catch((err)=>{
					this.dtuserzj = [];
				})

				
			},
			//打开弹窗的回调
			openrun() {
				this.getWinnerListfun();
			},
			//Dialog 关闭的回调	
			close() {
				clearInterval(cls);
				this.isshowstop = false;
				this.getWinnerListfun();
			}
		}
	}
</script>

<style>
	@import "../Home/home.css";
	@import "./Luckdraw.css";
</style>
<style>
	#lottery-panel .el-dialog.el-dialog--center {
		width: 100% !important;
		height: 78%;
		background-color: rgba(30, 3, 64, .3) !important;
	}

	.el-dialog__headerbtn .el-dialog__close {
		color: #fff !important;
		font-size: 50px;
	}
</style>
