<template>
	<view>
		<touch-popup ref="popup" background="linear-gradient(180deg, #F7FFC3 0%, #FFFFFF 100%)" :backShow="true">
			<scroll-view scroll-y>
				<view class="top">
					<view class="top-left">
						今日活动
					</view>
					<view v-if="userInfo" class="top-right">
						<view class="price-bck">
							<view class="logo-bck">
								<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix"></image>
							</view>
							{{userInfo.amount}}
						</view>
					</view>
				</view>
				<view class="top-icon">
					<!-- <image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo.png" mode="heightFix"></image> -->
				</view>
				<view class="hint">
					<view class="center">
						橡果大转盘
					</view>
					<view class="center">
						轻松解锁更多踪迹
					</view>
				</view>
				<view class="center">
					<view class="lottery">
						<view v-for="(item,index) in lotteryList" key="lottery" class="center">
							<view class="lottery-item" :class="{check: item.check}">
								<view class="">
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo-black.png" mode="widthFix"></image>
								</view>
								<view class="">
									{{item.amount}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="center" style="padding: 15px;">
					<view class="btn center" @click="startLottery">
						<text v-if="lotteryFree">{{!isLottery ? '免费抽奖' : '正在抽奖...'}}</text>
						<text v-else>{{!isLottery ? (lotteryPrice + '橡果抽一次') : '正在抽奖...'}}</text>
					</view>
				</view>
				<view class="bottom-terms">
					<view @click="openTerms1Popup">
						使用条款
					</view>
					<view @click="openTerms2Popup">
						隐私政策
					</view>
				</view>
			</scroll-view>
		</touch-popup>
		<touch-popup ref="terms1Popup" :backShow="true"
			background="linear-gradient(180deg, #FFFFFB -19.14%, #FFFEEB 50.07%)">
			<scroll-view scroll-y style="height: 100%;margin-top: 25px;">
				<view class="terms-text">
					这里是使用条款
				</view>
			</scroll-view>
		</touch-popup>
		<popup-agreement ref="pAgreementPrivate" :agreementMode="1"></popup-agreement>
	</view>
</template>
<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose
	} from 'vue'
	const popup = ref() // ref组件
	const terms1Popup = ref()
	const pAgreementPrivate = ref()

	const userInfo = ref(false)
	const lotteryList = ref(false) // 抽奖列表
	const lotteryPrice = ref(0) // 抽奖价格
	const lotteryFree = ref(false) // 是否免费抽奖

	// 抽奖开始闪烁
	const isLottery = ref(false) // 正在抽奖标识
	var interval = false
	const startLottery = () => {
		if (isLottery.value) return
		for (let i = 0; i < lotteryList.value.length; i++) {
			lotteryList.value[i].check = false
		}
		isLottery.value = true
		if (!lotteryFree.value) {
			userInfo.value.amount -= lotteryPrice.value
		}
		let i = 0,
			k = 30 // 执行30次时请求后台
		interval = setInterval(() => {
			if (k === 0) {
				golottery()
			}
			k--
			if (i - 1 >= 0) lotteryList.value[i - 1].check = false // 上一个熄灭
			if ((i + 1) > lotteryList.value.length) i = 0 // 到底重置
			lotteryList.value[i++].check = true
		}, 100)
	}
	const golottery = () => {
		uni.request({
			url: app.globalData.requestUrl + '/api/lottery/go',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			method: 'POST',
			success(res) {
				if (res.data.code === 200) {
					uni.request({
						url: app.globalData.requestUrl + '/api/user',
						header: {
							'Authorization': 'Bearer ' + app.globalData.token
						},
						success: (resuser) => {
							app.globalData.userinfo = resuser.data.data
							userInfo.value = resuser.data.data

						}
					}) // 重新请求余额
					for (let i = 0; i < lotteryList.value.length; i++) {
						let item = lotteryList.value[i]
						if (res.data.data.id === item.id) {
							lotteryList.value[i].check = true
						} else {
							lotteryList.value[i].check = false
						}
					}
					isLottery.value = false
					lotteryFree.value = false
					uni.showToast({
						title: '抽奖完成，奖励' + res.data.data.amount,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			fail() {
				uni.showToast({
					title: '抽奖失败',
					icon: 'none'
				})
			},
			complete() {
				clearInterval(interval)
			}
		})
	}
	const openTerms1Popup = () => {
		terms1Popup.value.open()
	}
	const openTerms2Popup = () => {
		pAgreementPrivate.value.open()
	}
	const open = () => {
		userInfo.value = app.globalData.userinfo
		if (lotteryList.value) {
			popup.value.open()
			return
		}
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/lottery/get',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success(res) {
				console.log(res.data.data)
				if (res.data.code === 200) {
					lotteryList.value = res.data.data.list
					lotteryPrice.value = res.data.data.price
					lotteryFree.value = res.data.data.free
					popup.value.open()
				} else {
					uni.showToast({
						title: '获取奖品信息失败',
						icon: 'none'
					})
				}
			},
			fail() {
				uni.showToast({
					title: '获取奖品信息失败',
					icon: 'none'
				})
			},
			complete() {
				uni.hideLoading()
			}
		})

	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.check {
		border: 4px solid #8F00FF;
	}

	.btn text {
		background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
		color: transparent;
		-webkit-background-clip: text;
	}

	.btn {
		width: 180px;
		height: 44px;
		font-size: 14px;
		background-color: #000;
		box-shadow: 0px 4px 0px 0px #7F720040;
		border-radius: 22px;
	}

	.bottom-terms view {
		padding: 2px 10px;
	}

	.bottom-terms {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		position: relative;
		bottom: 0;
		left: 0;
		font-size: 12px;
		color: #626262;
	}

	.lottery-item image {
		width: 25px;
		height: auto;
	}

	.lottery-item view {
		font-weight: bold;
		display: flex;
	}

	.lottery-item {
		margin: 8px;
		width: 75px;
		height: 75px;
		border-radius: 17px;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.lottery {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		background: linear-gradient(119.74deg, #C1FF90 0.63%, #13FFB7 100%);
		box-shadow: 0px 4px 4px 0px #00000080;
		border-radius: 24px;
		padding: 8px;
	}

	.hint view:first-child {
		font-size: 22px;
	}

	.hint {
		display: flex;
		flex-direction: column;
		font-weight: bold;
		padding-bottom: 5px;
	}

	.top-icon image {
		height: 180px;
	}

	.top-icon {
		height: 150px;
		background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/xiangguo.png) no-repeat,
			url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/TreasureHunter.png) no-repeat,
			url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star1.png) no-repeat,
			url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star2.png) no-repeat,
			url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star3.png) no-repeat,
			url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/lottery/star4.png) no-repeat;
		background-size: 180px, auto 90px, 28px, 52px, 38px, 13px;
		background-position: center, center, calc(50% - 104px) 18px, left bottom, calc(50% + 120px) 18px, bottom 25px right 20px;
		display: flex;
		justify-content: center;
	}

	.price-bck image {
		width: 18px;
	}

	.logo-bck {
		height: 26px;
		width: 26px;
		background: #FFCC18;
		border-radius: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8px;
	}

	.price-bck {
		height: 26px;
		background: rgba(255, 255, 255, .8);
		border-radius: 13px;
		display: flex;
		align-items: center;
		padding-right: 12px;
		font-size: 12px;
		font-weight: 700;
	}

	.top-left {
		flex: 1;
		font-size: 18px;
		font-weight: bold;
	}

	.top-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.top {
		display: flex;
		padding: 0 15px;
	}

	scroll-view {
		padding-top: 15px;
		position: relative;
		height: calc(100% - 15px);
	}

	.terms-text {
		height: calc(100% - 15px);
	}
</style>