<template>
	<view class="lottery-page">
		<custom-navbar title="活动页面" :showUser="true" backgroundColor="#fff" borderBottom="none"></custom-navbar>
		<view class="content" :style="{backgroundImage: `url(${activityDetails.back_img})` }">
			<image class="lottery-rule" src="/static/images/icons/lottery-rule.png" @click="openRule"></image>
			<view class="lottery">
				<image :src="activityDetails.lottery_img" class="lottery-bj"></image>
				<view class="lottery-card">
					<dengbo-lotteryGrid ref="lottery" @lottery-end="onLotteryEnd" :prizes="prizes" v-if="prizes.length">
						<template slot="centerButton">
							<view class="lottery-card-center">
								<view class="lottery-card-center-text" style="padding-top: 40rpx;">
									剩余{{ activityDetails.user_num }}次</view>
								<view class="lottery-card-center-text">抽奖机会</view>
							</view>
						</template>
					</dengbo-lotteryGrid>
				</view>
				<view class="lottery-button" @click="startLottery"></view>
			</view>


			<view class="lottery-method" v-if="activityMethod && activityMethod.length">
				<view class="lottery-method-header">
					<image class="lottery-method-header" src="/static/images/background/lotteryBj13.png"
						mode="widthFix"></image>
				</view>
				<view class="lottery-method-content">
					<view class="lottery-method-content-item" v-for="(item,index) in activityMethod" :key="index">
						{{ item.text }}
					</view>
				</view>
			</view>


			<view class="award-winning">
				<view class="winning-heard">
					<image class="winning-heard" src="/static/images/background/lotteryBj3.png"></image>
				</view>
				<view class="winning-content" v-if="recordList && recordList.length">

					<view class="winning-item flex-row-center-between" v-for="(item,index) in recordList" :key="index">
						<view class="flex-row-center">
							<view class="winning-item-left">
								<image class="winning-item-left-img" :src="item.prize_img " mode="aspectFill"></image>
							</view>
							<view class="winning-item-center">
								<view class="winning-item-center-text1">{{ item.prize_name }}</view>
								<view class="winning-item-center-text2">{{ item.lottery_time }}</view>
							</view>
						</view>

						<view class="winning-item-right flex-row-center-center" @click="goDetail(item.id)">去查看</view>
					</view>
				</view>
				<view class="winning-content flex-row-center-center" v-else>
					<view class="winning-item-no ">
						<image src="/static/images/shop/noPrize.png" class="winning-item-no-img"></image>
						<view class="winning-item-no-text">暂无中奖记录哟~</view>
					</view>

				</view>
				<view class="winning-footer">
					<image class="winning-footer" src="/static/images/background/lotteryBj3-footer.png"></image>
					<image class="winning-more" v-if="recordList && recordList.length" @click="goList"
						src="/static/images/background/lottery-more.png">
					</image>
				</view>

			</view>
		</view>
		<uv-popup ref="popup1" bgColor="transparent">
			<view class="popup1-close" @click="closeRule">
				<image class="popup1-close-img" src="/static/images/icons/lottery-close.png"></image>
			</view>
			<view class="popup1-content">
				<scroll-view scroll-y class="popup1-content-scroll">
					<uv-parse :content="activityDetails.rule_text"></uv-parse>
				</scroll-view>

			</view>
		</uv-popup>

		<uv-popup ref="popup2" bgColor="transparent">
			<view class="popup2-noWin" :class="{popup2NoWin2:activityDetails.user_num==0}" v-if="drawResule.type==1">
				<view class="popup2-noWin-btn" @click="noWinClick"></view>
			</view>
			<view class="popup2-content" v-else>
				<view class="popup2-content-title">恭喜你获得</view>
				<view class="popup2-content-card">
					<image class="popup2-content-card-img" :src="drawResule.simple_img"></image>
					<view class="popup2-content-card-texts">
						<view class="popup2-content-card-text1">{{ drawResule.show_text }}</view>
						<view class="popup2-content-card-text2">兑换方式：{{ drawResule.type==2?"线上 ":"邮寄"}}</view>
					</view>

				</view>
				<view class="popup2-content-time">请在{{ drawResule.claim_deadline }}前兑换</view>
				<view class="popup2-content-btn flex-row-center-center" v-if="activityDetails.user_num==0"
					@click="goDetail(drawResule.record_id)">去领奖</view>
				<view class="popup2-content-btn flex-row-center-center" v-else @click="continueDraw">继续抽奖</view>
				<view class="popup2-content-go flex-row-center-center" @click="goList">
					<text>查看礼品</text>
					<image class="popup2-content-go-cion" src="/static/images/icons/lottery-right.png"></image>
				</view>
			</view>

			<view class="popup2-close" @click="close">
				<image class="popup2-close-img" src="/static/images/icons/lottery-close.png"></image>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import transferMoney from "./components/transferMoney.vue";
	import dengboLotteryGrid from "@/components/dengbo-lotteryGrid/components/dengbo-lotteryGrid/dengbo-lotteryGrid.vue";
	export default {
		components: {
			transferMoney,
			dengboLotteryGrid
		},
		name: "LotteryIndex",
		data() {
			return {
				isSubmit: false,
				activity_id: 1, //活动id
				recordList: [], //中奖列表
				activityDetails: {},
				prizeItemStyle: {
					borderRadius: '10rpx',
					fontWeight: '500',
					fontSize: '23rpx',
					color: '#E26E30',
				},
				prizes: [],
				drawResule: {},
				activityMethod: []
			}
		},
		async onLoad(options) {
			if (options.activity_id) {
				this.activity_id = options.activity_id
			}
			this.getActivityDetails()
			this.getActivityMethod()
			this.record()
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/lottery/winDetail?id=${id}`
				});
				this.close()
			},
			goList() {
				uni.navigateTo({
					url: `/pages/lottery/list?activity_id=${this.activity_id}`
				});
				this.close()
			},
			close() {
				this.$refs.popup2.close();
			},
			open() {
				this.$refs.popup2.open('center');
			},
			closeRule() {
				this.$refs.popup1.close();
			},
			openRule() {
				this.$refs.popup1.open('bottom');
			},
			async getActivityDetails() {
				await request.post("/user/lottery/getActivityDetails", {
					id: this.activity_id
				}).then(async (res) => {
					if (res.code == 200) {
						this.activityDetails = res.data
						this.prizes = res.data.prize_list
						this.activityDetails.back_img = await this.getImagePath(res.data.back_img)
						this.activityDetails.lottery_img = await this.getImagePath(res.data.lottery_img)
						await this.activityDetails.prize_list.forEach(async (item)=>{
							item.simple_img = await this.getImagePath(item.simple_img)
						})
					}
				});
			},
			async getActivityMethod() {
				await request.post("/user/lottery/getActivityMethod", {
					activity_id: this.activity_id
				}).then((res) => {
					if (res.code == 200) {
						this.activityMethod = res.data.list
					}
				});
			},
			async record() {
				await request.post("/user/lottery/record", {
					activity_id: this.activity_id,
					page: 1,
					limit: 5,
				}).then((res) => {
					if (res.code == 200) {
						this.recordList = res.data.list
					}
				});
			},
			noWinClick() {
				if (this.activityDetails.user_num > 0) {
					this.continueDraw()
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			//继续抽奖
			continueDraw() {
				this.close()
				this.startLottery()
			},
			startLottery() {
				if (this.isSubmit && this.prizes.length > 0) {
					return
				}
				console.log("开始抽奖")
				this.isSubmit = true
				request.post("/user/lottery/draw", {
					id: this.activity_id,
				}).then((res) => {
					if (res.code == 200) {
						if (res.data?.id) {
							// // 开始抽奖
							// this.isLotteryRunning = true;
							this.drawResule = res.data
							this.$refs.lottery.startLottery(res.data.id);
						} else {
							uni.showToast({
								title: "抽奖错误",
								icon: "none",
							});
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						this.isSubmit = false
					}
				}).catch((err) => {
					this.isSubmit = false
				})

			},
			onLotteryEnd(prize) {
				setTimeout(() => {
					this.isSubmit = false
				}, 100)

				if (this.activityDetails.user_num >= 1) {
					this.activityDetails.user_num = this.activityDetails.user_num - 1
				}
				setTimeout(() => {
					this.open()
					this.record()
					this.$refs.lottery.clearLotteryState();
				}, 300)


				console.log(prize)
			}

		}

	};
</script>

<style lang="less">
	.lottery-page {
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-size: 100% auto;
			background-position: center top;
			background-repeat: no-repeat;
			padding-bottom: 58rpx;
			position: relative;

			.lottery-rule {
				position: absolute;
				right: 0;
				top: 218rpx;
				width: 133rpx;
				height: 50rpx;
			}

			.lottery {
				margin-top: 264rpx;
				position: relative;
				display: inline-block;
				width: 703rpx;
				height: 780rpx;

				.lottery-bj {
					width: 703rpx;
					height: 780rpx;
				}

				.lottery-card {
					width: 450rpx;
					height: 450rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-52%, -51%);

					.lottery-card-center {
						width: 142rpx;
						height: 142rpx;
						background-image: url("/static/images/background/lotteryBj5.png");
						background-size: cover;
						background-position: center top;
						background-repeat: no-repeat;

						.lottery-card-center-text {
							font-weight: 500;
							font-size: 24rpx;
							color: #FAE1D2;
							text-align: center;
						}
					}
				}

				.lottery-button {
					width: 310rpx;
					height: 135rpx;
					position: absolute;
					bottom: 14rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			.lottery-method {
				width: 689rpx;
				margin: 0 auto;
				margin-top: 64rpx;

				.lottery-method-header {
					width: 689rpx;
					height: 99rpx;
				}

				.lottery-method-content {
					border-radius: 0 0 30rpx 30rpx;
					background: #FCF0E2;

					.lottery-method-content-item {
						padding: 30rpx 0rpx;
						margin: 0rpx 24rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #343433;
						line-height: 40rpx;
						border-bottom: 1rpx solid #E5D9CA;
					}
				}
			}

			.award-winning {
				width: 689rpx;
				margin-top: 40rpx;

				.winning-heard {
					width: 689rpx;
					height: 125rpx;
				}

				.winning-footer {
					width: 689rpx;
					height: 109rpx;
					position: relative;

					.winning-more {
						position: absolute;
						width: 160rpx;
						height: 48rpx;
						left: 50%;
						transform: translateX(-50%);
						bottom: 20rpx;
					}
				}

				.winning-content {
					background: #fcf0e2;
					width: 689rpx;
					min-height: 100rpx;
					padding: 0 22rpx;
					box-sizing: border-box;
					display: flex;
					gap: 21rpx;
					flex-wrap: wrap;

					.winning-item-no {
						.winning-item-no-img {
							width: 290rpx;
							height: 192rpx;
						}

						.winning-item-no-text {
							font-weight: 400;
							font-size: 26rpx;
							color: #908981;
							text-align: center;
						}
					}

					.winning-item {
						width: 634rpx;
						padding: 26rpx 20rpx;
						box-sizing: border-box;
						background: #FEE9CE;
						border-radius: 20rpx;
						border: 1px solid #FEDEBE;

						.winning-item-left {
							width: 89rpx;
							height: 89rpx;
							background: #FCF0E2;
							border-radius: 50%;
							position: relative;
							overflow: auto;

							.winning-item-left-img {
								width: 68rpx;
								height: 72rpx;
								position: absolute;
								bottom: 0;
								left: 10rpx;
							}
						}

						.winning-item-center {
							margin-left: 19rpx;
							max-width: 320rpx;
							.winning-item-center-text1 {
								font-weight: 500;
								font-size: 32rpx;
								color: #76200A;
							}

							.winning-item-center-text2 {
								font-weight: 400;
								font-size: 24rpx;
								color: #A86A4A;
							}
						}

						.winning-item-right {
							width: 140rpx;
							height: 58rpx;
							background-image: url("/static/images/background/lotteryBj6.png");
							background-size: cover;
							background-position: center top;
							background-repeat: no-repeat;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #FFFFFF;
						}
					}
				}
			}



		}
	}

	.popup1-close {
		height: 67rpx;
		display: flex;
		justify-content: flex-end;

		.popup1-close-img {
			width: 60rpx;
			height: 60rpx;
			margin-right: 40rpx;
		}
	}

	.popup1-content {
		background-image: url("/static/images/background/lotteryBj7.png");
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		width: 750rpx;
		height: 1250rpx;
		max-height: 80vh;

		.popup1-content-scroll {
			padding: 263rpx 40rpx 0 40rpx;
			box-sizing: border-box;
			height: 1250rpx;
			max-height: 80vh;
		}
	}

	.popup2-close {
		height: 61rpx;
		display: flex;
		justify-content: center;
		margin-top: 58rpx;

		.popup2-close-img {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.popup2-noWin {
		background-image: url("/static/images/background/lotteryBj12.png");
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		width: 644rpx;
		height: 845rpx;
		position: relative;

		.popup2-noWin-btn {
			width: 322rpx;
			height: 107rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 46rpx;
		}
	}

	.popup2NoWin2 {
		background-image: url("/static/images/background/lotteryBj11.png");
	}

	.popup2-content {
		background-image: url("/static/images/background/lotteryBj8.png");
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		width: 644rpx;
		height: 907rpx;

		.popup2-content-title {
			font-weight: 400;
			font-size: 30rpx;
			color: #831903;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			padding-top: 373rpx;
			text-align: center;
		}

		.popup2-content-card {
			background-image: url("/static/images/background/lotteryBj9.png");
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
			width: 562rpx;
			height: 152rpx;
			margin: 14rpx 41rpx 0 41rpx;
			position: relative;

			.popup2-content-card-img {
				width: 107rpx;
				height: 107rpx;
				position: absolute;
				left: 28rpx;
				top: 28rpx;
				border-radius: 10rpx;
				// background: red;
			}

			.popup2-content-card-texts {
				position: absolute;
				left: 268rpx;
				top: 32rpx;

				.popup2-content-card-text1 {
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					margin-left: 15rpx;
				}

				.popup2-content-card-text2 {
					font-weight: 400;
					font-size: 26rpx;
					color: #FDF1F1;
					line-height: 37rpx;
					text-align: left;
					font-style: normal;
				}
			}

		}

		.popup2-content-time {
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #B37760;
			line-height: 37rpx;
			text-align: center;
			font-style: normal;
			margin-bottom: 50rpx;
		}

		.popup2-content-btn {
			margin: 0 auto;
			background-image: url("/static/images/background/lotteryBj10.png");
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
			width: 322rpx;
			height: 107rpx;
			font-weight: 500;
			font-size: 42rpx;
			color: #FFFFFF;
			text-shadow: 0px 2px 7px rgba(0, 0, 0, 0.25);
			text-align: left;
			font-style: normal;
			margin-bottom: 30rpx;
		}

		.popup2-content-go {
			font-weight: 400;
			font-size: 30rpx;
			color: #814B2D;
			text-align: center;
			font-style: normal;

			.popup2-content-go-cion {
				width: 10rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>