<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 === 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: 50upx;line-height: 50upx;">{{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" v-if="key == 1" style="width: 100%;height: 160upx;" mode=""></image>
					<image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3290312065,2512676871&fm=26&gp=0.jpg" v-if="key == 5" style="width: 100%;height: 160upx;" mode=""></image>
					<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1658812503,2306493526&fm=26&gp=0.jpg" v-if="key == 7" style="width: 100%;height: 160upx;" mode=""></image>
					<image v-if="key == 3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600767797445&di=df36e84cab77e7fed8933f7f4c3c2cdb&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180510%2Fe275f6ffa1f54fcfac1585a6493f6a7e.jpeg" style="width: 100%;height: 160upx;" 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: 27, //循环滚动的次数
				speed: 1, //转动速度
				ind:7,
				count:18
			}
		},
		props:{
			goodsList:{
				type: Array,
				default: false
			},
			opendraw:{
				type: Number,
				default: 0
			},
			parameterid:{
				type: String,
				default: ''
			}
		},
		watch:{
			opendraw(newPage,oldPage){
				this.lotteryBtn();
			}
		},
		mounted() {
			let _this = this;
			   // uni.$on('opendraw',function(data){
				  //  console.log(111111)
			   //      _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) - 1 // 随机产生一个中奖号码
						// _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)
				});
				// console.log('点击');
				// this.ind = parseInt(Math.random() * 8, 0) || 0; // 随机产生一个中奖号码
				// this.startRoll();
				
			},
			roll: function() {
				let index = this.index;
				let count = this.goodsList.length; //总长度
				index += 1;
				if (index > count - 1) {
					index = 0
				}
				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 + 1)
					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 += 30;
					}
					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.28;
			height: 200upx;
			min-width: 28%;
			// height: 50upx;
		}
		.active {
			// flex:0 0 28%;
			/* border: 3upx solid #F82400; */
			background-color: #FFEF94;
			text-align: center;
			padding: 10upx;
			margin-bottom: 12upx;
			border-radius: 10upx;
			flex: 0.28;
			// height: 200upx;
			min-width: 28%;
			margin-right: 10upx;
			width: 180upx;
			height: 180upx;
			overflow: hidden;
		}
		.noactive{
			// flex:0 0 28%;
			padding: 10upx;
			text-align: center;
			background-color: #FFFFFF;
			margin-bottom: 12upx;
			margin-right: 10upx;
			border-radius: 10upx;
			width: 180upx;
			height: 180upx;
			overflow: hidden;
			flex: 0.28;
			// height: 200upx;
			min-width: 28%;
		}
	}
	.fleximg:after {
		content: "";
		flex: 0.28;
		min-width: 28%;
	}
	.lotteryBox{
		padding-bottom: 5upx;
	}
	.lotteryBtn{
		position: absolute;
	}
	.itemImg {
		width: 120upx;
		height: 120upx;
		/* width: 30%; */
	}

	
</style>
