<template>
	<view>
		<view class="container">
			<view class="tui-dot" :class="['tui-dot-'+(index+1)]" v-for="(item,index) in circleList" :key="index"></view>
			<view class="tui-container-in">
				<view class="tui-content-out" :class="['tui-award-'+(index+1),index==indexSelect?'tui-awardSelect':'']" v-for="(item,index) in awardList"
				 :key="index">
					<image v-if="item.img" class="tui-award-image" :src="item.img"></image>
					<text class="tui-award-text">{{item.name}}</text>
				</view>
				<view class="tui-btn-start" :class="[isRunning?'tui-ative':'']" @tap="startDrawing">立即抽奖</view>
			</view>
		</view>
		
		<view class="cishu">
			<ad unit-id="adunit-32d9f5191a24a83a"></ad>
			<view class="head">
				<view class="num">我的抽奖机会：{{choice}}次</view>
				<view @tap="showModal" class="more">更多次数</view>
			</view>
			<view class="tit">抽奖规则</view>
			<view class="text-item" v-for="(item,index) in dayList" :key="index">
				{{(index+1)}}.{{item}}
			</view>
		</view>
		
		<view class="show-wrap" v-if="isShow">
			<view class="show-model">
				<view class="title">未登录</view>
				<view class="content">请允许微信授权登录</view>
				<view class="btn-group">
					<button @tap="hideIsLogin" class="button-default">取消</button>
					<button class="button-default button-blue getUserInfo" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">确认</button>
				</view>
			</view>
			<view class="show-model-mask">
			</view>
		</view>
		<view class="show-wrap" v-if="isLogin">
			<view class="show-model">
				<view class="title">更多抽奖次数</view>
				<view class="content">
					<view class="text-item" v-for="(item,index) in dayList" :key="index">
						{{(index+1)}}.{{item}}
					</view>
				</view>
				<view class="btn-group">
					<button @tap.stop="close" class="button-default">取消</button>
					<button open-type="share" class="button-default button-blue">确认</button>
				</view>
			</view>
			<view class="show-model-mask" @tap.stop="close">
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
	export default {
		data() {
			return {
				circleList: 24, //圆点
				awardList: [{
					img: "",
					name: "谢谢参与",
					num:0
				}, {
					img: "/static/supprt/xin.png",
					name: "5票",
					num:5
				}, {
					img: "/static/supprt/xin.png",
					name: "10票",
					num:10
				}, {
					img: "/static/supprt/xin.png",
					name: "20票",
					num:20
				}, {
					img: "/static/supprt/xin.png",
					name: "50票",
					num:50
				}, {
					img: "/static/supprt/xin.png",
					name: "66票",
					num:66
				}, {
					img: "/static/supprt/xin.png",
					name: "100票",
					num:100
				}, {
					img: "/static/supprt/xin.png",
					name: "188票",
					num:188
					}], //奖品数组
				indexSelect: 0, //被选中的奖品index
				isRunning: false ,//是否正在抽奖
				dayList:['普通用户每日可有2次抽奖机会','每日零点刷新抽奖机会数量','抽奖次数不累计','每天可邀请4位好友助力，助力成功一次可增加一次抽奖机会'],
				isLogin:false,
				choice:0,
				isShow:false,
				id:''
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onLoad(option) {
			this.id = option.id;
			this.getUserInfo();
		},
		onShareAppMessage(){
			if(this.id){
				let userInfo = uni.getStorageSync('userInfo') || '';
				return {
					title:"助力抽奖",
					path:"/pages/support/support?cid="+userInfo.token+'&id='+this.id,
					imageUrl:"/static/nahan.jpg"
				}
			}
		},
		methods: {
			getUserInfo(){
				if(this.hasLogin){
					this.request({
						url:this.path+'/api/xyb/star/customerInfo',
						success:(res)=>{
							let d = res.data;
							this.choice = d.data.chouNum;
							console.log(d)
						}
					})
				}else{
					this.showIsShow();
				}
			},
			wxGetUserInfo(){
				//api/xyb/wechat/wxLogin
				let that = this;
				uni.login({
					provider: 'weixin',
					success: loginRes => {//获取用户code
						// if(!that.hasLogin){
							//授权获取用户信息
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									that.request({
										url: that.path + '/api/xyb/wechat/wxLogin',
										data: {
											code: loginRes.code,
											sex:infoRes.userInfo.gender,
											head:infoRes.userInfo.avatarUrl,
											nick:infoRes.userInfo.nickName,
										},
										success: function(res) {
											let d = res.data;
											infoRes.userInfo.token = d.data.openid;
											that.login(infoRes.userInfo)
											that.hideIsShow();
										}
									});
									
								}
							});
							
						// }
					}
				});
			},
			hideIsShow(){
				this.isShow = false;
			},
			showIsShow(){
				this.isShow = true;
			},
			showModal(){
				this.isLogin = true;
			},
			close(){
				this.isLogin = false;
			},
			//获取随机数
			getRandom: function(u) {
				let rnd = Math.random() > 0.5 ? "2" : "1";
				u = u || 3;
				for (var i = 0; i < u; i++) {
					rnd += Math.floor(Math.random() * 10);
				}
				return Number(rnd);
			},
			addPiao(num){
				this.request({
					url:this.path+'/api/xyb/star/getMuch',
					data:{
						typeId:1,
						much:num
					},
					success:(res)=>{
						let d = res.data;
						console.log(d)
						this.custChoice();
					}
				})
			},
			custChoice(){
				this.request({
					url:this.path+'/api/xyb/star/customerInfoUpdate',
					data:{
						type:0
					},
					success:(res)=>{
						let d = res.data;
						console.log("抽奖次数减一")
						this.getUserInfo();
					}
				})
			},
			//开始抽奖
			startDrawing: function() {
				if(this.choice>0){
					if (this.isRunning) return
					this.isRunning = true;
					let indexSelect = 0;
					let i = 0;
					let randomNum = this.getRandom(3);
					let timer = setInterval(() => {
						++indexSelect;
						//这里用y=30*x+150函数做的处理.可根据自己的需求改变转盘速度
						indexSelect = indexSelect % 8;
						this.indexSelect = indexSelect;
						i += 40;
						if (i > randomNum) {
							//去除循环
							clearInterval(timer)
							timer = null;
							//获奖提示
							uni.showModal({
								title: '恭喜您',
								content: '获得了【' + this.awardList[indexSelect].name + '】',
								confirmColor: '#5677FC',
								showCancel: false, //去掉取消按钮
								success: (res) => {
									if (res.confirm) {
										this.isRunning = false
									}
								},
								complete: () => {
									let num = this.awardList[indexSelect].num;
									this.addPiao(num)
								}
							})
						}
					}, (70 + i))
				}else{
					uni.showToast({
						title:'抽奖次数不足',
						icon:'none'
					})
					return;
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		width: 100vw;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 50px);
		/* #endif */
		overflow: hidden;
		box-sizing: border-box;
		background-color: #FCC8D0;
	}
	.show-wrap{
		border-radius: 10rpx;
		.show-model-mask{
			width: 100vw;
			height: 100vh;
			z-index: 10;
			background-color: rgba(0,0,0,0.3);
			position: fixed;
			top: 0;
			left: 0;
		}
		.show-model{
			z-index: 11;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 80vw;
			height: auto;
			margin: -40vw;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.title{
				background-color: #4A67D6;
				color: #FFFFFF;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
			.content{
				background-color: #FFFFFF;
				font-size: 26rpx;
				padding: 15rpx 15rpx 25rpx;
				box-sizing: border-box;
				text-align: center;
				.text-item{
					margin-top: 10rpx;
					text-align: left;
					color: rgba(0,0,0,0.8);
					
				}
			}
			.btn-group{
				display: flex;
				align-items: center;
				text-align: center;
				box-shadow: 0 -4rpx 4rpx #F2F2F2;
				padding: 0 30rpx;
				.button-blue{
					color: #4A67D6;
				}
				.button-default{
					background-color: #FFFFFF;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					padding: 0 30rpx;
					font-size: 28rpx;
					flex: 1;
				}
				button{
					width: auto;
					height: auto;
					border: none;
					padding: 0;
					margin: 0;
					border-radius: 0;
					line-height: inherit;
					background-color: #FFFFFF;
					display: inline-block;
				}
				button::after{display: none;}
				button + button{
					border-left: 1px solid #F2F2F2;
				}
			}
		}
	}
	.text-item{
		margin-top: 15rpx;
		font-size: 28rpx;
	}
	.head{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tit{
		font-size: 30rpx;
		font-weight: 700;
		text-align: center;
		display: flex;
		color: #FE99CE;
		justify-content: center;
		margin: 15rpx auto;
	}
	.cishu{
		width: 560rpx;
		height: auto;
		background-color: #FFFAEF;
		padding: 30rpx;
		margin: 10rpx auto 0;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		ad{margin-bottom: 20rpx;}
	}
	.num{
		background-color: #FCC8D0;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		flex: 4;
	}
	.more{
		background-color: #DD524D;
		color: #FFFAEF;
		font-size: 28rpx;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		flex: 2;
		margin-left: 30rpx;
		text-align: center;
	}
	.container {
		height: 600rpx;
		width: 650rpx;
		background-color: #fc4034;
	/* 	margin: auto; */
		border-radius: 40rpx;
		box-shadow: 0 10px 0 #d80014;
		position: relative;
		margin: 100rpx auto 0;
	}

	.tui-container-in {
		width: 580rpx;
		height: 530rpx;
		background-color: #d80014;
		border-radius: 40rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	/**小圆点 start*/

	.tui-dot {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 20rpx;
		width: 20rpx;
	}

	.tui-dot:nth-child(odd) {
		background: #fff;
		animation: 0.5s odd linear infinite;
	}

	.tui-dot:nth-child(even) {
		background: #fcf400;
		animation: 0.5s even linear infinite;
	}

	.tui-dot-1 {
		left: 15rpx;
		top: 15rpx;
	}

	.tui-dot-2 {
		left: 117.5rpx;
		top: 7.5rpx;
	}

	.tui-dot-3 {
		left: 220rpx;
		top: 7.5rpx;
	}

	.tui-dot-4 {
		left: 322.5rpx;
		top: 7.5rpx;
	}

	.tui-dot-5 {
		left: 425rpx;
		top: 7.5rpx;
	}

	.tui-dot-6 {
		left: 527.5rpx;
		top: 7.5rpx;
	}

	.tui-dot-7 {
		left: 620rpx;
		top: 15rpx;
	}

	.tui-dot-8 {
		left: 622rpx;
		top: 109rpx;
	}

	.tui-dot-9 {
		left: 622rpx;
		top: 203rpx;
	}

	.tui-dot-10 {
		left: 622rpx;
		top: 297rpx;
	}

	.tui-dot-11 {
		left: 622rpx;
		top: 391rpx;
	}

	.tui-dot-12 {
		left: 622rpx;
		top: 485rpx;
	}

	.tui-dot-13 {
		left: 620rpx;
		top: 565rpx;
	}

	.tui-dot-14 {
		left: 517.5rpx;
		top: 572rpx;
	}

	.tui-dot-15 {
		left: 415rpx;
		top: 572rpx;
	}

	.tui-dot-16 {
		left: 312.5rpx;
		top: 572rpx;
	}

	.tui-dot-17 {
		left: 210rpx;
		top: 572rpx;
	}

	.tui-dot-18 {
		left: 107.5rpx;
		top: 572rpx;
	}

	.tui-dot-19 {
		left: 15rpx;
		top: 565rpx;
	}

	.tui-dot-20 {
		left: 7.5rpx;
		top: 471rpx;
	}

	.tui-dot-21 {
		left: 7.5rpx;
		top: 377rpx;
	}

	.tui-dot-22 {
		left: 7.5rpx;
		top: 283rpx;
	}

	.tui-dot-23 {
		left: 7.5rpx;
		top: 189rpx;
	}

	.tui-dot-24 {
		left: 7.5rpx;
		top: 95rpx;
	}

	@-webkit-keyframes odd {
		0% {
			background: #fff;
		}

		100% {
			background: #fcf400;
		}
	}

	@keyframes odd {
		0% {
			background: #fff;
		}

		100% {
			background: #fcf400;
		}
	}

	@-webkit-keyframes even {
		0% {
			background: #fcf400;
		}

		100% {
			background: #fff;
		}
	}

	@keyframes even {
		0% {
			background: #fcf400;
		}

		100% {
			background: #fff;
		}
	}

	/**小圆点 end*/

	.tui-content-out {
		position: absolute;
		height: 150rpx;
		width: 168rpx;
		background-color: #fcecec;
		border-radius: 15rpx;
		box-shadow: 0 4px 0 #fcc8d0;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		
	}

	/* 580 530  */

	.tui-award-1 {
		left: 24rpx;
		top: 24rpx;
	}

	.tui-award-2 {
		left: 206rpx;
		top: 24rpx;
	}

	.tui-award-3 {
		left: 388rpx;
		top: 24rpx;
	}

	.tui-award-4 {
		left: 388rpx;
		top: 188rpx;
	}

	.tui-award-5 {
		left: 388rpx;
		top: 352rpx;
	}

	.tui-award-6 {
		left: 206rpx;
		top: 352rpx;
	}

	.tui-award-7 {
		left: 24rpx;
		top: 352rpx;
	}

	.tui-award-8 {
		left: 24rpx;
		top: 188rpx;
	}

	/**居中 加粗*/

	.tui-btn-start {
		position: absolute;
		top: 188rpx;
		left: 206rpx;
		border-radius: 15rpx;
		height: 150rpx;
		width: 168rpx;
		background-color: #fc4034;
		box-shadow: 0 4px 0 #fcc8d0;
		color: #fcf400;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 150rpx;
	}

	.tui-ative {
		opacity: 0.6 !important;
	}

	.tui-award-image {
		/* position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0; */
		height: 60rpx;
		width: 60rpx;
	}
	
	.tui-award-text{
		font-size: 28rpx;
		color: #000;
	}
	
	.tui-awardSelect {
		background-color: #fcf400 !important;
		box-shadow: 0 4px 0 rgb(240, 208, 12) !important;
	}
</style>
