<template>
	<view>
		<view class="whitebg">
			<image class="ccover" mode="aspectFit" :src="config.baseUrl_api+form.activityPic"></image>

			<view class="name">{{form.activityName}}
				<view v-if="isBuy" style="font-size: 32rpx;color: #1EC886;display: inline-block;float: right;">
					<uni-icons color="#1EC886" size="22" type="checkbox-filled"></uni-icons>已报名
				</view>
			
			</view>

			<view class="text-warning pp" v-if="form.isFree==1">
				<text v-if="form.allGold>0">金币{{form.allGold}}</text>
				<text v-if="form.allGold>0&&form.allScore>0">/</text>
				<text v-if="form.allScore>0">积分{{form.allScore}}</text>
				<text v-if="form.gold>0">/金币{{form.gold}}+积分{{form.score}}</text>
			</view>
			<view v-else class="text-warning pp">免费</view>
			<view class="pp">活动时间：{{form.startTime}} ～ {{form.endTime}}</view>
			<view class="pp">活动地址：{{form.address}}</view>
		</view>

		<view class="plane">
			<view class="phead">
				<view>
					<image class="tag01" src="@/course/img/tag01.png" style="width:30rpx;height: 30rpx;"></image>
					活动介绍
				</view>
				<view class="text-warning">讲师：{{form.speaker}}</view>
			</view>
			<view class="pbody">
				{{form.description}}
			</view>
		</view>

		<view style="height: 100rpx;"></view>
		<view class="fixedBottom">
			<button class="btn btn-submit" v-if="isBuy">已报名</button>
			<button class="btn btn-submit" v-else @click="goBill">立即报名</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,onShareAppMessage
	} from '@dcloudio/uni-app';
	import config from '@/config.js';
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import * as api from '@/common/api.js';
	const currUser = uni.getStorageSync('currUser');
	const form = ref({})
	const isBuy = ref(false)
	let shareId = '0'
	let goodsId
	onLoad((option) => {
		uni.showLoading({
			title: '加载中'
		})
		if (option.id) {
			goodsId = option.id
		}
		if (option.shareId) {
			console.log(option.shareId)
			shareId = option.shareId
		}
	})
	onShow(() => {
		if (goodsId)
			getData(goodsId)
	})
	onShareAppMessage(() => {
		return {
			title: form.value.activityName,
			path: `/course/activeDetail?id=${goodsId}&shareId=${currUser.userId}`,
			imageUrl: config.baseUrl_api+form.value.activityPic
		};
	});
	function getData(id) {
		api.getActiveById(id).then(res => {
			form.value = res.data
			uni.hideLoading()
			api.getUserIsPay({
				orderType: 1,
				goodsId: goodsId
			}).then(Response => {
				isBuy.value = Response.data
			})

		})
	}

	function goBill() {
		if(form.value.isFree=='1'){
			const obj = encodeURIComponent(JSON.stringify(form.value))
				let path = `/course/courseBill?form=${obj}&shareId=${shareId}`
				uni.navigateTo({
					url: path
				});
			
		} else {
			api.submitOrder({
				orderType: 1,
				goodsId: form.value.activityId,
				shareId:shareId,
				payType: "0"
			}).then(res => {
				uni.showModal({
					content:'报名成功！',
					success:function(respons){
						if(respons.confirm){
							getData(goodsId)
						}
					}
				})
			})
		}
	}
</script>

<style scoped lang="scss">
	.whitebg {
		background: #fff;
		padding: 25rpx;
	}

	.plane {
		background: #fff;
		width: 700rpx;
		border-radius: 15rpx;
		margin: 30rpx auto;
		padding: 25rpx;
		box-sizing: border-box;

		.phead {
			border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;
			padding: 0 0 15rpx;
			align-items: center;
			font-size: 30rpx;
			box-sizing: border-box;

			.text-warning {
				font-size: 28rpx;
			}

			.tag01 {}
		}

		.pbody {
			padding: 15rpx 0;
			box-sizing: border-box;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #4C5359;
		}
	}

	.wList {
		background: #fff;
		padding: 36rpx 23rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		width: 700rpx;
		margin: 0 auto 30rpx;
		position: relative;

		.pp {
			display: flex;
			color: #8F8E94;
			font-size: 24rpx;
			align-items: center;

			image {
				margin-right: 6rpx;
			}
		}

		.name {
			color: #2B3133;
			font-size: 30rpx;
			margin: 15rpx 0 0;
		}

		.playBtn {
			position: absolute;
			right: 24rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			height: 48rpx;
		}
	}

	.ccover {
		width: 700rpx;
		margin: 0 auto 30rpx;
		display: block;
		height: 320rpx;
		border-radius: 15rpx;
	}

	.whitebg {
		.name {
			font-size: 32rpx;
		}

		.pp {
			color: #8F8E94;
			font-size: 26rpx;
			margin: 10rpx 0 0;
		}

		.text-warning {
			color: #F39800;
		}
	}
</style>