<template>
	<view v-show="visible" class="activity-selected-popup">
		<!-- 背景遮罩 -->
		<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" :class="{ 'faded': index >= 2 }">已入选{{ activity.name || ''
							}}</text>
						</view>
					</scroll-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>
				</view>
				<!-- 底部渐变蒙层 -->
				<view v-if="activityList.length >= 3" class="scroll-fade-mask">
					<image class="mask-image"
						:src="`https://course.feihe.com/momclub-picture/homepage/Q3Res/actSelectMask.png`"
						mode="aspectFit">
					</image>
				</view>
				<!-- 底部统一按钮 -->
				<view class="bottom-btn-wrapper">
					<view class="activity-btn" @tap="handleBottomButtonClick">
						<image class="activity-btn-image"
							:src="`https://course.feihe.com/momclub-picture/homepage/Q3Res/actSelectLookBtn.png`"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 关闭按钮 -->
		<view class="close-btn" @tap="handleClose">
			<image class="close-icon"
				:src="`https://course.feihe.com/momclub-picture/homepage/Q3Res/commonCloseBtn.png`" mode="aspectFit">
			</image>
		</view>
	</view>
</template>

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


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) => {
	emit('viewActivity', activity, index)
}

// 底部按钮点击
const handleBottomButtonClick = 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)
		}
	}


	handleViewActivity(props.activityList[0], 0)
}

// 关闭弹窗
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;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

/* 背景底 */
.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%;
	box-sizing: border-box;
	z-index: 1;
}

.popup-title {
	position: absolute;
	top: 48rpx;
	left: 0;
	right: 0;
	font-size: 36rpx;
	font-weight: bold;
	color: #D3A458;
	text-align: center;
	letter-spacing: 1rpx;
	line-height: 1.2;
	z-index: 2;
}

.activity-scroll-wrapper {
	position: absolute;
	top: 120rpx;
	left: 40rpx;
	right: 40rpx;
	bottom: 120rpx;
	max-height: 360rpx;
	height: auto;
}

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

.activity-scroll .activity-item {
	position: relative;
	width: 100%;
	min-height: 56rpx;
	margin-bottom: 20rpx;
}

.activity-scroll .activity-text {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	font-size: 28rpx;
	color: #333333;
	text-align: center;
	font-weight: 400;
	line-height: 1.6;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 底部渐变蒙层 */
.scroll-fade-mask {
	position: absolute;
	bottom: 0rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 546rpx;
	height: 85rpx;
	pointer-events: none;
	z-index: 2;
}

.mask-image {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 546rpx;
	height: 170rpx;
	object-fit: cover;
}

.activity-list {
	position: absolute;
	top: 120rpx;
	left: 40rpx;
	right: 40rpx;
	bottom: 120rpx;
	width: calc(100% - 80rpx);
}

.activity-item {
	position: relative;
	width: 100%;
	min-height: 56rpx;
	margin-bottom: 20rpx;
}

.activity-text {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	font-size: 28rpx;
	color: #333333;
	text-align: center;
	font-weight: 400;
	line-height: 1.6;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.activity-text.faded {
	color: #333333;
}

.bottom-btn-wrapper {
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 396rpx;
	height: 78rpx;
	z-index: 3;
}

.activity-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 396rpx;
	height: 78rpx;
	transition: all 0.3s ease;
	background: transparent;
	border: none;
}


.activity-btn-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 396rpx;
	height: 78rpx;
}

.close-btn {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1100rpx;
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	z-index: 2;
}

.close-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 56rpx;
	height: 56rpx;
}
</style>
