<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh]">
		<block v-if="!loading">
			<view class="top bg-white pb-[40rpx]">
				<image :src="img(activityDetail.image)" class="w-[750rpx] h-[310rpx]" />
				<view class="text-[32rpx] bg-white font-bold px-[40rpx] pt-[30rpx]">{{activityDetail.title}}</view>
			</view>
			
			<view class="bg-white mt-[20rpx] px-[30rpx]">
				<view class="flex py-[20rpx] border-solid border-0 border-bottom-[2rpx]  border-[var(--page-bg-color)]">
					<view class="flex mr-[5rpx] leading-[40rpx]">
						<u-icon name="clock" color="text-gray-500" size="18" />
					</view>
					<view class="text-[28rpx] leading-[40rpx]">活动时间：{{activityDetail.start_time}}至{{activityDetail.end_time}}</view>
				</view>
				
				<view class="flex py-[20rpx] border-solid border-0 border-bottom-[2rpx] border-[var(--page-bg-color)]">
					<view class="flex mr-[5rpx] leading-[40rpx]">
						<u-icon name="account" color="text-gray-500" size="20" />
					</view>
					<view class="text-[28rpx] leading-[40rpx]">报名人数：已报名2人(限{{activityDetail.signup_nums}}人报名)</view>
				</view>
				<view class="flex py-[20rpx] border-solid border-0 border-bottom-[2rpx] border-[var(--page-bg-color)]">
					<view class="flex mr-[5rpx] leading-[40rpx]">
						<u-icon name="map" color="text-gray-500" size="20" />
					</view>
					<view class="text-[28rpx] leading-[40rpx]">活动地址：{{activityDetail.address}}</view>
				</view>
				<view class="flex py-[20rpx] border-solid border-0 border-bottom-[2rpx] border-[var(--page-bg-color)]">
					<view class="flex mr-[5rpx] leading-[40rpx]">
						<u-icon name="clock" color="text-gray-500" size="18" />
					</view>
					<view class="text-[28rpx] leading-[40rpx]">报名时间：{{activityDetail.signup_start_time}}至{{activityDetail.signup_end_time}}</view>
				</view>
				<view class="flex py-[20rpx] border-solid border-0 border-bottom-[2rpx] border-[var(--page-bg-color)]">
					<view class="flex mr-[5rpx] leading-[40rpx]">
						<u-icon name="calendar" color="text-gray-500" size="20" />
					</view>
					<view class="text-[28rpx] leading-[40rpx]">主办单位：{{activityDetail.organizer}}</view>
				</view>
			</view>
			
			<view class="px-[30rpx] py-[30rpx] bg-white p-[30rpx] mt-[20rpx]">
				<view class="text-[32rpx] font-bold mb-[30rpx]">活动内容</view>
				<u-parse :content="activityDetail.content" :tagStyle="style"></u-parse>
			</view>
			
			<view class="tab-bar-placeholder"></view>
			<view
				class=" w-[100%] flex justify-between py-[9rpx] px-[27rpx] bg-[#fff] box-border fixed left-0 bottom-0 tab-bar">
				<view class="flex items-center">
					<view class="flex flex-col justify-center items-center mr-[39rpx]" @click="redirect({ url: '/addon/xypm/pages/index' })">
						<u-icon name="home" color="text-gray-500" size="28" />
						<text class="text-[22rpx] mt-1">首页</text>
					</view>
					<view class="flex flex-col justify-center items-center mr-[39rpx]" @click="redirect({ url: '/addon/xypm/pages/content/hotline/list' })">
						<u-icon name="kefu-ermai" color="text-gray-500" size="25" />
						<text class="text-[22rpx] mt-1">客服</text>
					</view>
				</view>
				<view class="flex">
					<button class="!w-[400rpx] !h-[76rpx] text-sm !text-[#fff] !m-0 leading-[76rpx] rounded-full remove-border primary-btn-bg" @click="signupFn()" :disabled="activityDetail.is_signup">{{activityDetail.is_signup ? '已报名' : '我要报名'}}</button>
				</view>
			</view>
			<!-- 报名弹窗 -->
			<signup ref="signupRef" @confirm="confirmSignup" />
		</block>
		<u-loading-page :loading="loading" fontSize="16" color="#333"></u-loading-page>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { redirect, img } from '@/utils/common';
	import { getActivityDetail,signupActivity } from '@/addon/xypm/api/manage';
	import { getBuildAll } from '@/addon/xypm/api/member'
	import { useShare } from '@/hooks/useShare'
	import signup from './components/signup-popup.vue'
	
	const signupRef = ref()
	const { setShare, onShareAppMessage, onShareTimeline } = useShare()
	onShareAppMessage()
	onShareTimeline()

	let activityDetail = ref<Array<any>>([]);
	let buildList = ref<Array<any>>([]);
	let loading = ref<boolean>(true);
	let style = {
		h2: 'margin-bottom: 20rpx;',
		p: 'margin-bottom: 10rpx;line-height: 1.5;',
		img: 'margin: 20rpx 0;',
	};
	
	onLoad((option) => {
		loading.value = true;
		getActivityDetail(option.activity_id).then((res) => {
			activityDetail.value = res.data;
			loading.value = false;
			let share = {
				title: activityDetail.value.title,
				desc: activityDetail.value.title,
				url: activityDetail.value.image
			}
            uni.setNavigationBarTitle({
                title: activityDetail.value.title
            })
			setShare({
				wechat: {
					...share
				},
				weapp: {
					...share
				}
			});
		});
	})
	
	onShow(() => {
		getBuildAll().then(res => {
			buildList.value = res.data
		})
	})
	
	const signupFn = () =>{
		console.log('报名');
		if(buildList.value.length == 0){
			uni.showModal({
				title: '提示',
				content: '请先绑定房产',
				confirmText:'去绑定',
				success: res => {
					if (res.confirm) {
						redirect({ url: '/addon/xypm/pages/member/build/bind' })
					}else{
						uni.navigateBack({
							delta: 1
						});
					}
				}
			})
		}else{
			signupRef.value.open();
		}
	}
	
	// 确认报名
	const confirmSignup = (data : any) => {
		
		console.log(data);
		data['activity_id'] = activityDetail.value.activity_id;
		signupActivity(data).then(() => {
		   signupRef.value.close();
		   uni.showModal({
		   	title: '提示',
		   	content: '报名成功',
			cancelText:'首页',
		   	confirmText:'查看',
		   	success: res => {
		   		if (res.confirm) {
		   			redirect({ url: '/addon/xypm/pages/manage/activity/signup' })
		   		}else{
		   			redirect({ url: '/addon/xypm/pages/index' })
		   		}
		   	}
		   })
		})
	}
</script>
<style>
	@import '@/addon/xypm/styles/common.scss';
</style>