<template>
	<view class="container">
		<UniPopup ref="popup" type="center" @change="change">
			<raffle-wheel ref="raffle" class="raffle" :prizeList="foods" :ringCount="ringCount" strKey="name"
			 @actionEnd="actionEnd" @actionStart="actionStart"></raffle-wheel>	
		</UniPopup>
	</view>
</template>

<script>
	import {setPrize} from '@/common/api.js';
	import {callbackRequest,getStorage,alertTip} from '@/common/util.js';
	import RaffleWheel from '@/components/raffle-wheel/raffle-wheel.vue'
	import UniPopup from '@/components/uni-popup/uni-popup2.vue';
	export default {
		components: {
		   RaffleWheel,
		   UniPopup
		},
		data() {
			return {
				ringCount: 7.4,
				isPrize:false,
				foods:[],
				id: '',
				userId:getStorage('userInfo').id,
				grade:0
			}
		},
		onLoad(option){
			this.foods = JSON.parse(decodeURIComponent(option.foods));
			this.probability();
		},
		onReady() {
			this.$refs.popup.open();
		},
		methods: {
			actionStart:function(){
				if(this.isPrize){
					alertTip("你已抽奖");
					return;
				}
				this.$refs.raffle.handleStartRotate(1);
			},
			actionEnd:function(e){
				this.isPrize = true;
				if(!this.id){
					alertTip("很遗憾，您没有中奖！");
				}else{
					alertTip("恭喜您，您中了" + this.grade + "等奖!");
				}
				let params = {
					"method":setPrize,
					data:{
						featureId:this.id,
						userId:this.userId
					}
				}
				callbackRequest(params)
				.then(res => {
					if(res.data.returnCode == 0){
						this.isPrize = false;
						alertTip("抽奖失败，请重新抽取！");
						return;
					}
				})
			},
			change: function(e){
				if(!e.show){
					uni.navigateBack({
					    delta: 1
					});
				}
			},
			probability: function(){
				var p = this.random();
				var prizeNo = Math.floor(p/10);
				this.id = food[prizeNo].id;
				this.id ? (this.grade = prizeNo) : (this.grade = 0);
				
				var ring = this.random()/1000;
				this.ringCount = 7.4 - 0.3 - 0.05 + ring;
			},
			random: function(){
				return Math.floor(Math.random() * 100);
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.container{
		min-height:100vh;
		overflow:hidden;
		background: #f8f8f8;
		.raffle {
			width: 600rpx;
			height: 600rpx;
			// background: #00C564;
			// position: absolute;
			// margin-left: 78rpx;
			// margin-top: 300rpx;
			
		}
	}
</style>
