<template>
	<uni-popup ref="resultPopup" :mask-click="false" type="center">
		<view class="popup-container">
			<!-- 未到达公布日期 -->
			<view v-if="activityInfo.prized === -1" class="popup-bg">
				<view class="popup-box">
					<view class="result-title">您已报名该活动</view>
					<view class="result-content content-pad">公布入选日期：{{ datePart }}</view>
					<view class="result-popup-goto" @click="goToSign">查看报名信息</view>
				</view>
			</view>
			<!-- 已到达公布日期 -->
			<view v-else>
				<!-- 已中奖提示 -->
				<view v-if="activityInfo.prized" class="prized-box">
					<view class="card-top">
						<view class="result-box">
							<view class="result-title">恭喜您！报名成功入选！</view>
							<view class="result-text">您已成功获得本次【{{ activityInfo.activityTitle }}】的参与资格！</view>
						</view>
					</view>
					<view class="card-main">
						<view class="line"></view>
						<view class="line"></view>
					</view>
					<view class="card-bot">
						<view class="result-tip">
							<view class="filed">活动时间</view>
							<view class="text">{{ formatActivityTime }}</view>
							<view class="filed">活动地点</view>
							<view v-for="(itm, index) in activityInfo.addressList" :key="index" class="text">
								<view v-if="index < 2" class="mark">
									<image :src="$baseUrl + 'sign-up/vector.png'" mode="aspectFit" />
									<view class="mark-text">
										{{ itm.provinceName }}{{ itm.cityName }}{{ itm.addressDetail }}
									</view>
								</view>
							</view>
							<view v-if="activityInfo.addressList && activityInfo.addressList.length > 2" class="point">
								···
							</view>
						</view>
						<image :src="activityInfo.contactQRCode" mode="aspectFit" :show-menu-by-longpress="true" />
						<view class="add-text">
							如确认参与活动，请长按二维码添加活动负责人
						</view>
						<view class="result-popup-goto" @click="goToSign"> 查看报名信息 </view>
					</view>
				</view>
				<!-- 未中奖提示 -->
				<view v-else class="popup-bg">
					<view class="popup-box">
						<view class="result-title">
							活动报名结果通知
						</view>
						<view class="result-content">
							很遗憾未入选此次【{{ activityInfo.activityTitle }}】， 再看看其他活动吧
						</view>
						<view class="result-popup-btn" @click="goToMore">
							查看更多活动
						</view>
					</view>
				</view>
			</view>
			<image :src="$baseUrl + 'sign-up/close.png'" class="close" @click="close" />
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { ref, toRefs, defineProps, defineEmits, computed } from 'vue'
const props = defineProps({
	activityInfo: {
		type: Object,
		default: {
			activityTitle: "",
			contactQRCode: "",
			activityStartTime: "",
			activityEndTime: "",
			signupStartTime: "",
			signupEndTime: "",
			announcementTime: "",//公布时间
			prized: -1,
			addressList: []
		}
	}
})
const { activityInfo } = toRefs(props)
const resultPopup = ref(null)
const emit = defineEmits([
	'goToSign', 'goToMore'
])
const goToSign = () => {
	close()
	emit('goToSign')
}
const goToMore = () => {
	close()
	emit('goToMore')
}
/**
 * 格式化活动时间显示
 * @param {string} activityStartTime - 开始时间 '2025-11-01 03:05:04'
 * @param {string} activityEndTime - 结束时间 '2025-11-01 05:09:03'
 * @returns {string} 格式化后的时间字符串
 */
const formatActivityTime = computed(() => {
	// 解析日期
	const startDate = new Date(activityInfo.value.activityStartTime.replace(/-/g, '/'));
	const endDate = new Date(activityInfo.value.activityEndTime.replace(/-/g, '/'));

	// 获取星期几
	const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	const weekday = weekdays[startDate.getDay()];

	// 格式化日期部分：25年11月1日
	const formatDatePart = (date) => {
		const year = date.getFullYear().toString().slice(-2); // 取后两位
		const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始
		const day = date.getDate().toString().padStart(2, '0');
		return `${year}年${month}月${day}日`;
	};

	// 格式化时间部分：03:05
	const formatTimePart = (date) => {
		const hours = date.getHours().toString().padStart(2, '0');
		const minutes = date.getMinutes().toString().padStart(2, '0');
		return `${hours}:${minutes}`;
	};

	// 判断是否为同一天
	const isSameDay = startDate.toDateString() === endDate.toDateString();

	if (isSameDay) {
		// 同一天：25年11月1日 03:05～05:09（周六）
		const datePart = formatDatePart(startDate);
		const startTime = formatTimePart(startDate);
		const endTime = formatTimePart(endDate);
		return `${datePart} ${startTime}-${endTime}（${weekday}）`;
	} else {
		// 不同天：25年11月1日 ～25年11月25日
		const startDatePart = formatDatePart(startDate);
		const endDatePart = formatDatePart(endDate);
		return `${startDatePart}-${endDatePart}`;
	}
})
const datePart = computed(() => {
	// 分割日期部分
	const dateStr = activityInfo.value.announcementTime?.split(' ')[0]; // "2025-10-03"
	const [year, month, day] = dateStr.split('-');
	const result = `${parseInt(year)}年${parseInt(month)}月${parseInt(day)}日`;
	return result; // 输出: 2025年10月3日
})
const open = () => {
	resultPopup.value.open()
}
const close = () => {
	resultPopup.value.close()
}
defineExpose({
	open,
	close
})
</script>

<style lang="less" scoped>
@import '@/common.less';

.popup-container {
	max-height: calc(100vh - 670rpx);
	// min-height: 360rpx;
	width: calc(100vw - 204rpx);
	border-radius: 38rpx;
	position: relative;

	.popup-bg {
		width: 100%;
		border-radius: 38rpx;
		background: linear-gradient(180deg, #FFE9C5 0%, #FFFFFF 26.82%);
		padding: 56rpx 38rpx;
		box-sizing: border-box;

		.popup-box {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			max-height: calc(100vh - 785rpx);
			min-height: 230rpx;

			.result-title {
				font-weight: 600;
				font-size: 36rpx;
				color: #D3A458;
			}

			.result-content {
				font-size: 24rpx;
				margin: 46rpx 0rpx;

			}

			.content-pad {
				// padding-bottom: 40rpx;
				text-align: center;
			}

			.result-popup-btn {
				color: #FFF;
				background: #D3A458;
				width: calc(100% - 54rpx);
				border-radius: 60rpx;
				font-weight: 500;
				font-size: 32rpx;
				text-align: center;
				height: 78rpx;
				line-height: 78rpx;
			}

		}
	}

	.result-popup-goto {
		font-size: 24rpx;
		text-align: center;
		text-decoration: underline;
		color: #D3A458;
	}

	.prized-box {
		position: relative;

		.card-top {
			height: 264rpx;
			background: linear-gradient(180deg, #FFE9C5 0%, #FFFFFF 26.82%);
			border-radius: 38rpx;
			padding: 56rpx 38rpx;
			box-sizing: border-box;

			.result-box {
				display: flex;
				flex-direction: column;
				align-items: center;

				.result-title {
					font-weight: 600;
					font-size: 36rpx;
					color: #D3A458;
				}

				.result-text {
					font-size: 24rpx;
					margin-top: 30rpx;
				}
			}
		}

		.card-main {
			height: 18rpx;
			display: flex;
			justify-content: space-between;
			position: relative;
			padding: 0rpx 85rpx;

			.line {
				width: 12rpx;
				height: 56rpx;
				border-radius: 20rpx;
				background-color: #ECC990;
				margin-top: -20rpx;
			}
		}

		.card-bot {
			min-height: 534rpx;
			max-width: 564rpx;
			border-radius: 38rpx;
			background: #FFFFFF;
			padding: 15rpx 20rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			.add-text {
				font-size: 20rpx;
				color: #A8A8A8;
				margin: 10rpx 0rpx;

			}

			.result-tip {
				.filed {
					color: #D3A458;
					margin: 20rpx 0rpx 10rpx;
					font-size: 28rpx;
				}

				.text {
					font-weight: 600;
					line-height: 40rpx;
					font-size: 24rpx;
					width: 450rpx;

					.mark {
						display: flex;
						justify-content: center;
						width: 100%;

						image {
							width: 16rpx;
							height: 20rpx;
							margin-right: 8rpx;
						}
						.mark-text{
							max-width: 426rpx;
						}
					}
				}
				.point{
					line-height: 24rpx;
				}
			}

			image {
				width: 200rpx;
				height: 200rpx;
				margin-top: 10rpx;
			}
		}
	}

	.close {
		position: absolute;
		bottom: -134rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 56rpx;
		height: 56rpx;
	}
}
</style>
