<template>
	<div class="bgDiv">
		<el-container>
			<!--           -->
			<el-container>
				<el-aside width="36vw" style="text-align:left;padding:0;">
					<div class="leftRegion leftRegionA ">


						<H1 style="text-align:center">抽奖活动</H1>
						<div class="leftMain">
							<el-form ref="form" :model="formModel" label-width="4vw">
								<el-form-item label="活动">
									<el-select v-model="formModel.activityId" placeholder="请选择" style="width:21vw"
										size="mini" @change="handleChange">
										<el-option v-for="item in activityList" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="奖项">
									<el-select v-model="formModel.awardId" placeholder="请选择" style="width:8vw"
										size="mini" @change="handleAwardChange">
										<el-option v-for="item in awardInfoList" :key="item.id" :label="item.name"
											:value="item.id">
											<span style="float: left">{{ item.name }}</span>
											<span
												style="float: right; color: #8492a6; font-size: 13px">数量：{{ item.num }}</span>
										</el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<div style="text-align:center">
								<span>
									<el-button type="primary" @click="handleSubmit"
										:loading="submitting">开始抽奖</el-button>
									<el-button>重新开始</el-button>
								</span>
							</div>
							<div class="imgDiv">
								<el-image v-if="awardImage" style="width: 7.5vw; height: 7.5vw"
									:src="awardImage"
									fit="fit">
								</el-image>
							</div>
						</div>
					</div>
				</el-aside>
				<el-main>
					<div class="leftRegion leftRegionB">
						<div style="text-align:center;">
              <el-image :src="require('@/assets/img/zjmd.png')" style="width:15vw;height:3vw"></el-image>
            </div>
						<div style="width:100%;margin-top: 1.2vw;" v-for="(item,index) in awardWinningInfoList" v-bind:key="index">
							<span>{{item.name}}：{{item.num}}人</span>
							<el-divider></el-divider>
							<div style="margin-bottom:1.5vw;">
								<div class="imgText" v-for="(item1,index1) in item.winningInfoList" v-bind:key="index1">
									<el-image style="width: 4vw; height: 4vw"
                  :src="item1.lotteryPersonnelImage"></el-image>
									<div style="font-size:0.6vw">{{item1.lotteryPersonnelPhone}}</div>
								</div>
							</div>

						</div>

						<!-- <div style="width:100%;margin-top: 1.2vw;">
							<span>一等奖：1人</span>
							<el-divider></el-divider>
							<div style="margin-bottom:1.5vw;">
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
							</div>

						</div> -->

						<!-- <div style="width:100%;margin-top: 1.2vw;">
							<span>一等奖：1人</span>
							<el-divider></el-divider>
							<div style="margin-bottom:1.5vw;">
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
								<div class="imgText">
									<el-image style="width: 4vw; height: 4vw"
										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
									<div style="font-size:0.6vw">13588888888</div>
								</div>
							</div>

						</div> -->

					</div>
				</el-main>
			</el-container>
		</el-container>
		<div v-show="submittingModel" class=" lotteryRegion" :class="{
			lotteryResultsNum:lotteryResultsNum,
			lotteryProcess: !lotteryResultsNum
		}">
			<div class="l-title">{{popActivityName}}</div>
			<div class="l-title2">{{popAwardName}}：{{popAwardPrize}}</div>

			<div class="l-results" v-if="!isCompleted">
				<div class="l-imgText">
					<el-image class="l-imgText-img"
						:src="lotteryPersonnelImage"></el-image>
					<div class="l-imgText-t" style="">{{lotteryPersonnelPhone}}</div>
				</div>
			</div>

			<div class="l-results" v-else>
				<div class="l-imgText" v-for="(item,i) in  singleAwardWinningInfoList" :key="i">
					<el-image class="l-imgText-img"
						:src="item.lotteryPersonnelImage"></el-image>
					<div class="l-imgText-t" style="">{{item.lotteryPersonnelPhone}}</div>
				</div>
			</div>

			<div class="l-button-group" >
				<el-button type="danger"  @click="handleStop" v-if="!isCompleted">停止</el-button>
				<el-button type="success" @click="handleClose"  v-else >关闭</el-button>
			</div>
		</div>

	</div>
</template>

<script>
	import startLotteryApi from "@/api/business/startLottery";
  import awardInfoApi from "@/api/base/awardInfo";

	export default {
		data() {
			return {
				submitting: false,
				submittingModel: false,
				lotteryResultsNum: true, //抽奖人数 多 or 少
				isCompleted:false,
				formModel: {
          activityId:"",
          awardId:"",
        },
				activityList: [],
				awardInfoList: [],
        awardWinningInfoList:[],
		singleAwardWinningInfoList:[],
        selectedObject:null,
        awardImage:"",
        lotteryPersonnelList:[],
        lotteryPersonnelImage:"",
        lotteryPersonnelPhone:"",
        popActivityName:"",
        popAwardName:"",
        popAwardPrize:"",
        intervalId: null,
			}
		},
		created() {
			var self = this;

			startLotteryApi.list().then(function(response) {
				var jsonData = response.data;
				if (jsonData.result) {
					if (jsonData.data != null && jsonData.data != "") {
						self.activityList = jsonData.data;
					}
				}
			});
		},
		methods: {
			handleChange(val) {
				var self = this;
				var formData = new FormData();

				formData.append("activityId", val);

				self.awardInfoList = [];

				startLotteryApi.findByActivityId(formData).then(function(response) {
					var jsonData = response.data;
					if (jsonData.result) {
						if (jsonData.data != null && jsonData.data != "") {
							self.awardInfoList = jsonData.data;
						}
					}
				});

        self.loadWinningInfoList(val);
        self.loadLotteryPersonnelList(val);
			},
      handleAwardChange(val){
        var self = this;
        (function() {
          return startLotteryApi.edit(val);
        })()
          .then(response => {
            var jsonData = response.data;

            if (jsonData.result) {
              self.awardImage = jsonData.data.image;
              self.popActivityName = jsonData.data.activityName;
              self.popAwardName = jsonData.data.name;
              self.popAwardPrize = jsonData.data.prizeName;
            }
          })
      },
	handleSubmit() {

		if(this.formModel.activityId==""||this.formModel.awardId==""){
          this.$message({
            message: "请先选择活动和奖项，才能开始抽奖！",
            type: "error"
          });
          return;
        }

		if(this.lotteryPersonnelList==null||this.lotteryPersonnelList.length==0){
          this.$message({
            message: "该活动尚未导入抽奖用户，请先导入抽奖用户！",
            type: "error"
          });
          return;
        }

        this.submittingModel=true;
		this.lotteryResultsNum=false;
		this.isCompleted = false;


        var len = this.lotteryPersonnelList;

        var i = 0;

        this.intervalId = setInterval(() => {
          // 切换到下一张
          if(i+1==len){
            i = 0;
          }
          this.lotteryPersonnelImage = this.lotteryPersonnelList[i].image;
          this.lotteryPersonnelPhone = this.lotteryPersonnelList[i].phone;
          i++;
        },150);
        
			},
      loadWinningInfoList(activityId){
        var self = this;

        var formData = new FormData();
  
        formData.append("activityId", activityId);

        startLotteryApi
          .findWinningByActivityId(formData)
          .then(function(response) {
            self.loading = false;
  
            var jsonData = response.data;
  
            if(jsonData.result){
              var pageInfo = jsonData.data;
  
              self.awardWinningInfoList = pageInfo;

              //alert(JSON.stringify(self.awardWinningInfoList))
            }
            else {
              self.$message({
                  message: jsonData.message + "",
                  type: "warning"
                });
            }
          })
          .catch(error => {
            self.loading = false;
            // self.$message.error(error + "");
          });
      },
      loadLotteryPersonnelList(activityId){
        var self = this;

        var formData = new FormData();

        formData.append("activityId", activityId);

        startLotteryApi
          .lotteryPersonnelList(formData)
          .then(function(response) {
            self.loading = false;

            var jsonData = response.data;

            if(jsonData.result){
              var pageInfo = jsonData.data;

              self.lotteryPersonnelList = pageInfo;

              //alert(JSON.stringify(self.awardWinningInfoList))
            }
            else {
              self.$message({
                  message: jsonData.message + "",
                  type: "warning"
                });
            }
          })
          .catch(error => {
            self.loading = false;
            // self.$message.error(error + "");
          });
      },
      handleStop(){
		var self = this;
        self.lotteryResultsNum=true;
		self.isCompleted = true;
        clearInterval(this.intervalId);

		var formData = new FormData();
        formData.append("activityId", self.formModel.activityId);
        formData.append("awardId", self.formModel.awardId);

		startLotteryApi.startLotteryAward(formData).then(function(response) {
                self.loading = false;
  
                var jsonData = response.data;

                if (jsonData.result) {
                    var page = jsonData.data;

                    self.singleAwardWinningInfoList = page;

					self.handleChange(self.formModel.activityId);
              }
			});

      },
		handleClose(){
			this.isCompleted = false;
			this.submittingModel=false;
			this.singleAwardWinningInfoList=[];
		}
		}
	}
</script>
<style lang="scss">
	/* lotteryRegion */
	.lotteryRegion {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 40vw;
		height: 72vh;

		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.75);
		text-align: center;
		box-shadow: 0px 0px 6px 10px rgba(0, 0, 0, 0.15);
		border: 3px solid rgba(255, 255, 255, 1);
		padding: 2vw;
	}

	.l-title {
		font-size: 1.8vw;
	}

	.l-title2 {
		font-size: 1.2vw;

	}

	.l-results {
		margin-top: 3.6vw;

	}

	.l-imgText {
		
	}

	//大图
	.lotteryProcess {
		.l-imgText-img {
			width: 12vw;
			height: 24vh;
			max-height: 12vw;
		}

		.l-imgText-t {
			font-size: 1.4vw;
			margin-top: 1vw;
		}
	}

	//小图
	.lotteryResultsNum {
		.l-results {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			height: 40vh;
			overflow: hidden;
			overflow-y: auto;
		}

		.l-imgText-img {
			width: 5vw;
			height: 5vw;
		}

		.l-imgText-t {
			font-size: 0.9vw;
		}

		.l-imgText {
			margin: 0 1.2vw 1.2vw 0;
		}
	}

	.l-button-group {
		margin-top: 3.5vh;
	}

	/* zkx */
	.bgDiv {
		background-image: url('../../public/bg2.jpg');
		background-size: 100% 100%;
		/* 这会让图片在水平方向上铺满，垂直方向上保持原始比例 */
		background-repeat: repeat-x;
		/* 这会在水平方向上平铺 */
		color: #ffffff;
		height: 100%;
	}

	.leftRegion {
		background-color: rgba(20, 0, 98, 0.5);
		padding: 1vw;
		border: 2px solid rgba(255, 255, 255, 1);
		border-radius: 10px;
		height: 80vh;
		margin: 2vw;

	}

	.leftRegionA {
		width:30vw;
	}

	.leftRegionB {
		margin: 2vw 2vw 2vw 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		overflow-y: auto;
	}

	.el-main {
		/* //height: 500px; */
		overflow: auto;
		text-align: left;
		padding: 0px;
		margin: 0px
	}

	/* zkx */
	.el-header,
	.el-footer {
		text-align: center;
		line-height: 3vw;
	}

	.el-aside {
		text-align: center;
		padding: 0.5vw
	}



	body>.el-container {
		margin-bottom: 2vw;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 13vw;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 16vw;
	}

	.leftMain {
		margin-top: 1.5vw
	}

	.imgDiv {
		margin-top: 2.5vw;
		text-align: center
	}

	.el-form-item__label {
		color: #ffffff
	}

	.imgText {
		float: left;
		margin-left: 1vw
	}
</style>