<template>
	<view v-show="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>

				<!-- 活动列表 -->
				<view v-if="activityList.length >= 3" class="activity-scroll-wrapper">
					<scroll-view 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 class="scroll-fade-mask">
						<image class="mask-image" :src="`${$baseUrl}homepage/Q3Res/actSelectMask.png`" mode="aspectFit"></image>
					</view>
				</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">
			<image class="close-icon" :src="`${$baseUrl}homepage/Q3Res/commonCloseBtn.png`" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from 'vue'
import { fetchUserClickActivity } from '../api/home'

const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl

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 = async (activity, index) => {
	if (activity.disabled) {
		return
	}

		// 调用接口，传单个 activityId
		if (activity.id) {
			try {
				await fetchUserClickActivity({
					activityIds: [activity.id]
				})
			} catch (error) {
				console.error('点击活动接口调用失败:', error)
			}
		}

	emit('viewActivity', activity, index)
}

// 关闭弹窗
const handleClose = async () => {
	// 调用接口，传所有 activityIds
	const activityIds = props.activityList
		.filter(activity => activity.id)
		.map(activity => activity.id)

	if (activityIds.length > 0) {
		try {
			await fetchUserClickActivity({
				activityIds: activityIds
			})
		} catch (error) {
			console.error('关闭弹窗接口调用失败:', error)
		}
	}

	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;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 99999 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	/* #ifdef MP-WEIXIN */
	z-index: 99999;
	/* #endif */
}

.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: #D3A458;
	text-align: center;
	margin-bottom: 40rpx;
}

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

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

/* 底部渐变蒙层 */
.scroll-fade-mask {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 85rpx;
	pointer-events: none;
	z-index: 10;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.mask-image {
	width: 546rpx;
	height: 170rpx;
	flex-shrink: 0;
	object-fit: cover;
}

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

.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 {
	display: flex;
	width: 160rpx;
	height: 60rpx;
	justify-content: center;
	align-items: center;
	gap: 20rpx;
	flex-shrink: 0;
	border-radius: 44rpx;
	background: #D3A358;
	color: #FFFFFF;
	font-size: 24rpx;
	text-align: center;
	box-sizing: border-box;
}

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

.close-btn {
	position: absolute;
	top: 1130rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 56rpx;
	height: 56rpx;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.close-icon {
	width: 56rpx;
	height: 56rpx;
}
</style>
