<template>
	<uni-popup ref="_qiandaoPopupRef" type="center">

		<view class="popup-container">
			<view class="column popup-inner">
				<view class="popup-title">到场确认</view>
				<view style="height:40rpx;"></view>
				<view class="popup-h1">请确认预约参与者是否已到场</view>
				<view v-if="currentEvaluate.length > 0" class="participants-list">
					<view v-for="(item, index) in currentEvaluate" :key="index" class="participant-item">
						<view class="participant-info">
							<image :src="item.avatarImage || '/static/default-avatar.png'" class="participant-avatar"
								mode="aspectFill" />
							<text class="participant-name">{{ item.userName }}</text>
						</view>
						<view class="attendance-btn" :class="{ 'attended': item.isAttended }"
							@click="toggleAttendance(item, index)">
							<text class="attendance-text">
								{{ item.isAttended ? '已到场' : '未到场' }}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 5rpx;"></view>
			<view style="display: flex;justify-content: center;align-items: center;">
				<view
					style="background: #00AC4E;box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0,0,0,0.25);border-radius: 16rpx 16rpx 16rpx 16rpx;width: 478rpx;height: 70rpx;display: flex;justify-content: center;align-items: center;"
					@click="submit">
					<text
						style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;color: #FFFFFF;font-style: normal;text-transform: none;">提交</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		sqInterface
	} from '@/common/server/interface/sq.js'
	import {
		showModalConfirm
	} from '@/common/utils'
	import {
		userInfo
	} from '@/common/server/user.js'
	const _qiandaoPopupRef = ref(null)
	const evaluateList = ref([])
	const currentReservation = ref(null)

	const currentEvaluate = ref([])

	// 计算是否全部到场
	const isAllAttended = computed(() => {
		if (currentEvaluate.value.length === 0) return false
		return currentEvaluate.value.every(item => item.isAttended)
	})

	const show = async (reservation) => {
		currentReservation.value = reservation

		// 初始化参与者列表，过滤掉当前用户
		if (reservation && reservation.participants) {
			currentEvaluate.value = reservation.participants
				.filter(item => item.user_id != userInfo.value.id)
				.map(item => ({
					...item,
					isAttended: item.isAttended || true // 初始化签到状态
				}))
		} else {
			currentEvaluate.value = []
		}
		evaluateList.value = []
		_qiandaoPopupRef.value.open()
	}

	const close = () => {
		_qiandaoPopupRef.value.close()
	}

	// 切换参与者签到状态
	const toggleAttendance = (participant, index) => {
		participant.isAttended = !participant.isAttended
		console.log('切换签到状态:', participant.userName, participant.isAttended)
	}

	// 设置全部到场
	const setAllAttended = () => {
		currentEvaluate.value.forEach(item => {
			item.isAttended = true
		})
		console.log('设置全部到场')
	}

	const submit = async () => {
		var isSuccess = await showModalConfirm("签到提示", "确定提交签到数据吗？签到后将无法更改数据!");
		if (!isSuccess) {
			return;
		}
		uni.showLoading({
			title: '签到提交中...'
		})
		const payload = {
			reservation_id: currentReservation.value.id,
			attendeds: currentEvaluate.value.map(item => {
				return {
					user_id: item.user_id,
					isAttended: item.isAttended
				}
			})
		}
		console.log('签到数据:', payload)
		
		const result = await sqInterface.checkInReservation(payload)
		uni.hideLoading()
		
		if (result.success) {
			uni.showToast({
				title: result.message || '签到提交成功',
				icon: 'success'
			})
			close()
		} else {
			uni.showToast({
				title: result.message || '签到提交失败',
				icon: 'none'
			})
		}
	}

	defineExpose({
		show,
		close
	})
</script>

<style lang="scss" scoped>
	.popup-container {
		width: 700rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 830rpx;
	}

	.popup-inner {
		width: 90%;
		height: 700rpx;
		margin: 0 auto 0;
	}

	.popup-title {
		font-size: 26rpx;
		margin-top: 30rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #000000;
		font-style: normal;
		text-transform: none;
	}

	.popup-h1 {
		width: 476rpx;
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.panel-box {
		width: 100%;
		background-color: #F2F3F5;
		border-radius: 10rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.down-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: auto;
		margin-right: 20rpx;
	}

	.font-24 {
		font-size: 24rpx;
	}

	.action-row {
		margin-top: 50rpx;
		height: 80rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.action-btn {
		flex: 1;
		background-color: #1989FA;
		border-radius: 10rpx;
	}

	.info-tip {
		font-size: 24rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.row-center {
		align-items: center;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	/* 参与者列表样式 */
	.participants-list {
		margin-top: 20rpx;
		max-height: 300rpx;
		overflow-y: auto;
	}

	.participant-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.participant-item:last-child {
		border-bottom: none;
	}

	.participant-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.participant-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.participant-name {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.attendance-btn {
		width: 120rpx;
		height: 50rpx;
		border-radius: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f0f0f0;
		border: 2rpx solid #ddd;
		transition: all 0.3s ease;
	}

	.attendance-btn.attended {
		background-color: #00AC4E;
		border-color: #00AC4E;
	}

	.attendance-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.attendance-btn.attended .attendance-text {
		color: #FFFFFF;
	}

	/* 全部到场按钮样式 */
	.all-attended-btn {
		background: #6BB08A;
		box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.25);
		border-radius: 16rpx;
		width: 180rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s ease;
	}

	.all-attended-btn.all-attended {
		background: #00AC4E;
	}

	.all-attended-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
</style>