<template>
	<view id="app" style="width: 80vw;margin: auto;">
		<view class="lotteryBox fleximg dis-flex">
			<view v-for='(item,key) in goodsList' :key="item.id" :class="key + 1 === index?'active':'noactive'">
				<view >
					<image :src="Number(item.draw_goods_id) !== 0?item.image:imgfixUrls + 'xxhg.png'"   class="itemImg" mode=""></image>
					<p class="f-24" style="color: #B82F39;height: 40upx;line-height: 40upx;">{{Number(item.draw_goods_id) !== 0?item.title:'谢谢参与'}}</p>
				</view>
				<!-- <view  v-else>
					<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4090871184,759043574&fm=26&gp=0.jpg" style="width: 100%;height: 110upx;" mode=""></image>
				</view> -->
			</view>


		</view>
		<!-- <view class="lotteryBtn" @click='lotteryBtn'>
			立即抽奖
		</view> -->
	</view>

</template>

<script>
	import App from '@/common/js/app.js';
	export default {
		data() {
			return {
				index: 0, //滚动下标
				times: -1, //滚动次数（每一个方格为一次）
				cycle: 48, //循环滚动的次数
				speed: 1, //转动速度
				ind:7,
				count:10
			}
		},
		mounted() {
			let _this = this;
			   uni.$on('opendraw',function(data){
				   console.log(111111)
			        _this.lotteryBtn();
			    })
		},
		props:{
			goodsList:{
				type: Array,
				default: false
			},
			opendraw:{
				type: Number,
				default: 0
			},
			parameterid:{
				type: String,
				default: 0
			},
		},
		watch:{
			opendraw(newPage,oldPage){
				this.lotteryBtn();
			}
		},
		methods: {
			lotteryBtn() {
				let _this = this;
				App._post_form(
					`&p=draw&do=draw&id=${_this.parameterid}`,
					{},
					res => {
						console.log(res)
						console.log('点击');
						_this.$emit('startMusic')
						_this.ind = Number(res.data.serial_number) // 随机产生一个中奖号码
						// _this.ind = 14;
						_this.index = 1;
						_this.speed = 30;
						_this.times = 0;
						_this.startRoll();
					},fail=>{
					let msg = '';
						if(fail.data.message == '未绑定手机号'){
							msg = fail.data.message;
						}
					_this.$emit('startMusic',false,msg)
				});
				
				
			},
			roll: function() {
				let index = this.index;
				let count = this.goodsList.length; //总长度
				index += 1;
				if (index > count) {
					index = 1
				}
				this.index = index
			},
			startRoll: function() {
				
				this.times += 1;
				this.roll();
				console.log(this.times,this.cycle  + this.ind,this.speed,this.ind);
				// console.log((this.cycle + this.count) / 9)
				if (this.times == (this.cycle  + this.ind)) {
					// this.speed += 10;
					this.$emit('endMusic',this.ind)
					clearTimeout(timer); //清除延迟函数
					this.times = 0;
					this.index = this.ind;
				} else {
					
					if (this.times < ((this.cycle + this.ind) /2) ) {
						this.speed -= 1; //加快转动速度
					} else if(this.times > ((this.cycle + this.ind) /2) ){
						this.speed += 10;
					}
					var timer;
					setTimeout(()=>{
						timer = setTimeout(this.startRoll, this.speed)
					},3000 / this.cycle)
					
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.fleximg{
		display: flex;
		    width: auto;
		    justify-content: space-between;
		    flex-wrap: wrap;
			width: 100%;
		    overflow: hidden;
		.flex-item{
			// min-width: 20vw;
			// align-self:flex-start;
			margin-bottom: 10upx;
			border-radius: 10upx;
			flex: 0.20;
			height: 130upx;
			min-width: 20%;
			// height: 50upx;
		}
		.active {
			// flex:0 0 28%;
			/* border: 3upx solid #F82400; */
			background-color: #FFEF94;
			text-align: center;
			padding: 10upx;
			margin-bottom: 10upx;
			border-radius: 10upx;
			flex: 0.20;
			// height: 200upx;
			min-width: 20%;
			margin-right: 10upx;
			width: 180upx;
			height: 130upx;
			overflow: hidden;
		}
		.noactive{
			// flex:0 0 28%;
			padding: 10upx;
			text-align: center;
			background-color: #FFFFFF;
			margin-bottom: 10upx;
			margin-right: 10upx;
			border-radius: 10upx;
			width: 180upx;
			height: 130upx;
			flex: 0.20;
			// height: 200upx;
			min-width: 20%;
			overflow: hidden;
		}
	}
	.fleximg:after {
	      content: "";
	      flex: 0.20;
		  min-width: 20%;
	   }
	// .lotteryBox{
	// 	display: -webkit-flex; /* Safari */
	// 	      justify-content: center;
	// 	      align-items: center;
	// 		  width: 100%;
	// 		  flex-wrap:wrap;
	// }
	.lotteryBtn{
		position: absolute;
	}
	.itemImg {
		width: 80upx;
		height: 80upx;
		/* width: 30%; */
	}

	
</style>
