<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>
</template>

<script>
	import {applyDetail} from '@/api/OneStopCommunity/apply.js'
	export default{
		data(){
			return{
				activityInfo:{},//活动信息
				applyInfo:{},//报名信息
				headcount: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;
				}
			}
		},
		onLoad(option) {
			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;
				}
			}
		}
	}
</style>