<template>
	<view class="detail">
		<view class="box">
			<view class="up">
				<view>
					<view>活动信息</view>
				</view>
				<view>
					<text>活动主题：</text>
					<text>{{applyInfo.activityTheme}}</text>
				</view>
				<view>
					<text>活动时间：</text>
					<text>{{activityInfo.activityTime}}</text>
				</view>
				<view>
					<text>活动地点：</text>
					<text>{{activityInfo.activityPlace}}</text>
				</view>
				<view>
					<text>活动可容纳人数：</text>
					<text>{{activityInfo.galleryful}}人</text>
				</view>
				<view>
					<text>当前报名人数：</text>
					<text>{{applyInfo.numberApplicants}}人</text>
				</view>
			</view>
			<view class="lnthe">
				<view>
					具体要求
				</view>
				<view>
					<text>具体要求：</text>
					<text>{{activityInfo.specificRequirements}}</text>
				</view>
			</view>
			<view class="underthe">
				<view>
					<view>
						报名信息
					</view>
					<view v-if="applyInfo.auditStatus==1" class="active">报名通过</view>
					<view v-else-if="applyInfo.auditStatus==2" class="dark">不通过</view>
					<view v-else class="staydark">待审核</view>
				</view>
				<view>
					<text>报名人：</text>
					<text>{{applyInfo.applicant}}</text>
				</view>
				<view>
					<text>报名时间：</text>
					<text>{{applyInfo.registrationTime}}</text>
				</view>
			</view>
			<!-- <view v-if="applyInfo.auditStatus==1">
				<view>
					活动注意事项
				</view>
				<view>
					<text>请你于2024年06月12日，上午9点前，到综合楼1楼大厅集合，不允许迟到。</text>
				</view>
			</view> -->
		</view>
		
		<!-- 取消报名按钮 -->
		<view  v-if="canCancel()">
			<button class="cancel-btn" @click="cancelApply" 
				style="width: 100% !important; background-color: #ff4757 !important; color: white !important; 
				border: none !important; font-size: 18px !important; line-height: 2.55555556 !important; 
				border-radius: 5px !important; padding: 0 14px !important; box-sizing: border-box !important; 
				text-align: center !important; min-height: 46px !important; margin-top: 50px !important;">
				取消报名
			</button>
		</view>
	</view>
</template>

<script>
	import { applyDetail, cancelRegistration } from '@/api/OneStopCommunity/apply.js';
	export default{
		data(){
			return{
				activityInfo:{},//活动信息
				applyInfo:{},//报名信息
				headcount:null,
				recordId: null
			}
		},
		methods:{
			async getdetail(recordid){
				let res = await applyDetail(recordid)
				console.log(res)
				if(res.code==200){
					this.activityInfo=res.data.communityActivitiesList[0]
					this.applyInfo=res.data;
				}
			},
			// 判断是否可以取消报名
			canCancel() {
				// 只有待审核(0)或已通过(1)的报名可以取消，已拒绝(2)的不能取消
				if (this.applyInfo.auditStatus === 2) {
					return false; // 已拒绝的不能取消
				}
				
				// 检查报名截止时间
				if (this.activityInfo.signUpEndTime) {
					const now = new Date();
					const endTime = new Date(this.activityInfo.signUpEndTime);
					if (now > endTime) {
						return false; // 报名已截止
					}
				}
				
				return true;
			},
			// 取消报名
			cancelApply() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消报名吗？取消后如需重新报名，请在报名截止时间前重新提交申请。',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({
									title: '取消中...'
								});
								
								const result = await cancelRegistration(this.recordId);
								
								uni.hideLoading();
								
								if (result.code === 200) {
									uni.showToast({
										title: '取消报名成功',
										icon: 'success'
									});
									
									// 返回上一页并刷新
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								} else {
									uni.showToast({
										title: result.msg || '取消报名失败',
										icon: 'none'
									});
								}
							} catch (error) {
								uni.hideLoading();
								uni.showToast({
									title: '取消报名失败',
									icon: 'none'
								});
								console.error('取消报名失败:', error);
							}
						}
					}
				});
			}
		},
		onLoad(option) {
			this.recordId = option.recordid;
			this.getdetail(option.recordid)
		},
	}
</script>

<style lang="scss" scoped>
	.detail{
		min-height: 100vh;
		background-color: #F5F5F7;
		.box{
			padding: 40rpx;
			.up {
				background-color: white;
				border-radius: 16rpx;
				padding: 30rpx 40rpx 20rpx 40rpx;
				
				&>view:nth-child(1){
					view{
						font-size: 32rpx;
						font-weight: 700;
						color: #202020;
					}
					&>view:nth-child(2){
						
					}
				}
				&>view:nth-child(2){
					margin-top: 40rpx;
				}
				&>view:nth-child(n+2){
					font-size: 28rpx;
					line-height: 50rpx;
				}
			}
			.lnthe{
				background-color: white;
				border-radius: 16rpx;
				padding: 30rpx 20rpx 20rpx 40rpx;
				margin-top: 20rpx;
				&>view:nth-child(1){
					font-size: 32rpx;
					font-weight: 700;
				}
				&>view:nth-child(2){
					margin-top: 40rpx;
				}
			}
			.underthe{
				background-color: white;
				border-radius: 16rpx;
				padding: 30rpx 20rpx 20rpx 40rpx;
				margin-top: 20rpx;
				&>view:nth-child(1){
					font-size: 32rpx;
					font-weight: 700;
					display: flex;
					justify-content: space-between;
					.active{
						background-color: #E7FAF0;
						border: 1px solid #D0F5E0;
						font-size: 20rpx;
						color: #71E2A3;
						padding: 8rpx 18rpx;
					}
					.dark{
						background-color: #FFDBDB;
							border: 1px solid #FF9292;
							font-size: 20rpx;
							color:#FF9292;
							padding: 8rpx 18rpx;
					}
					.staydark{
						background-color: #FFF8E6;
							border: 1px solid #FFE399;
							font-size: 20rpx;
							color:#FFBA00;
							padding: 8rpx 18rpx;
					}
				}
				&>view:nth-child(2){
					margin-top: 40rpx;
				}
			}
			&>view:nth-child(4){
				background-color: white;
				border-radius: 16rpx;
				padding: 30rpx 20rpx 20rpx 40rpx;
				margin-top: 20rpx;
				color: #1890ff;
				&>view:nth-child(1){
					font-size: 32rpx;
					font-weight: 700;
				}
				&>view:nth-child(2){
					margin-top: 40rpx;
				}
			}
		}
		
		.cancel-btn {
			background-color: #ff4757 !important;
			color: white;
			margin-top: 100rpx;
		}
	}
</style>