<template>
	<view class="content">

		<!--index.wxml-->
		<view class="container">
			<view class='drawtop flexone'>
				<view class="drawtopleft" :class="tab==1?'drawtopleftactivek':''" @click="tabchange" :data-id="1">九宫格抽奖</view>
				<view class="drawtopleft" :class="tab==2?'drawtopleftactivel':''" @click="tabchange" :data-id="2">幸运砸金蛋</view>
			</view>
			<view class="drawcontent">
				<view class='titledraw'>欢乐大抽奖</view>
				<view class='textdraw'>活动文案活动文案活动文案</view>
			</view>
			<!-- 活动规则 -->
			<view class='activityrule'>
				<view class="ruletitle" @click="rule">
					活动规则
				</view>
				
				</view>
			<!-- 停止位置:<input :value='luckPosition' style="width:100%;text-align:center" @input='input' type='number'></input> -->
			<!-- 抽奖 -->
			<view class='frame_view' v-if="tab==1">
				<view class='frame_row'>
					<view class='frame_item frame_item0' :style='{"opacity":color[0].opa}'>

						<view class="img">
							<image :src="color[0].image" mode=""></image>
						</view>
						<view class="title">
							{{color[0].name}}
						</view>
					</view>
					<view class='frame_item frame_item1' :style='{"opacity":color[1].opa}'>

						<view class="img">
							<image :src="color[1].image" mode=""></image>
						</view>
						<view class="title">
							{{color[1].name}}
						</view>
					</view>
					<view class='frame_item frame_item2' :style='{"opacity":color[2].opa}'>

						<view class="img">
							<image :src="color[2].image" mode=""></image>
						</view>
						<view class="title">
							{{color[2].name}}
						</view>
					</view>
				</view>

				<view class='frame_row'>
					<view class='frame_item frame_item7' :style='{"opacity":color[7].opa}'>

						<view class="img">
							<image :src="color[7].image" mode=""></image>
						</view>
						<view class="title">
							{{color[7].name}}
						</view>
					</view>
					<view class=' chou' @click="clickLucks()">
						<view class="right">立即</view>
						<view class="right rightchou">抽奖</view>
					</view>
					<!-- <image class='frame_item' :src='btnconfirm' @click="clickLucks()"></image> -->
					<view class='frame_item frame_item3' :style='{"opacity":color[3].opa}'>

						<view class="img">
							<image :src="color[3].image" mode=""></image>
						</view>
						<view class="title">
							{{color[3].name}}
						</view>
					</view>
				</view>

				<view class='frame_row'>
					<view class='frame_item frame_item6' :style='{"opacity":color[6].opa}'>

						<view class="img">
							<image :src="color[6].image" mode=""></image>
						</view>
						<view class="title">
							{{color[6].name}}
						</view>
					</view>
					<view class='frame_item frame_item5' :style='{"opacity":color[5].opa}'>

						<view class="img">
							<image :src="color[5].image" mode=""></image>
						</view>
						<view class="title">
							{{color[5].name}}
						</view>
					</view>
					<view class='frame_item frame_item4' :style='{"opacity":color[4].opa}'>

						<view class="img">
							<image :src="color[4].image" mode=""></image>
						</view>
						<view class="title">
							{{color[4].name}}
						</view>
					</view>
				</view>
			</view>
			<!-- 砸金蛋 -->
			<view class="eggcontent" v-if="tab==2">
				<view class='egglist flexone'>
					<view class="eggimg" v-for="(item,index) in color" :key="index" @click="zadan(item,index)">
						<image src="../../static/bandan.png" mode="" v-if="item.chose==true"></image>
						<image src="../../static/zhengdan.png" mode="" v-else></image>
					</view>
					<!-- <view class="eggimg">
						<image src="../../static/zhengdan.png" mode=""></image>
					</view>
					<view class="eggimg">
						<image src="../../static/zhengdan.png" mode=""></image>
					</view>
					<view class="eggimg">
						<image src="../../static/zhengdan.png" mode=""></image>
					</view>
					<view class="eggimg">
						<image src="../../static/zhengdan.png" mode=""></image>
					</view>
					<view class="eggimg">
						<image src="../../static/zhengdan.png" mode=""></image>
					</view>
					<view class="eggimg">
						<image src="../../static/zhengdan.png" mode=""></image>
					</view>
					<view class="eggimg">
						<image src="../../static/zhengdan.png" mode=""></image>
					</view> -->
				</view>
				<view class="everytime">每次砸金蛋将消耗5积分</view>
			</view>
		
		</view>
		
		<view class='bottom flexthree'>
			<view class="bottomleftk" @click="backhomepage">返回首页</view>
			<view class="bottomleftl" @click="mygift">我的奖品</view>
		</view>
		<!-- 中奖遮罩层 -->
		<view class="register" v-if="giftshow">
			<view class="drawrap">
				<view class="zhongjiang">恭喜中奖</view>
				<view class="gifimg">
					<image src="../../static/imggift.png" mode=""></image>
				</view>
				<view class="giftname">{{text}}</view>
				<view class="containue"  @click="clickLucks()">继续抽奖</view>
			</view>
			<view class="chahao" @click="hidegift">
				<image src="../../static/chahao.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	//计数器
	var interval = null;
	//值越大旋转时间越长  即旋转速度
	var intime = 50;
	export default {
		data() {
			return {
				color: [{
						opa: 0.5,
						name: "积分"
					},
					{
						opa: 0.5,
						name: "零食大礼包"
					},
					{
						opa: 0.5,
						name: "大礼包"
					},
					{
						opa: 0.5,
						name: "大礼包"
					},
					{
						opa: 0.5,
						name: "大礼包"
					},
					{
						opa: 0.5,
						name: "大礼包"
					},
					{
						opa: 0.5,
						name: "大礼包"
					},
					{
						opa: 0.5,
						name: "大礼包"
					},
					
				],
				tab:1,
				images: ['../../static/jichange.png', '../../static/add.png', '../../static/add.png', '../../static/add.png',
					'../../static/add.png', '../../static/add.png', '../../static/add.png', '../../static/add.png',
					'../../static/doorin.png'
				],
				btnconfirm: '../../static/dianjichoujiangd.png',
				clickLuck: 'clickLuck',
				luckPosition: 0,
				giftshow:false,
				text:''
			}
		},
		
		
		methods: {
			// 头部切换
			tabchange(e){
				this.tab=e.currentTarget.dataset.id;
				this.getdrawlist()
			},
			hidegift(){
				
				this.giftshow=false
			},
			input: function(e) {
				var data = Number(e.detail.value);
				this.luckPosition = data;
			},
			// 活动规则
			rule(){
				uni.navigateTo({
					url:'/pages/homepage/choujiangrule'
				})
			},
			mygift(){
				uni.navigateTo({
					url:'/pages/homepage/mygift'
				})
			},
			// 回到首页
			backhomepage(){
				uni.switchTab({
					url:'/pages/homepage/homepage'
				})
			},
			// 获取抽奖列表
			getdrawlist(){
				let that = this;
				var url = 'gift/get_gift';
				console.log('获取的参数', that.seldata)
				var params = {
					extract_model_id:that.tab
				}
				console.log(params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					
					let gift=res.data.data;
			
						gift.forEach(function(value,index,array){
							value.opa=0.5;
							value.chose=false
						})
						that.color=gift;
					
					
					
					// that.goodinfo=res.data.data;
					
				
				}).catch((err) => {
				})
			},
			// 砸蛋
			zadan(item,index){
				let that = this;
				item.chose=true;
				    var url = 'gift/extract';
				    var params = {
				     extract_model_id:that.tab
				    }
					console.log('123456',item.name)
				    app.post(url, params).then((res) => {
				      console.log(res);
					  uni.showToast({
					  	title:'恭喜砸中'+item.name,
						icon:'none'
					  })
					 //  uni.showToast({
					 //  	title:'恭喜砸中'+item.name,
						// icon:none
					 //  })
				    }).catch((err) => {
				
				    })	
			},
			//点击抽奖按钮
			clickLucks: function() {
				
				if (this.clickLuck == 'clickLuck') {
					var e = this;
					e.giftshow=false
					//判断中奖位置格式
					if (e.luckPosition == null || isNaN(e.luckPosition) || e.luckPosition > 7) {
						uni.showModal({
							title: '提示',
							content: '请填写正确数值',
							showCancel: false,
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						return;
					}

					//设置按钮不可点击
					e.btnconfirm = '../../static/sherpa-jiugonggedianjichoujiangd.png';
					e.clickLuck = '';

					//清空计时器
					clearInterval(interval);
					var index = 0;
					//循环设置每一项的透明度
					interval = setInterval(function() {
						if (index > 7) {
							index = 0;
							e.color[7].opa = 0.5
						} else if (index != 0) {
							e.color[index - 1].opa = 0.5
						}
						e.color[index].opa = 1;
						index++;
					}, intime);
					//模拟网络请求时间  设为两秒
					var stoptime = 2000;
					setTimeout(function() {
						e.stop(e.luckPosition);
					}, stoptime)
				}
			},
			stop: function(which) {
				var e = this;
				//清空计数器
				clearInterval(interval);
				//初始化当前位置
				var current = -1;
				var color = e.color;
				for (var i = 0; i < color.length; i++) {
					if (color[i].opa == 1) {
						current = i;
					}
				}
				//下标从1开始
				var index = current + 1;
				e.stopLuck(which, index, intime, 10);
			},
			stopLuck: function(which, index, time, splittime) {
				var e = this;
				//值越大出现中奖结果后减速时间越长
				setTimeout(function() {
					//重置前一个位置
					if (index > 7) {
						index = 0;
						e.color[7].opa = 0.5
					} else if (index != 0) {
						e.color[index - 1].opa = 0.5
					}
					//当前位置为选中状态
					e.color[index].opa = 1;
					//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
					//直到旋转至中奖位置
					if (time < 400 || index != which) {
						//越来越慢
						splittime++;
						time += splittime;
						//当前位置+1
						index++;
						e.stopLuck(which, index, time, splittime);
					} else {
						//1秒后显示弹窗
						setTimeout(function() {
							if (which == 0) {
								e.text= e.color[which].name
								console.log( e.color[which].name)
								e.giftshow=true;
								e.clickLuck = 'clickLuck';
								//中奖
								// uni.showModal({
								// 	content: '恭喜获得：' + e.color[which].name,
								// 	showCancel: false,
								// 	confirmColor: "#F8C219",
								// 	success: res => {
								// 		if (res.confirm) {
								// 			//设置按钮可以点击
								// 			e.btnconfirm = '../../static/sherpa-jiugonggedianjichoujiang.png';
								// 			e.clickLuck = 'clickLuck';
								// 			e.loadAnimation();
								// 		}
								// 	},
								// 	fail: () => {},
								// 	complete: () => {}
								// });
							} else {
								//未中奖
								uni.showModal({
									content: '很遗憾未中奖',
									showCancel: false,
									confirmColor: "#F8C219",
									success: res => {
										if (res.confirm) {
											//设置按钮可以点击
											e.btnconfirm = '../../static/sherpa-jiugonggedianjichoujiang.png';
											e.clickLuck = 'clickLuck';
											e.loadAnimation();
										}
									},
									fail: () => {},
									complete: () => {}
								});
							}
						}, 1000);
					}
				}, time);
			},
			loadAnimation: function() {
				var e = this;
				var index = 0;
				if (interval == null) {
					interval = setInterval(function() {
						if (index > 7) {
							index = 0;
							e.color[7].opa = 0.5
						} else if (index != 0) {
							e.color[index - 1].opa = 0.5
						}
						e.color[index].opa = 1;
						index++;
					}, 1000);
				}
			}
		},
		onLoad() {
			uni.hideLoading()
			this.loadAnimation();
			console.log(333434)
			this.getdrawlist()
		}
	}
</script>

<style>
	/**index.wxss**/
	page {
		width: 750rpx;
		height: 100%;
	}
	/* 中奖遮罩层 */
	.drawrap{
		width:522rpx;
		height:624rpx;
		background:rgba(255,255,255,1);
		border-radius:24rpx;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.zhongjiang{
		color:#FF9417;
		font-size:48rpx;
		text-align: center;
		margin-top:44rpx;
	}
	.gifimg{
		width:374rpx;
		height:248rpx;
		font-size: 0;
		margin:34rpx auto 0;
	}
	.giftname{
		color:#3D454C;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top:20rpx;
	}
	.chahao{
		width:63rpx;
		height:63rpx;
		font-size: 0;
		position: absolute;
		top:82%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.containue{
		width:442rpx;
		height:88rpx;
		background:rgba(255,148,23,1);
		border-radius:16rpx;
		color:#fff;
		font-size: 28rpx;
		color:#fff;
		text-align: center;
		line-height: 88rpx;
		margin:38rpx auto 0;
	}
		
	.egglist{
		flex-wrap: wrap;
		padding: 0 2rpx 0 52rpx;
		box-sizing: border-box;
		margin-top:100rpx;
	}
	.eggimg{
		width:140rpx;
		height:196rpx;
		font-size: 0;
		margin-right:30rpx;
	}
	.everytime{
		width:440rpx;
		height:72rpx;
		background:rgba(249,249,249,1);
		border-radius:36rpx;
		color:#FF9417;
		font-size: 32rpx;
		text-align: center;
		line-height: 72rpx;
		margin:80rpx auto  0;
	}
	.activityrule{
		width:72rpx;
		height:160rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx 0rpx 0rpx 16rpx;
		position: absolute;
		right:0;
		top:112rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ruletitle{
		width:26rpx;
		color:#C29445;
		font-size: 28rpx;
	}	
	.titledraw{
		color:#FFFFFF;
		font-size:96rpx;
		text-align: center;
		margin-top:48rpx;
		
		
	}
	.textdraw{
		color:#FFFFFF;
		font-size: 46rpx;
		text-align: center;
		margin-top:10rpx;
	}
	.drawtopleft{
		width:375rpx;
		height:100rpx;
		color:#FFFFFF;
		font-size: 36rpx;
		text-align: center;
		line-height: 100rpx;
		
	}
	.drawtopleftactivek{
		background: #FFCE96;
		color:#FF9417;
		border-radius:4rpx 4rpx 16rpx 4rpx;
	}
	.drawtopleftactivel{
		background: #FFCE96;
		color:#FF9417;
		border-radius:4rpx 4rpx 4rpx 16rpx;
	}

	.content {
		width: 750rpx;
		height: 100%;
	}

	.container {
		/* position: fixed; */
		width: 100%;
		height: 100%;
		background: url(../../static/drawimg.png) no-repeat center;
		background-size: 100% 100%;
	}

	.bottom {
		width: 750rpx;
		height: 116rpx;
		background: #fff;
		
	}
	.bottomleftk{
		width:328rpx;
		height:88rpx;
		border-radius:16rpx;
		border:1px solid rgba(255,148,23,1);
		color:#FF9417;
		font-size: 28rpx;
		text-align: center;
		line-height: 88rpx;
		margin-right:30rpx;
	}
	.bottomleftl{
		width:328rpx;
		height:88rpx;
		background:rgba(255,148,23,1);
		border-radius:16rpx;
		color:#fff;
		font-size:28rpx;
		text-align: center;
		line-height: 88rpx;
	}

	.frame_view {
		position: absolute;
		top: 65%;
		margin-top: -315upx;
		left: 50%;
		margin-left: -315upx;
		width: 590upx;
		height: 590upx;
		padding: 20upx;
		background: #F05054;
		z-index: 3;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		border-radius: 30upx;
	}

	.frame_row {
		width: 580upx;
		height: 180upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.frame_item {
		width: 180upx;
		height: 180upx;
		z-index: 9;
		background: #fff;
		;
	}

	.frame_item0 {
		/* background: url("../../static/sherpa-jiugonggeitem.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item1 {
		/* background: url("../../static/sherpa-jiugonggeitem1.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item2 {
		/* background: url("../../static/sherpa-jiugonggeitem.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item3 {
		/* background: url("../../static/sherpa-jiugonggeitem1.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item4 {
		/* background: url("../../static/sherpa-jiugonggeitem.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item5 {
		/* background: url("../../static/sherpa-jiugonggeitem1.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item6 {
		/* background: url("../../static/sherpa-jiugonggeitem.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item7 {
		/* background: url("../../static/sherpa-jiugonggeitem1.png")no-repeat center; */
		background-size: 100% 100%;
	}

	.frame_item>view {
		display: block;
		width: 100%;
		font-size: 30upx;
		color: #fff;
		z-index: 99;
		text-align: center;
	}

	.frame_item>view.img {
		width: 96upx;
		height: 96upx;
		/* line-height: 30upx; */
		margin: 20rpx auto 0;
		/* margin-top: 20upx; */
	}

	.frame_item>view.title {
		line-height: 30upx;
		margin-top: 16upx;
		color: #C29445;
		font-size: 32rpx;
	}

	.chou {
		color: #FFFFFF;
		font-size: 42rpx !important;
		background: #FFD313 !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 180upx;
		height: 180upx;
		z-index: 9;
	}

	.right {
		letter-spacing: 10rpx;
	}

	.rightchou {
		margin-top: 10rpx;
	}
</style>