<template>
	<uni-popup ref="resultPopup" :mask-click="false" type="center">
		<view class="popup-container">
			<!-- 未到达公布日期 -->
			<view v-if="activityInfo.prized === -1" 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 v-else>
			  <!-- 已中奖提示 -->
			  <view v-if="activityInfo.prized" class="popup-box">
					<view class="result-title">恭喜您！报名成功入选！</view>
					<view class="result-content">
						<view class="result-text">
							您已成功获得本次【{{activityInfo.activityTitle}}】的参与资格！
							<br />
							如确认参与活动，请长按二维码添加活动负责人
						</view>
						<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">
						  	{{itm.provinceName}}{{itm.cityName}}{{itm.addressDetail}}
						  </view>
						</view>
						<image
						  :src="$baseUrl + 'sign-up/qrcode.png'"
						  mode="aspectFit"
						  :show-menu-by-longpress="true"
						/>
					</view>
					<view class="result-popup-goto result-pad" @click="goToSign"> 查看报名信息 </view>
			  </view>
			  <!-- 未中奖提示 -->
			  <view v-else class="popup-box">
					<view class="result-title">
						活动报名结果通知
					</view>
					<view class="result-content">
						由于活动名额有限，您此次未入选【{{activityInfo.activityTitle}}】的参与资格。
						<view class="line"></view>
						您的支持对我们至关重要，感谢您的参与，更多精彩活动在路上……</view>
					<view class="result-popup-btn" @click="goToMore">
						查看更多活动
					</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; // 月份从0开始
	  const day = date.getDate();
	  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: 418rpx;
	width: calc(100vw - 204rpx);
	background: linear-gradient(180deg, #FFE9C5 0%, #FFFFFF 26.82%);
	border-radius: 38rpx;
	padding: 56rpx 28rpx;
	box-sizing: border-box;
	position: relative;
	.popup-box{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		max-height: calc(100vh - 785rpx);
		min-height: 300rpx;
		.result-title{
			font-weight: 600;
			font-size: 40rpx;
			color: #D3A458;
		}
		.result-content{
			font-size: 24rpx;
			text-align: center;
			margin: 46rpx 0rpx;
			.line{
				height: 30rpx;
			}
			.result-text{
				line-height: 40rpx;
			}
			.result-tip{
				.filed{
					font-weight: 500;
					color: #D3A458;
					margin: 28rpx 0rpx 10rpx
				}
				.text{
					line-height: 40rpx;
				}
			}
			image{
				width: 200rpx;
				height: 200rpx;
				margin-top: 10rpx;
			}
		}
		.content-pad{
			padding-bottom: 40rpx;
		}
		.result-popup-goto {
		  font-size: 20rpx;
		  text-align: center;
		  text-decoration: underline;
		  color: #D3A458;
		}
		.result-pad{
			margin-top: -20rpx;
		}
		.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;
		}
		
	}
	.close {
	  position: absolute;
	  bottom: -134rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 56rpx;
	  height: 56rpx;
	}
}
</style>
