<template>
	<view class="content">
		<view class="detail">
			<view class="top">
				<image class="back" src="/static/login/returnBack.png" @click="goBack()"></image>
				<view class="title">活动详情</view>
				<span class="empty"></span>
			</view>
			<view class="icon-with-name">
				<image :src="icon" class="icon" />
				<text class="name">{{name}}</text>
			</view>
			<view class="activity-production">
				<image class="activity-production-icon" src="/static/discover/production.png"></image>
				<text class="activity-production-text">活动内容:</text>
				<view class="production-detail">{{production}}</view>
			</view>
			<view class="activity-time">
				<image class="activity-production-icon" src="/static/discover/time.png"></image>
				<text class="activity-time-text">活动开始时间:</text>
				<view class="production-detail">{{startDate}}</view>
			</view>
			<view class="activity-time">
				<image class="activity-production-icon" src="/static/discover/time.png"></image>
				<text class="activity-time-text">活动结束时间:</text>
				<view class="production-detail">{{endDate}}</view>
			</view>
			<view class="activity-place">
				<image class="activity-production-icon" src="/static/discover/place.png"></image>
				<text class="activity-place-text">活动地点:</text>
				<view class="production-detail">{{place}}</view>
			</view>
			<view class="activity-object">
				<image class="activity-production-icon" src="/static/discover/object.png"></image>
				<text class="activity-object-text">参与人数:</text>
				<view class="production-detail">{{object}}</view>
			</view>
			<view class="activity-contact">
				<image class="activity-production-icon" src="/static/discover/contact.png"></image>
				<text class="activity-contact-text">联系方式:</text>
				<view class="production-detail">{{contact}}</view>
			</view>
		</view>
		<view class="btn">
			<button class="loginButton" @click="apply()">报名</button>
		</view>
	</view>
</template>

<script>
	let applyCode=200;
	export default {
		data() {
			return {
				userId: '644a643a0c801ca878983559',
				icon: '/static/icon/1.png',
				activityId: '64508598819ce8deee7ed255',
				name: '不会取名字',
				production: '111111111111111111111111111111111111111111',
				object: '0',
				startDate: '2023-05-03 19:00',
				endDate: '2023-05-03 19:00',
				place: '风雨操场',
				contact: '1612737522@qq.com'
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/team/main',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			async apply(){
				await uniCloud.callFunction({
						name: 'fe-team-applyActivity',
						data: {
							userId:this.userId,
							activityId: this.activityId
						}
					})
					.then(res => {
						console.log(res),
							this.applyCode = res.result.code,
							console.log(res.result.message),
							console.log(this.applyCode)
					})
					await this.showTT();
				
			},
			showTT(){
				if(this.applyCode==200){
					uni.showToast({
					title: '报名成功'
					});
				}
				else{
					uni.showToast({
					title: '您已报名，请勿重复报名',
					icon: 'none'
					});
				}
			}
		},
		onLoad(option) {
			this.userId=getApp().globalData.userId
			this.activityId=option.activityId
			console.log(option.activityId)
			uniCloud.callFunction({
					name: 'fe-team-activityDetail',
					data: {
						activityId: this.activityId
					}
				})
				.then(res => {
					console.log(res),
						this.name = res.result.data.username,
						this.production = res.result.data.content,
						this.startDate = res.result.data.startDate,
						this.endDate = res.result.data.endDate,
						this.object = res.result.data.participants,
						this.place = res.result.data.place,
						this.contact = res.result.data.contact,
						this.icon = res.result.data.icon
				})
		}

	}
</script>

<style>
	.content{
		padding-bottom: 30px;
	}
	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		margin-right: auto;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		font-size: 20px;
		margin-top: 10px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}

	.icon-with-name {
		width: 100%;
		height: 45px;
		margin-left: 10px;
		margin-top: 15px;
		margin-bottom: 20px;
		float: left;
		overflow: auto;

	}

	.icon {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		float: left;
	}

	.out-team {
		float: right;
		margin-right: 30px;
		width: 30px;
		margin-top: 11px;
		height: 30px;
	}

	.name {
		float: left;
		margin-bottom: auto;
		margin-left: 10px;
		margin-top: 9px;
		font-size: 18px;
		font-weight: bold;
		width: 60%;
	}

	.activity-production {
		margin-top: 10px;
	}

	.activity-production-text {
		font-weight: bold;
	}

	.activity-object {
		margin-top: 10px;
	}

	.activity-object-text{
		font-weight: bold;
	}

	.activity-contact-text {
		font-weight: bold;
	}

	.activity-time {
		margin-top: 10px;
	}

	.activity-time-text {
		font-weight: bold;
	}

	.activity-place {
		margin-top: 10px;
	}

	.activity-place-text {
		font-weight: bold;
	}

	.activity-contact {
		margin-top: 10px;
	}

	.activity-contact-text {
		font-weight: bold;
	}

	.activity-production-icon {
		width: 40px;
		height: 40px;
		margin-left: 30px;
	}

	.production-detail {
		width: 90%;
		background-color: rgb(245 154 35 / 30%);
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 5px;
		padding: 10px;
		/* 文字换行处理 */
		word-wrap: break-word;
		word-break: break-all;
	}

	.loginButton {
		width: 50%;
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 15px;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.loginButton::after {
		border: 0;
	}
	.btn{
		margin-bottom: 30px;
	}
</style>