<template>
	<!-- 优惠券 -->
	<view>
		<!-- 优惠券弹窗 -->
		<uni-popup ref="_couponPop" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
			<view v-if="couponData" class="coupon-pop common_bg relative">
				<scroll-view class="coupon-list" scroll-y>
					<view v-for="(item, i) in couponData" :key="i" class="coupon-item">
						<view class="center">
							<text>￥</text>
							<text>{{ Number(item.price) }}</text>
						</view>
						<view class="ml30 column">
							<text>{{ item.title }}</text>
							<text>有限期{{ item.effective_day }}天</text>
						</view>
					</view>
				</scroll-view>
				<view @click="receiveCoupon" class="get-btn center">立即收下</view>
				<view class="bt-close flex" @tap="close">
					<image class="img100" :src="$img1('common/close.png')"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'home-page-coupon',
		data() {
			return {
				couponData: null,
				canGetCoupon: false
			}
		},
		methods: {
			/**
			 * 检查是否有可领取的优惠券
			 * @returns {Promise<boolean>} 是否有可领取的优惠券
			 */
			async checkCoupon() {
				return new Promise((resolve) => {
					this.req({
						url: "coupon",
						data: {},
						success: (res) => {
							if (res.status == 1) {

								if (res.data.goods && res.data.goods.list && res.data.goods.list
									.length > 0) {
									this.couponData = res.data.goods.list;
									this.canGetCoupon = true;
									this.$refs._couponPop.open();
									resolve(true);
									return;
								}
							}

							this.couponData = null;
							this.canGetCoupon = false;
							resolve(false);
						},
						fail: () => {
							this.canGetCoupon = false;
							resolve(false);
						}
					});
				});
			},


			/**
			 * 打开优惠券弹窗
			 */
			async open() {
				const hasCoupon = await this.checkCoupon();

				return hasCoupon;
			},

			/**
			 * 关闭优惠券弹窗
			 */
			close() {
				this.$refs._couponPop.close();
			},

			/**
			 * 领取优惠券
			 */
			receiveCoupon() {
				if (!this.couponData) {
					return;
				}

				let arr = this.couponData.map((item) => item.id);

				if (arr.length <= 0) {
					return;
				}

				this.req({
					url: "receive",
					data: {
						coupon_id: arr.join(","),
					},
					success: (res) => {
						if (res.status == 1) {
							setTimeout(() => {
								uni.showToast({
									title: "领取成功",
									icon: "success",
								});
							}, 100);

							this.close();
							this.$emit('received');
						}
					},
				});
			}
		},
		mounted() {
			console.log('优惠券组件');
			this.checkCoupon();
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-pop {
		width: 604rpx;
		height: 598rpx;
		position: relative;
		background: url($imgurl + "index/couponBg.png") no-repeat 0 0 / 100% 100%;

		.coupon-pop-title {
			display: flex;
			justify-content: center;
			padding: 40rpx 0 30rpx;

			text {
				font-weight: 500;
				font-size: 40rpx;
				color: #ffffff;
			}
		}

		.coupon-list {
			padding-top: 128rpx;
			height: 400rpx;

			.coupon-item {
				width: 530rpx;
				height: 160rpx;
				margin: 0 auto 20rpx;
				display: flex;
				align-items: center;
				position: relative;
				background: url($imgurl + "index/couponItem.png") no-repeat 0 0 / 100% 100%;

				>view:nth-child(1) {
					width: 168rpx;
					height: 168rpx;

					>text:nth-child(1) {
						font-weight: 400;
						font-size: 24rpx;
						color: #FDB075;
						padding-top: 20rpx;
					}

					>text:nth-child(2) {
						font-weight: 700;
						font-size: 64rpx;
						color: #FDB075;
					}
				}

				>view:nth-child(2) {
					>text:nth-child(1) {
						font-weight: 400;
						font-size: 28rpx;
						color: #FDB075;
					}

					>text:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #FDB075;
					}
				}
			}

			.gap-box {
				width: 100%;
				height: 60rpx;
			}
		}

		.get-btn {
			margin: 120rpx auto 0;
			width: 386rpx;
			height: 102rpx;
			background: #D8FD24;
			border-radius: 26rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
		}

		.bt-tip {
			white-space: nowrap;
			position: absolute;
			bottom: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			font-weight: 400;
			font-size: 24rpx;
			color: #ffffff;
		}

		.bt-close {
			position: absolute;
			bottom: -230rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 48rpx;
			height: 48rpx;
			opacity: 0.6;
		}
	}
</style>