<template>
	<view>
		<view class="countdown">
			<view class="left">
				<text>报名截止时间：</text>
				<text class="padding-top-10">{{detailData.deadlineTime | date('yyyy-mm-dd')}}</text>
			</view>
			<view @click="apply" :class="[btnClass]" class="cu-btn  sm" style="border-radius: 12rpx;padding: 32rpx 35rpx;">
				<text style="font-size: 30rpx;" v-text="btnText"></text>
			</view>
		</view>
		<view class="" :style="{height:fixedHeight}"></view>
		<view class="content">
			<view class="title">
				<text class="name">{{detailData.name}}</text>
				<view class="time">
					<view class="">
						<text class="cuIcon-time padding-right-10"></text>
						<text>活动时间：{{detailData.beginTime | date('yyyy-mm-dd')}}</text>
						<text style="padding: 0 30rpx;">至</text>
						<text>{{detailData.endTime | date('yyyy-mm-dd')}}</text>
					</view>
					<view class="padding-top-10">
						<text class="cuIcon-people padding-right-10"></text>
						<text>可报名人数：{{detailData.peopleCount}}</text>
						
						<text style="padding-left: 100rpx;padding-right: 10rpx;" class="cuIcon-people "></text>
						<text>已报名人数：{{detailData.enrollCount}}</text>
					</view>
				</view>
			</view>
			<view class="desc ql-editor">
				<u-parse :html="detailData.content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fixedHeight:'',
				id:'',
				detailData:{},
				isEnd:false,//是否已结束
				isEnroll:false ,//是否已报名
				
				applyId:'',//报名记录的id，用于取消报名
			}
		},
		onLoad(options) {
			this.id=options.id || ''
			this.applyId=options.applyId || ''
			
			this.init()
		},
		computed:{
			btnClass(){
				if (this.isEnd) {
					//已结束
					return 'bg-gray'
				}
				if (this.isEnroll) {
					//已报名
					if (this.$isEmpty(this.applyId)) {
						return 'bg-pass'
					}else{
						return 'bg-orange'
					}
				}
				return 'bg-red'
			},
			btnText(){
				if (this.isEnd) {
					//已结束
					return '报名已结束'
				}
				if (this.isEnroll) {
					//已报名
					if (this.$isEmpty(this.applyId)) {
						return '已报名'
					}else{
						return '取消报名'
					}
				}
				return '我要报名'
			}
		},
		onReady() {
			this.$u.getRect('.countdown').then(res=>{
				this.fixedHeight=res.height+'px'
			})
		},
		methods: {
			init(){
				this.checkIsEnroll()
				this.fetchDetail()
			},
			async fetchDetail(){
				let res=await this.$api.party.activityDetail({id:this.id})
				this.detailData=res.data
				let now=this.$dateTime.createDate(new Date()).getTime()
				let deadlineTime=this.$dateTime.createDate(res.data.deadlineTime).getTime()
				if (now>deadlineTime) {
					this.isEnd=true
				}
			},
			async checkIsEnroll(){
				let params={
					enrollStatus:1,
					activityId:this.id,
					memberId:this.vuex_party_person.id
				}
				let res=await this.$api.party.checkIsEnroll(params)
				if (!this.$isEmpty(res.data.records[0])) {
					this.isEnroll=true
				}
			},
			apply(){
				if (this.isEnd) {
					this.$u.toast('报名已结束')
					return
				}
				if (!this.isEnd&&!this.isEnroll) {
					//未结束且未报名
					this.$dialog.showModal('确定要报名此活动吗？').then(res=>{
						let params={
							activityId:this.id,
							memberId:this.vuex_party_person.id
						}
						this.$api.party.activityenroll(params).then(res=>{
							if (res.success==true) {
								this.$u.toast('报名成功')
								this.init()
							}else{
								this.$u.toast(res.msg)
							}
						})
					})
					return
				}
				//已报名,取消报名
				if (this.$isEmpty(this.applyId)) {
					this.$u.toast('您已报名')
				}else{
					this.$dialog.showModal('确定要取消该活动麽').then(res=>{
						let params={
							id:this.applyId,
							activityId:this.id,
							memberId:this.vuex_party_person.id
						}
						this.$api.party.cancelEnroll(params).then(res=>{
							if (res.success==true) {
								this.$u.toast('取消成功')
								this.$util.isReloadAndBack()
							}else{
								this.$u.toast(res.msg)
							}
						})
					})
				}
			}
		}
	}
	
</script>

<style lang="scss">
	@import "@/assets/colorui/rich_text.scss";
	.countdown{
		position: fixed;
		top: -2rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		margin-bottom: 4rpx;
		border-bottom: 4rpx solid #F1F1F1;
		width: 100%;
		
		.left{
			color: $party-color;
			font-size: 34rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.content{
		padding: 20rpx;
		background-color: #FFFFFF;
		
		.title{
			padding:0 20rpx 20rpx;
			.name{
				font-size: 40rpx;
				font-weight: 800;
				line-height: 70rpx;
				padding-bottom: 50rpx;
			}
			.time{
				color: #8f8f8f;
				padding: 20rpx 0;
			}
		}
		
		.desc{
			line-height: 55rpx;
			font-size: 32rpx;
		}
	}
</style>
