<template>
	<view class="LuckyWheel">
		<LuckyWheel ref="myLucky" v-if="showLuckyWheel" width="640rpx" height="640rpx" :blocks="blocks" :prizes="prizes"
			:buttons="buttons" :default-config="defaultConfig" @start="startCallBack" @end="endCallBack">
		</LuckyWheel>
	</view>
</template>

<script>
	import LuckyWheel from '../uni-luck-draw/lucky-wheel.vue'; // 大转盘
	export default {
		components: {
			LuckyWheel
		},
		props: {
			prizes1: {
				default: () => []
			},
			drawId: {
				default: undefined
			}
		},
		watch: {
			drawId: {
				immediate: true,
				handler: function(newV) {
					this.draw_id = newV
				}
			}
		},
		name: 'luckyWheel',
		data() {
			return {
				draw_id: '',
				showLuckyWheel: false,
				xie: '谢谢参与',
				defaultConfig: {
					accelerationTime: 1000,
					decelerationTime: 2000,
					speed: 30
				},
				blocks: [{
					padding: '22px',
					imgs: [{
						src: this.$util.img('upload/weapp/user/lottery_disk.png'),
						width: '640rpx',
						height: '640rpx',
						top: '2rpx',
						rotate: false
					}]
				}],
				prizes: [],
				buttons: [{
						radius: '50px'
					},
					{
						radius: '45px'
					},
					{
						imgs: [{
							src: this.$util.img('upload/weapp/user/lottery_disk_center.png'),
							width: '212rpx',
							height: '238rpx',
							top: '-130rpx'
						}]
					}
				]
			};
		},

		created() {
			// 获取抽奖活动奖品列表
			this.getDrawGoodsList();
		},
		methods: {
			// 点击抽奖按钮触发回调
			startCallBack() {
				//剩余可抽奖次数
				this.$api.sendRequest({
					url: '/api/draw/checkdrawnum',
					data: {
						draw_id: Number(this.draw_id)
					},
					success: ({ data }) => {
						if (data.cam_draw_num > 0) {
							this.doDraw();
							// 先开始旋转

						} else {
							this.$util.showToast({
								title: '抽奖次数不足'
							});
						}
					}
				});
			},
			//抽奖
			doDraw() {
				this.$api.sendRequest({
					url: '/api/draw/doDraw',
					data: {
						draw_id: Number(this.draw_id)
					},
					success: res => {
						setTimeout(() => {
							this.$refs.myLucky.stop(this.prizes.findIndex(v => v.item.id == res.data
								.id));
						}, 3000)
						this.$refs.myLucky.play();
					},
					fail: res => {
						this.$refs.myLucky.init();
					}
				});
			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				this.$emit('endCallBack', prize.item);
			},
			// 获取抽奖活动奖品列表
			getDrawGoodsList() {
				this.$api.sendRequest({
					url: '/api/draw/getDrawGoodsList',
					data: {
						draw_id: Number(this.draw_id)
					},
					success: ({ data }) => {
						console.log(data, "this.prizesthis.prizes");
						// if (data.length < 8) {
						// 	this.prizes.push({
						// 		fonts: [{
						// 			text: '谢谢参与',
						// 			fontColor: '#aaa',
						// 			fontSize: '16px',
						// 			fontWeight: 600,
						// 			lineClamp: 1,
						// 			top: '16rpx'
						// 		}],
						// 		id: 0,
						// 		type: 0,
						// 		background: '#f4f4f4',
						// 		imgs: [{
						// 			src: this.$util.img('upload/weapp/user/thanks.png'),
						// 			width: '90rpx',
						// 			height: '90rpx',
						// 			top: '62rpx',
						// 			title: '谢谢参与'
						// 		}],
						// 		item: {
						// 			image: 'upload/weapp/user/thanks.png',
						// 			id: 0,
						// 			type: 0,
						// 			text: '谢谢参与',
						// 		}
						// 	});
						// }
						data.map((v, i) => {
							this.prizes.push({
								background: i % 2 == 0 ? '#ffc692' : '#ffedde',
								fonts: [{
									text: v.title,
									fontColor: '#EB1617',
									fontSize: '16px',
									fontWeight: 600,
									lineClamp: 1,
									top: '16rpx'
								}],
								imgs: [{
									src: this.$util.img(v.image),
									width: '90rpx',
									height: '90rpx',
									top: '62rpx',
									title: v.title
								}],
								item: v
							});
						});
						this.showLuckyWheel = true;
					}
				});
			}
		}
	};
</script>

<script module="lucky" lang="renderjs">
	export default {
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style lang="scss"></style>