<template>
	<uni-popup ref="popup" type="center">
		<view class="column center" style="width: 680rpx; background: #F7F7F7; border-radius: 10rpx; padding: 20rpx;">

			<text style="">预约信息</text>

			<view class="column card" style="width: 100%; height: 180rpx;">
				<view class="row lable" style="margin-top: 20rpx; align-items: center; margin-left: 20rpx;">
					<text>发起者</text>
					<image :src="initiatorInfo.avatarImage || ''"
						style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx;"
						mode=""></image>
					<text style="margin-left: 15rpx;">{{ initiatorInfo.userName || '' }}</text>
				</view>
				<view class="row lable" style="margin-top: 30rpx; align-items: center; margin-left: 20rpx;">
					<text>参与者</text>

					<view class="row" v-for="(item, index) in participantList" :key="index"
						style="align-items: center;">

						<view class="" style="position: relative; width: 50rpx; height: 50rpx; display: flex;">
							<image :src="item.avatarImage || ''" @click="openUserPop(item)"
								style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx; position: absolute;"
								mode=""></image>

							<view v-if="item.userBlackStatus === 1" class="center"
								style="width: 50rpx; height: 20rpx; background-color: #FFB7B7; position: absolute; left: 40%; top: -10rpx;">
								<text style="font-size: 10rpx;">黑名单</text>
							</view>
						</view>
					</view>

				</view>

			</view>


			<view class="column card lable" style="width: 100%;padding-bottom:20rpx;">

				<view class="row lable" style="justify-content: space-between; margin: 20rpx;">
					<text>开始时间</text>
					<text>{{ formatTime(reservationData.start_time) }}</text>
				</view>
				<view class="row lable" style="justify-content: space-between; margin: 0 20rpx;">
					<text>结束时间</text>
					<text>{{ formatTime(reservationData.end_time) }}</text>
				</view>
				<text style="margin:20rpx 20rpx 0;">合计：{{
					formatDuration(reservationData.duration_minutes) }}</text>

			</view>

			<view class="column card lable" style="width: 100%;">
				<text style="margin: 20rpx 20rpx 10rpx;">房间号：{{ reservationData.room_name || ''
				}}</text>
				<text style="margin: 10rpx 20rpx;">人数：{{ reservationData.player_count || 0 }}人</text>
				<text style="margin: 10rpx 20rpx;">玩法类型：{{ reservationData.game_type || '' }}</text>
				<text style="margin: 10rpx 20rpx;">具体规则：{{ reservationData.game_rule || '' }}</text>
				<text style="margin: 10rpx 20rpx 20rpx;">补充信息：{{ reservationData.extra_info || '无' }}</text>
			</view>

			<view class="column card lable" style="width: 100%; ">
				<text style="margin: 20rpx 20rpx 10rpx;">是否禁烟：{{
					getSmokingText(reservationData.is_smoking) }}</text>
				<text style="margin: 10rpx 20rpx;">性别：{{ getGenderText(reservationData.gender_limit) }}</text>
				<text style="margin: 10rpx 20rpx;">年龄范围：{{
					getAgeRangeText(reservationData.min_age, reservationData.max_age) }}</text>
				<text style="margin: 10rpx 20rpx 20rpx;">信誉：≧{{ reservationData.credit_limit || 0 }}</text>
			</view>

			<view class="column card lable" style="width: 100%; ">
				<text style="margin: 20rpx 20rpx 10rpx; ">鸽子费：{{ reservationData.deposit_fee || 0
				}}元</text>
				<text
					style="margin: 10rpx 20rpx 20rpx; color: #9F9F9F;">组局成功后若有牌友未赴约，其鸽子费平均分给其他牌友。组局成功或失败后鸽子费将全额返还。</text>
			</view>

			<view class="row" v-if="isAddhandleJoin == 0" style="width: 100%; margin-top: 30rpx;">
				<view class="center" @click="close"
					style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
				</view>
				<view class="center" @click="handleJoin"
					style="height: 80rpx; flex: 3; background-color: #1989FA; border-radius: 10rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">参与组局</text>
				</view>
			</view>
			<view class="row" v-if="isAddhandleJoin == 1" style="width: 100%; margin-top: 30rpx;">
				<view class="center" @click="close"
					style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
				</view>
				<view class="center" @click="exitJoin"
					style="height: 80rpx; flex: 3; background-color: #1989FA; border-radius: 10rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">退出组局</text>
				</view>
			</view>
			<view class="row" v-if="isAddhandleJoin == 2" style="width: 100%; margin-top: 30rpx;">
				<view class="center" @click="close"
					style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
				</view>

				<view class="center" @click="cancelJoin"
					style="height: 80rpx; flex: 3; background-color: #1989FA; border-radius: 10rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">取消组局</text>
				</view>
				<view class="center"
					style="height: 80rpx; flex: 1; background-color:#00AC4E; border-radius: 10rpx;margin-left: 20rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">分享</text>
					<button style="width:100%;height:80rpx;position: absolute; background-color: transparent;"
						open-type="share" :data-item="reservationData" @click.stop></button>
				</view>
			</view>
			<view class="row" v-if="isAddhandleJoin == 3" style="width: 100%; margin-top: 30rpx;">
				<view class="center" @click="close"
					style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
					<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue'
import { userInfo, isLogin } from '@/common/server/user'
import { showModalConfirm, requestSubscribeMessage, requestPayment } from '@/common/utils'
import { getSubscribeMessage } from '@/common/server/config'
import { usePay } from '@/common/server/interface/user'
import { joinReservation, cancelReservation } from '@/common/server/interface/sq'

// 组件引用
const popup = ref(null)

// 预约数据
const reservationData = ref({})

// 计算属性：发起者信息
const initiatorInfo = computed(() => {
	if (reservationData.value.participants && reservationData.value.participants.length > 0) {
		return reservationData.value.participants.find(p => p.role === 1) || {}
	}
	return {}
})

// 计算属性：参与者列表
const participantList = computed(() => {
	if (reservationData.value.participants && reservationData.value.participants.length > 0) {
		return reservationData.value.participants.filter(p => p.role === 0) || []
	}
	return []
});

var isAddhandleJoin = ref(0);
// 显示弹窗
const show = (item) => {
	console.log("itemitemitemitem", item)
	reservationData.value = item || {}
	isAddhandleJoin.value = 0;
	if (userInfo.value != null) {
		var _initiatorInfo = item.participants.find(p => p.role === 1);
		if (_initiatorInfo != null) {
			if (userInfo.value.id == _initiatorInfo.user_id) {
				isAddhandleJoin.value = 2;
			}
		}
		var _joinInfo = item.participants.find(p => p.role === 0);
		if (_joinInfo != null) {
			if (userInfo.value.id == _joinInfo.user_id) {
				isAddhandleJoin.value = 1;
			}
		}
	}
	popup.value.open()
}

// 关闭弹窗
const close = () => {
	popup.value.close()
}

// 格式化时间
const formatTime = (timeStr) => {
	if (!timeStr) return ''
	// 将 "2025/09/13 21:09:43" 格式转换为 "2025/09/13 21：09"
	const date = new Date(timeStr)
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	const hours = String(date.getHours()).padStart(2, '0')
	const minutes = String(date.getMinutes()).padStart(2, '0')
	return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 格式化时长
const formatDuration = (minutes) => {
	if (!minutes) return '0分钟'
	const hours = Math.floor(minutes / 60)
	const mins = minutes % 60
	if (hours > 0) {
		return mins > 0 ? `${hours}小时${mins}分钟` : `${hours}小时`
	}
	return `${mins}分钟`
}

// 获取禁烟文本
const getSmokingText = (isSmoking) => {
	return isSmoking === 1 ? '禁烟' : '不禁烟'
}

// 获取性别限制文本
const getGenderText = (genderLimit) => {
	switch (genderLimit) {
		case 0:
			return '不限'
		case 1:
			return '男'
		case 2:
			return '女'
		default:
			return '不限'
	}
}
const getAgeRangeText = (minAge, maxAge) => {
	if (minAge == 0 && maxAge == 0) {
		return "不限";
	}
	let s = "";
	if (minAge == 0) {
		s = "不限";
	} else {
		s = minAge + "岁";
	}
	s += " ~ ";
	if (maxAge == 0) {
		s += "不限";
	} else {
		s += maxAge + "岁";
	}
	return s;
}
// 处理加入组局
const handleJoin = async () => {
	// 检查登录状态
	var isLoginSuccess = await isLogin();
	if (!isLoginSuccess) {
		close();
		uni.navigateTo({
			url: '/pages/me/login'
		});
		return;
	}

	try {
		// 获取订阅消息
		var messageId = await getSubscribeMessage(reservationData.value.deposit_fee);
		console.log("messageId", messageId);
		var subscribeMessage = await requestSubscribeMessage(messageId);
		console.log("message", subscribeMessage);

		// 显示加载状态
		uni.showLoading({
			title: '加入中...'
		});

		// 准备加入数据
		const joinData = {
			ReservationsId: reservationData.value.id,
			important_data: {}
		};

		var resPay = null;
		// 如果有鸽子费，需要先支付
		if (reservationData.value.deposit_fee > 0) {
			resPay = await usePay(reservationData.value.deposit_fee);
			if (resPay == null) {
				uni.hideLoading();
				uni.showToast({
					title: '鸽子费订单创建失败，请重新尝试！',
					icon: 'none'
				});
				return;
			}
			subscribeMessage.result.paymentId = resPay.paymentId;
		}

		// 准备重要数据
		var important_data = "";
		if (subscribeMessage.result != null) {
			important_data = JSON.stringify(subscribeMessage.result);
		}
		joinData.important_data = important_data;

		// 调用加入预约接口
		const result = await joinReservation(joinData);
		uni.hideLoading();
		console.log("join result", result);

		if (!result.success) {
			uni.showToast({
				title: result.message,
				icon: 'none'
			});
			return;
		}

		// 如果有鸽子费，进行支付
		if (reservationData.value.deposit_fee > 0 && resPay != null) {
			var payRes = await requestPayment(resPay);
			if (payRes.success) {
				uni.showToast({
					title: '鸽子费支付成功，加入组局成功！',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: '鸽子费支付失败，请重新加入！',
					icon: 'none'
				});
				await cancelReservation(result.data, "鸽子费支付失败，请重新加入！");
				return;
			}
		} else {
			uni.showToast({
				title: '加入组局成功！',
				icon: 'success'
			});
		}

		// 关闭弹窗
		close();
		// 触发刷新列表事件
		emit('refreshList');

	} catch (error) {
		uni.hideLoading();
		console.error('加入组局失败:', error);
		uni.showToast({
			title: '加入失败，请重试',
			icon: 'none'
		});
	}
}
//取消组局
const cancelJoin = async () => {
	var res = await showModalConfirm('提示', '确定要取消组局吗？')
	if (res) {
		try {
			// 显示加载状态
			uni.showLoading({
				title: '取消中...'
			});

			// 调用取消预约接口
			const result = await cancelReservation(reservationData.value.id, "发起者取消组局");
			uni.hideLoading();
			console.log("cancel result", result);

			if (result.success) {
				uni.showToast({
					title: '取消组局成功！',
					icon: 'success'
				});
				// 关闭弹窗
				close();
				// 触发刷新列表事件
				emit('refreshList');
			} else {
				uni.showToast({
					title: result.message,
					icon: 'none'
				});
			}
		} catch (error) {
			uni.hideLoading();
			console.error('取消组局失败:', error);
			uni.showToast({
				title: '取消失败，请重试',
				icon: 'none'
			});
		}
	}
}
//退出组局
const exitJoin = async () => {
	var res = await showModalConfirm('提示', '确定要退出组局吗？')
	if (res) {
		try {
			// 显示加载状态
			uni.showLoading({
				title: '退出中...'
			});

			// 调用取消预约接口（参与者退出）
			const result = await cancelReservation(reservationData.value.id, "参与者退出组局");
			uni.hideLoading();
			console.log("exit result", result);

			if (result.success) {
				uni.showToast({
					title: '退出组局成功！',
					icon: 'success'
				});
				// 关闭弹窗
				close();
				// 触发刷新列表事件
				emit('refreshList');
			} else {
				uni.showToast({
					title: result.message,
					icon: 'none'
				});
			}
		} catch (error) {
			uni.hideLoading();
			console.error('退出组局失败:', error);
			uni.showToast({
				title: '退出失败，请重试',
				icon: 'none'
			});
		}
	}
}
// 打开用户信息弹窗
const openUserPop = (user) => {
	// 触发父组件的用户信息弹窗事件
	emit('openUserPop', user)
}

// 定义事件
const emit = defineEmits(['openUserPop', 'refreshList'])

// 暴露方法给父组件
defineExpose({
	show,
	close
})
</script>

<style lang="scss" scoped>
.column {
	display: flex;
	flex-direction: column;
}

.row {
	display: flex;
	flex-direction: row;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.card {
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.25);
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	margin-top: 20rpx;
}

.lable {
	font-family: PingFang SC, PingFang SC;
	font-size: 22rpx;

}
</style>
