<template>
	<view v-if="visible" class="activity-selected-popup" @tap="handleMaskClick">
		<!-- 背景遮罩 -->
		<view class="popup-mask"></view>
		
		<!-- 弹窗容器 -->
		<view class="popup-wrapper" :style="popupStyle">
			<!-- 背景底 -->
			<view class="popup-background"></view>
			
			<!-- 弹窗内容 -->
			<view class="popup-content" @tap.stop>
				<!-- 标题 -->
				<view class="popup-title">恭喜你入选啦!</view>
				
				<!-- 活动列表 -->
				<scroll-view 
					v-if="activityList.length > 3"
					class="activity-scroll"
					scroll-y
					:scroll-top="scrollTop"
				>
					<view 
						v-for="(activity, index) in activityList" 
						:key="index"
						class="activity-item"
					>
						<text class="activity-text">已入选{{ activity.name || '鲜活溯源之旅' }}</text>
						<view 
							class="activity-btn"
							:class="{ disabled: activity.disabled }"
							@tap="handleViewActivity(activity, index)"
						>
							查看活动
						</view>
					</view>
				</scroll-view>
				
				<view v-else class="activity-list">
					<view 
						v-for="(activity, index) in activityList" 
						:key="index"
						class="activity-item"
					>
						<text class="activity-text">已入选{{ activity.name || '鲜活溯源之旅' }}</text>
						<view 
							class="activity-btn"
							:class="{ disabled: activity.disabled }"
							@tap="handleViewActivity(activity, index)"
						>
							查看活动
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 关闭按钮 -->
		<view class="close-btn" @tap="handleClose">
			<text class="close-icon">×</text>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	activityList: {
		type: Array,
		default: () => []
	}
})

const emit = defineEmits(['close', 'viewActivity'])

const scrollTop = ref(0)

// 根据活动数量动态计算弹窗高度
const popupStyle = computed(() => {
	const count = props.activityList.length
	let height = 320 // 默认高度（1个活动）160px * 2
	
	if (count === 2) {
		height = 420 // 210px * 2
	} else if (count >= 3) {
		height = 520 // 260px * 2，超过3个时内容区域可滚动
	}
	
	return {
		height: height + 'rpx'
	}
})

// 查看活动
const handleViewActivity = (activity, index) => {
	if (activity.disabled) {
		return
	}
	emit('viewActivity', activity, index)
}

// 关闭弹窗
const handleClose = () => {
	emit('close')
}

// 点击遮罩层
const handleMaskClick = (e) => {
	if (e.target === e.currentTarget) {
		handleClose()
	}
}
</script>

<style lang="less" scoped>
.activity-selected-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.popup-wrapper {
	position: relative;
	width: 546rpx;
	flex-shrink: 0;
	border-radius: 38rpx;
	z-index: 1;
}

/* 背景底 */
.popup-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 38rpx;
	background: linear-gradient(180deg, #FFE9C5 0%, #FFF 52.87%);
	z-index: 0;
}

.popup-content {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 60rpx 40rpx 40rpx 40rpx;
	box-sizing: border-box;
	z-index: 1;
}

.popup-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #FFA500;
	text-align: center;
	margin-bottom: 40rpx;
}

.activity-scroll {
	max-height: 360rpx;
	height: 360rpx;
}

.activity-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.activity-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
}

.activity-text {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
}

.activity-btn {
	padding: 12rpx 32rpx;
	background: linear-gradient(180deg, #FFA500 0%, #FF8C00 100%);
	border-radius: 30rpx;
	color: #FFFFFF;
	font-size: 24rpx;
	text-align: center;
	min-width: 140rpx;
}

.activity-btn.disabled {
	background: #E0E0E0;
	color: #999999;
}

.close-btn {
	position: absolute;
	bottom: -80rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 60rpx;
	background-color: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.close-icon {
	font-size: 40rpx;
	color: #666666;
	line-height: 1;
}
</style>

