<template>
	<view class="content">
		<view class="t-bg" style="">
			<image class="t-wan" src="./luck/wenan.png"></image>
			<image class="t-wan-lp" src="./luck/hengfu.png"></image>
			<view class="t-choujiang t-flex-row">
				<l-dialer :prizeList="list" @click="onClick" @done="onDone" ref="dialer" />
			</view>
		</view>
		<!-- 规则部分 -->
		<view class="t-bottom">
			<view class="t-luck-wrapper">
				<view class="t-jh t-flex-row">
					剩余免费抽奖{{luckDrawTimes}}次
				</view>
				<!-- <view class="t-fuhuo-text t-flex-row">{{freeNumDay}}</view> -->
				<view class="t-fh-fs t-flex-row-sb">
					<view class="t-flex-row" @tap='goUrl("/pages/me/withdraw/index")' hover-class="t-click-class">红包
						&nbsp;{{totalMoney}}</view>
					<button open-type="share" @tap='goUrl("/pages/index/prizeDraw/LotteryRecords")'
						class="t-share t-flex-row t-plain-btn" hover-class="t-click-class">我的奖品</button>
				</view>
				<view class="t-line"></view>
				<view class="t-r-title t-flex-row">活动规则</view>
				<view class="t-rule">
					<text>1.抽奖细则：每日前{{ freeNumDay }}次付款均可获得抽奖机会</text>
					<text>2.奖励说明：红包奖励将自动发放到红包余额，已绑定银行卡账号将会自动发起提现。其余奖品则需联系客服领取。</text>
				</view>
			</view>
		</view>
		<!-- 抽奖结束弹窗 -->
		<kevy-mask :show="isShowAwd" @click="toConfirmAwd">
			<view class="t-full t-flex-row">
				<view class="t-tk-modal">
					<view class="t-tk-bg t-bg-full">
						<!-- 	<view v-if="drawIdx!=null && drawIdx == 0" class="t-xxcy t-flex-col-s">
							<image src="./luck/xiexiecanyu.png"></image>
							<view class="t-xxcy-ts t-flex-row">再努力努力肯定就会中哦~</view>
						</view> -->
						<view class="t-tk-zj t-flex-col-s">
							<image class="t-tk-zj-tip" src="./luck/wenzi.png"></image>
							<view class="t-tk-zj-desc t-flex-col">
								<image class="t-zj-jp" :src="selectData.img" mode="aspectFit"></image>
								<view class="t-zj-jp-desc">
									{{selectData.name}}&nbsp;&nbsp;{{selectData.number}}
								</view>
							</view>
						</view>
					</view>
					<view @click="toConfirmAwd" class="t-tk-btn t-bg-full">
						确定
					</view>
				</view>
			</view>
		</kevy-mask>
	</view>
</template>

<script>
	import {
		drawCount,
		selectUserMoney,
		selectDiscSpinning,
		discSpinningdraw
	} from '@/api/index/index.js';
	var animation = uni.createAnimation({
		duration: 4000,
		timingFunction: 'ease-out'
	});
	import kevyMask from './kevy-mask.vue';
	export default {
		components: {
			kevyMask,
		},
		data() {
			return {
				totalMoney: 0, //红包
				rotate: 0, //度数-抽奖动画
				turning: false, //转盘是否正在转
				luckDrawTimes: 0, //抽奖机会，5代表可以抽5次
				isShowAwd: false, //是否显示奖品弹框，抽奖后提示，要么中奖奖品，要么谢谢参与
				drawIdx: null, //抽到的奖品下标，用于指定中奖奖品并旋转转盘到对应奖品处。例如共5个奖品，下标3代表第4个奖品，下标从0开始
				// 每天免费抽奖次数
				freeNumDay: 0,
				list: [],
				selectData: "",
				source: 1
			}
		},
		onLoad(opt) {
			if (opt.source) {
				this.source = opt.source
			}
			this.getRedPack();
			this.getCount();
			this.getPrizeList();
		},
		methods: {
			goUrl(url) {
				uni.navigateTo({
					url
				})
			},
			onDone(index) {
				this.selectData.img = this.list[index].img
				this.isShowAwd = true
			},

			async onClick() {
				if (this.luckDrawTimes) {
					const res = await discSpinningdraw({
						source: this.source
					});
					let indexs = -1
					this.list.forEach((ele, index) => {
						if (ele.id == res.discSpinningId) {
							indexs = index
							this.selectData = res
						}
					})
					// 奖品的索引
					this.$refs.dialer.run(indexs)
				} else {
					uni.showToast({
						title: '暂无抽奖次数',
						icon:'none'
					})
				}
			},
			// 抽奖次数
			async getCount() {
				const res = await drawCount({
					source: this.source
				});
				this.luckDrawTimes = res.count || 0;
				this.freeNumDay = res.sum || 0;
			},
			// 红包
			async getRedPack() {
				const res = await selectUserMoney();
				this.totalMoney = res.amount;
			},
			// 获取奖品列表
			async getPrizeList() {
				const res = await selectDiscSpinning({
					source: this.source
				});
				res.records.forEach(res => {
					res.img = res.url
				})
				this.list = res.records
			},

			/**
			 * 确认奖品按钮点击事件
			 */
			toConfirmAwd() {
				//这里中奖信息关闭弹框
				this.isShowAwd = false;
				this.getRedPack();
				this.getCount();
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.t-bg {
		background-image: url('./luck/DZP_BJ.png');
		width: 100%;
		box-sizing: border-box;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		overflow-x: hidden;
		height: 1200rpx;
		padding-top: 345rpx;
		/* margin-top: 40rpx; */
	}

	.t-overlay {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		transition: all 0.5s;
	}

	.t-wan {
		position: absolute;
		width: 100%;
		height: 283rpx;
		top: 12rpx;
		left: 0;
		z-index: 1;
	}

	.t-wan-lp {
		position: absolute;
		width: 370rpx;
		height: 130rpx;
		top: 223rpx;
		z-index: 0;
		left: calc(50% - 185rpx);
	}

	.t-choujiang {
		width: 630rpx;
		height: 630rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 0rpx auto;
		position: relative;
		background-image: url('./luck/BJ.png')
	}

	.t-zp {
		width: 577rpx;
		height: 577rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		transform-origin: 0% 100%;
	}

	.t-start {
		width: 146rpx;
		height: 171rpx;
		position: absolute;
		z-index: 1;
	}

	.t-jh {
		width: 456rpx;
		height: 120rpx;
		margin: 0 auto;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		font-size: 40rpx;
		color: #980100;
		background-image: url('./luck/anniu.png')
	}

	.t-fuhuo-text {
		font-size: 30rpx;
		color: #980100;
		width: 100%;
		height: 42rpx;
		margin-top: 14rpx;
	}

	.t-fh-fs {
		width: 580rpx;
		height: 100rpx;
		margin: 20rpx auto 0rpx;
	}

	.t-fh-fs view {
		width: 250rpx;
		height: 100rpx;
		background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.t-share {
		width: 250rpx;
		height: 100rpx;
		background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.t-bottom {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		opacity: 0.99;
		background: #FDC469;
	}

	.t-luck-wrapper {
		position: relative;
		box-sizing: border-box;
		top: -219rpx;
	}

	.t-line {
		width: 580rpx;
		height: 1rpx;
		margin: 50rpx auto 0rpx;
		background: #980100;
	}

	.t-r-title {
		font-size: 28rpx;
		color: #980100;
		height: 40rpx;
		width: 100%;
		margin: 30rpx auto 0rpx;
		width: 585rpx;
	}

	.t-rule {
		margin: 10rpx auto 0rpx;
		width: 585rpx;
	}

	.t-rule text {
		font-size: 28rpx;
		color: #980100;
		text-align: justify;
		display: block;
	}

	.t-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
		top: 0rpx;
	}

	.t-video-con {
		width: 100%;
		height: 422rpx;
		background: #fff;
		position: relative;
	}

	.t-video {
		width: 100%;
		height: 100%;
	}

	.t-close {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		width: 34rpx;
		height: 34rpx;
		padding: 30rpx;
		z-index: 9999;
	}

	.t-nocice {
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		z-index: 999;
		width: 100%;
		height: 40rpx !important;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.t-tk-modal {
		width: 632rpx;
		height: 588rpx;
		position: relative;
		box-sizing: border-box;
	}

	.t-tk-bg {
		width: 100%;
		height: 528rpx;
		background-size: 100% 100%;
		background-image: url('./luck/tankuang.png')
	}

	.t-tk-btn {
		width: 336rpx;
		height: 120rpx;
		position: absolute;
		bottom: 0rpx;
		left: calc(50% - 168rpx);
		font-size: 40rpx;
		color: #980100;
		line-height: 120rpx;
		text-align: center;
		background-size: 100% 100%;
		background-image: url('./luck/xiaoanniu.png')
	}

	.t-flex-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.t-flex-row-sa {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.t-flex-row-sb {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.t-flex-row-s {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.t-flex-row-s-s {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.t-flex-row-s-e {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.t-flex-row-e {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		line-height: 60rpx;
	}

	.t-flex-col {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.t-flex-col-sa {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.t-flex-col-sb {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.t-flex-col-s {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.t-flex-col-s-s {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.t-flex-col-s-e {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.t-flex-col-e {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.t-xxcy image {
		width: 400rpx;
		height: 148rpx;
		margin-top: 139rpx;
	}

	.t-xxcy-ts {
		width: 510rpx;
		height: 100rpx;
		background: #FEF2CD;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #D93637;
		margin-top: 43rpx;
	}

	.t-tk-zj {}

	.t-tk-zj-tip {
		width: 347rpx;
		height: 106rpx;
		margin-top: 44rpx;
	}

	.t-tk-zj-desc {
		width: 474rpx;
		height: 281rpx;
		background: #FEF2CD;
		border-radius: 20rpx;
		margin-top: 2rpx;
	}

	.t-zj-jp {
		width: 264rpx;
		height: 157rpx;
	}

	.t-zj-jp-desc {
		font-size: 36rpx;
		color: #D93637;
		text-align: center;
		width: 420rpx;
	}

	.t-click-class {
		opacity: 0.7;
	}
</style>