<template>
	<u-popup :show="show && !!countdown" round="40rpx" @close="$emit('close')">
		<view class="lottery-popup">
			<image class="lottery-header-image"
				src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_head.png"
				mode="widthFix" />
			<image class="lottery-background-image"
				src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_bg.png" />
			<view class="lottery-content">
				<view class="lottery-close-section">
					<view class="close-button-wrapper">
						<view class="close-button" @click="$emit('close')">
							<u-icon class="close-icon" name="close" color="#fff" size="20" />
						</view>
					</view>
				</view>
				<view class="lottery-main-content">
					<image class="lottery-title-image"
						src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_title.png" />
					<view class="lottery-countdown-section">
						<view class="countdown-label">开奖倒计时</view>
						<view class="countdown-timer">
							<view class="countdown-number">{{ countdown.hours || '00' }}</view>
							<view class="countdown-number">{{ countdown.minutes || '00' }}</view>
							<view class="countdown-number">{{ countdown.seconds || '00' }}</view>
						</view>
					</view>
					<view class="lottery-products-section">
						<ThreeItemSwiper :products="products" />
					</view>
					<view class="lottery-indicators">
						<view class="indicator-point" v-for="(item, index) in (products || [])" :key="index" />
					</view>
					<view class="lottery-tip">观看课程参与抽奖</view>
					<view class="lottery-action-button" @click="$emit('claim')">参与抽奖</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import ThreeItemSwiper from '@/pages_course/components/ThreeItemSwiper.vue'

export default {
	name: 'LiveLotteryPopPanel',
	components: { ThreeItemSwiper },
	props: {
		show: { type: Boolean, default: false },
		countdown: { type: Object, default: () => ({}) },
		products: { type: Array, default: () => [] }
	}
}
</script>

<style scoped lang="scss">
.lottery-popup {
	position: relative;
	border-radius: 40rpx;
	height: fit-content;

	.lottery-header-image {
		width: 311rpx;
		position: absolute;
		top: -122rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.lottery-background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.lottery-content {
		position: relative;
		z-index: 2;
		padding: 24rpx 0 68rpx;

		.lottery-close-section {
			display: flex;
			justify-content: flex-end;
			margin-right: 20rpx;

			.close-button {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.lottery-main-content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.lottery-title-image {
				width: 446rpx;
				height: 80rpx;
			}

			.lottery-countdown-section {
				font-size: 24rpx;
				color: #fff;
				display: flex;
				align-items: center;
				margin: 30rpx 0;

				.countdown-label {
					margin-right: 10rpx;
				}

				.countdown-timer {
					display: flex;
					align-items: center;

					.countdown-number {
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						background: #ffffff;
						border-radius: 8rpx;
						margin: 4rpx;
						font-weight: 600;
						font-size: 24rpx;
						color: #f85d22;
						line-height: 40rpx;
					}
				}
			}

			.lottery-products-section {
				width: 100%;
			}

			.lottery-indicators {
				margin: 20rpx 0 50rpx;
				display: flex;
				gap: 6rpx;

				.indicator-point {
					width: 20rpx;
					height: 8rpx;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 4rpx;
				}
			}

			.lottery-tip {
				color: #fff;
				font-size: 28rpx;
			}

			.lottery-action-button {
				margin-top: 30rpx;
				width: 520rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(180deg, #fff4d6 0%, #ffeb66 100%);
				box-shadow: 0rpx 10rpx 8rpx 4rpx rgba(246, 82, 25, 0.5);
				border-radius: 44rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #f4410b;
				text-align: center;
			}
		}
	}
}
</style>
