<!-- pages/queue/index.vue -->
<template>
	<view class="queue-container">
		<!-- 页面标题 -->
		<div class="top-div">
			<div></div>
			<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="backToIndex">
				<uni-icons type="arrow-left" size="18" color="#0099ff" style="margin-right: 5px;"></uni-icons>返回
			</tn-button>
		</div>

		<!-- 表单区域 -->
		<view class="form-container">
			<form @submit="handleSubmit">
				<!-- 姓名输入 -->
				<view class="form-item">
					<text class="form-label">姓名</text>
					<input v-model="formData.name" class="form-input" placeholder="请输入您的真实姓名" type="text" maxlength="10"
						@blur="validateName" />
					<text v-if="nameError" class="error-text">{{ nameError }}</text>
				</view>

				<!-- 手机号码输入 -->
				<view class="form-item">
					<text class="form-label">手机号码</text>
					<input v-model="formData.phone" class="form-input" placeholder="请输入11位手机号码" type="number"
						maxlength="11" @blur="validatePhone" />
					<text v-if="phoneError" class="error-text">{{ phoneError }}</text>
				</view>

				<!-- 身份证号码输入 -->
				<view class="form-item">
					<text class="form-label">身份证号码</text>
					<IDCardInput v-model="formData.idCard" @change="validateIDCard" />
					<text v-if="idCardError" class="error-text">{{ idCardError }}</text>
				</view>

				<!-- 提交按钮 -->
				<button class="submit-btn" :class="{ 'disabled': !formValid }" :disabled="!formValid || isLoading"
					form-type="submit">
					<text v-if="!isLoading">下一步</text>
					<view v-else class="loading-wrapper">
						<uni-load-more :status="'loading'" color="#007AFF" size="20"></uni-load-more>
						<text>验证中...</text>
					</view>
				</button>
			</form>
		</view>

		<!-- 实名认证提示弹窗 -->
		<uni-popup ref="authPopup" type="center" :is-mask-click="false">
			<view class="popup-content auth-popup">
				<view class="popup-header">
					<text class="popup-title">实名认证提示</text>
				</view>
				<view class="popup-body">
					<text class="auth-icon">🔐</text>
					<text class="auth-message">您尚未完成实名认证</text>
					<text class="auth-detail">请先完成实名认证后才能办理业务</text>
				</view>
				<view class="popup-footer">
					<button class="popup-btn secondary" @click="closeAuthPopup">稍后认证</button>
					<button class="popup-btn primary" @click="gotoRealNameAuth">去认证</button>
				</view>
			</view>
		</uni-popup>

		<!-- 网络错误提示 -->
		<uni-popup ref="errorPopup" type="center">
			<view class="popup-content error-popup">
				<text class="error-icon">⚠️</text>
				<text class="error-message">{{ errorMessage }}</text>
				<button class="error-btn" @click="closeErrorPopup">知道了</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import IDCardInput from '@/components/IDCardInput.vue';
	import {
		validateChineseName,
		validatePhoneNumber,
		validateIDCard
	} from '@/utils/validator';
	// import {
	// 	checkRealNameAuth,
	// 	getBusinessList
	// } from '@/utils/api';

	// 表单数据
	const formData = reactive({
		name: '',
		phone: '',
		idCard: ''
	});

	// 错误信息
	const nameError = ref('');
	const phoneError = ref('');
	const idCardError = ref('');

	// 状态控制
	const isLoading = ref(false);
	const errorMessage = ref('');

	// 弹窗引用
	const authPopup = ref(null);
	const errorPopup = ref(null);

	// 表单验证状态
	const formValid = computed(() => {
		return formData.name &&
			formData.phone &&
			formData.idCard &&
			!nameError.value &&
			!phoneError.value &&
			!idCardError.value;
	});

	// 验证姓名
	const validateName = () => {
		const result = validateChineseName(formData.name);
		nameError.value = result.valid ? '' : result.message;
	};

	// 验证手机号
	const validatePhone = () => {
		const result = validatePhoneNumber(formData.phone);
		phoneError.value = result.valid ? '' : result.message;
	};

	// 验证身份证
	const handleIdCardChange = (value, isValid) => {
		idCardError.value = isValid ? '' : '请输入正确的身份证号码';
	};

	// 表单提交
	const handleSubmit = async () => {
		// 验证所有字段
		validateName();
		validatePhone();

		if (nameError.value || phoneError.value || idCardError.value) {
			showError('请检查填写的信息是否正确');
			return;
		}

		isLoading.value = true;

		try {
			// 实名认证通过，跳转到业务选择页面
			uni.navigateTo({
				url: `/pages/queue/business-select?name=${encodeURIComponent(formData.name)}&phone=${formData.phone}&idCard=${formData.idCard}`,
				success: () => {
					// 清空表单数据
					Object.keys(formData).forEach(key => formData[key] = '');
				}
			});
		} catch (error) {
			console.error('实名验证失败:', error);
			showError(error.message || '网络异常，请稍后重试');
		} finally {
			isLoading.value = false;
		}
	};

	// 显示错误提示
	const showError = (message) => {
		errorMessage.value = message;
		errorPopup.value.open();
	};

	// 关闭错误提示
	const closeErrorPopup = () => {
		errorPopup.value.close();
	};

	// 关闭实名认证提示
	const closeAuthPopup = () => {
		authPopup.value.close();
	};

	// 跳转到实名认证页面
	const gotoRealNameAuth = () => {
		authPopup.value.close();
		uni.navigateTo({
			url: '/pages/auth/real-name'
		});
	};
	
	const backToIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	// 页面加载
	onLoad(() => {
		// 可以在这里预填充测试数据（开发环境）
		if (process.env.NODE_ENV === 'development') {
			formData.name = '测试用户';
			formData.phone = '13800138000';
			formData.idCard = '110101199003077436';
		}
	});
</script>

<style scoped>
	.queue-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}

	.page-header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.top-div {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 6vh 20px 10px 20px;
	}

	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #1a1a1a;
		display: block;
		margin-bottom: 16rpx;
	}

	.page-subtitle {
		font-size: 28rpx;
		color: #666;
		display: block;
	}

	.form-container {
		flex: 1;
		min-height: 100%;
		background: white;
		padding: 48rpx 40rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-label {
		display: block;
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		background: #fafafa;
		box-sizing: border-box;
	}

	.form-input:focus {
		border-color: #007AFF;
		background: white;
	}

	.error-text {
		display: block;
		font-size: 24rpx;
		color: #ff4444;
		margin-top: 8rpx;
	}

	.submit-btn {
		width: 100%;
		height: 96rpx;
		background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
		color: white;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: none;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit-btn.disabled {
		background: #cccccc;
		opacity: 0.6;
	}

	.loading-wrapper {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	/* 实名认证弹窗样式 */
	.auth-popup {
		width: 600rpx;
		max-width: 90vw;
		background: white;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.popup-header {
		padding: 40rpx 40rpx 20rpx;
		text-align: center;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.popup-body {
		padding: 40rpx;
		text-align: center;
	}

	.auth-icon {
		font-size: 80rpx;
		display: block;
		margin-bottom: 24rpx;
	}

	.auth-message {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 16rpx;
	}

	.auth-detail {
		font-size: 26rpx;
		color: #666;
		display: block;
		line-height: 1.5;
	}

	.popup-footer {
		display: flex;
		gap: 20rpx;
		padding: 0 40rpx 40rpx;
	}

	.popup-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		border: none;
	}

	.popup-btn.secondary {
		background: #f0f0f0;
		color: #666;
	}

	.popup-btn.primary {
		background: #007AFF;
		color: white;
	}

	/* 错误弹窗样式 */
	.error-popup {
		width: 500rpx;
		padding: 60rpx 40rpx;
		background: white;
		border-radius: 24rpx;
		text-align: center;
	}

	.error-icon {
		font-size: 60rpx;
		display: block;
		margin-bottom: 24rpx;
	}

	.error-message {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 40rpx;
		line-height: 1.5;
	}

	.error-btn {
		width: 100%;
		height: 80rpx;
		background: #007AFF;
		color: white;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}

	/* 响应式设计 */
	@media (max-width: 750px) {
		.queue-container {
			padding: 32rpx 24rpx;
		}

		.form-container {
			padding: 40rpx 32rpx;
		}
	}
</style>