<template>
	<view class="register-container">
		<view class="register-header">
			<text class="register-title">用户注册</text>
			<text class="register-subtitle">请填写以下信息完成注册</text>
		</view>

		<!-- 租户选择 -->
		<!-- <view class="form-item">
			<picker @change="onTenantChange" :value="tenantIndex" :range="tenantList" range-key="companyName">
				<view class="picker">
					{{ registerForm.tenantId ? selectedTenant.companyName : '请选择租户' }}
				</view>
			</picker>
		</view> -->

		<!-- 用户名 -->
		<view class="form-item">
			<input v-model="registerForm.username" placeholder="请输入用户名" class="input" placeholder-class="placeholder" />
		</view>

		<!-- 手机号 -->
		<view class="form-item">
			<input v-model="registerForm.phoneNumber" placeholder="请输入手机号" class="input" placeholder-class="placeholder"
				type="number" maxlength="11" />
		</view>

		<!-- 密码 -->
		<view class="form-item">
			<input v-model="registerForm.password" password placeholder="请输入密码" class="input"
				placeholder-class="placeholder" />
		</view>

		<!-- 确认密码 -->
		<view class="form-item">
			<input v-model="confirmPassword" password placeholder="请确认密码" class="input"
				placeholder-class="placeholder" />
		</view>
		<!-- 图形验证码 -->
		<view class="form-item code-item">
			<input v-model="registerForm.code" placeholder="请输入验证码" class="input code-input"
				placeholder-class="placeholder" />
			<image :src="codeUrl" class="code-image" mode="aspectFit" @tap="getCode" />
		</view>

		<!-- 注册按钮 -->
		<button :loading="loading" :disabled="loading" class="register-btn" @tap="handleRegister">
			{{ loading ? '注册中...' : '立即注册' }}
		</button>

		<!-- 已有账号，去登录 -->
		<view class="login-link" @tap="goToLogin">
			<text>已有账号？去登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registerForm: {
					tenantId: '000000',
					username: '',
					password: '',
					phoneNumber: '',
					grantType: 'xcx',
					userType: 'sys_user',
					code: '',
					uuid: '',
					clientId: '1400a724f627ddc73d8f4dd344f80a5e',

				},
				confirmPassword: '',
				tenantList: [], // 租户列表
				tenantIndex: -1,
				loading: false, // 加载状态
				codeUrl: '', // 验证码图片
				loading: false, // 加载状态
				captchaEnabled: true, // 是否启用验证码
			}
		},
		computed: {
			// 当前选中的租户
			selectedTenant() {
				return this.tenantList[this.tenantIndex] || {}
			}
		},
		onLoad() {
			// this.getTenantList(),
			this.getCode()
		},
		methods: {

			// 获取验证码
			async getCode() {
				try {
					console.log('开始获取验证码...');
					const res = await uni.request({
						url: 'https://api.buzhiyushu.cn/auth/code',
						method: 'GET'
					})
					console.log('验证码响应:', res);

					if (res && res[1] && res[1].data) {
						const data = res[1].data
						if (!data.data.captchaEnabled) {
							this.captchaEnabled = false
							return
						}
						if (data.data.img && data.data.uuid) {
							this.codeUrl = 'data:image/gif;base64,' + data.data.img
							this.registerForm.uuid = data.data.uuid
						} else {
							uni.showToast({
								title: '获取验证码失败',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '获取验证码失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取验证码出错:', error)
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					})
				}
			},
			// 获取租户列表
			// async getTenantList() {
			// 	try {
			// 		console.log('开始获取租户列表...');
			// 		const res = await uni.request({
			// 			url: 'http://test.api.buzhiyushu.cn/auth/tenant/list',
			// 			method: 'GET'
			// 		})
			// 		console.log('租户列表响应:', res[1]);
			// 		if (res && res[1] && res[1].data && res[1].data.code === 200) {
			// 			const data = res[1].data.data;
			// 			if (!data.tenantEnabled) {
			// 				this.tenantList = [{
			// 					companyName: '系统未启用多租户模式',
			// 					tenantId: ''
			// 				}];
			// 				return;
			// 			}
			// 			// this.tenantList = data.voList || [{
			// 			// 	companyName: '请选择租户',
			// 			// 	tenantId: ''
			// 			// }];
			// 			if (this.tenantList.length > 0) {
			// 				this.tenantIndex = 0;
			// 				this.registerForm.tenantId = this.tenantList[0].tenantId;
			// 			}
			// 		} else {
			// 			const msg = res && res[1] && res[1].data ? res[1].data.msg : '获取租户列表失败';
			// 			uni.showToast({
			// 				title: msg,
			// 				icon: 'none'
			// 			});
			// 			this.tenantList = [{
			// 				companyName: '获取租户列表失败',
			// 				tenantId: ''
			// 			}];
			// 		}
			// 	} catch (error) {
			// 		console.error('获取租户列表出错:', error);
			// 		uni.showToast({
			// 			title: '网络错误，请重试',
			// 			icon: 'none'
			// 		});
			// 		this.tenantList = [];
			// 	}
			// },

			// // 租户选择变化
			// onTenantChange(e) {
			// 	this.tenantIndex = e.detail.value
			// 	this.registerForm.tenantId = this.tenantList[this.tenantIndex].tenantId
			// },

			// 验证用户名是否已存在
			async checkUsername() {
				try {
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/auth/getUserName',
						method: 'POST'
					});

					if (err) {
						uni.showToast({
							title: '验证用户名失败',
							icon: 'none'
						});
						return false;
					}

					// 确保响应数据存在且格式正确
					if (!res || !res.data) {
						uni.showToast({
							title: '获取用户数据失败',
							icon: 'none'
						});
						return false;
					}

					// 确保users是数组类型
					const users = Array.isArray(res.data) ? res.data : [];
					const isExist = users.some(user => user.userName === this.registerForm.username);

					if (isExist) {
						uni.showToast({
							title: '用户名已存在，请更换',
							icon: 'none'
						});
						return false;
					}

					return true;
				} catch (error) {
					console.error('验证用户名出错:', error);
					uni.showToast({
						title: '验证用户名失败',
						icon: 'none'
					});
					return false;
				}
			},

			// 表单验证
			async validateForm() {
				// if (!this.registerForm.tenantId) {
				// 	uni.showToast({
				// 		title: '请选择租户',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (!this.registerForm.username.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return false
				}

				// 验证用户名是否已存在
				const usernameValid = await this.checkUsername();
				if (!usernameValid) {
					return false;
				}
				// if (!this.registerForm.phoneNumber.trim()) {
				// 	uni.showToast({
				// 		title: '请输入手机号',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				// 验证手机号格式
				// const phoneRegex = /^1[3-9]\d{9}$/
				// if (!phoneRegex.test(this.registerForm.phoneNumber)) {
				// 	uni.showToast({
				// 		title: '手机号格式不正确',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (!this.registerForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}
				if (this.registerForm.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					})
					return false
				}
				if (this.registerForm.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 处理注册
			async handleRegister() {
				if (!this.validateForm()) return

				// 先验证用户名是否存在
				const usernameValid = await this.checkUsername()
				if (!usernameValid) {
					return
				}

				this.loading = true
				try {
					console.log('开始注册，提交数据:', this.registerForm);
					// 使用数组解构获取响应
					const [err, res] = await uni.request({
						url: 'https://api.buzhiyushu.cn/auth/wxRegister',
						method: 'POST',
						data: this.registerForm,
						header: {
							clientId: '1400a724f627ddc73d8f4dd344f80a5e',
							isToken: 'false',
							isEncrypt: 'false',
							repeatSubmit: 'false'
						}
					})
					console.log('完整注册响应:', res);

					// 错误处理
					if (err || res.statusCode !== 200) {
						throw new Error(err?.errMsg || `请求失败 (${res.statusCode})`)
					}

					// 安全访问响应数据
					const responseData = res.data || {}
					console.log('处理后的响应数据111:', responseData)

					if (responseData.code === 200) {
						console.log('注册成功:')
						// 显示模态弹窗
						uni.showModal({
							title: '注册成功',
							content: '请到后台进行申请入驻',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									// 用户点击确定后跳转到登录页
									uni.navigateTo({
										url: '/pages/login/index'
									})
								}
							}
						})
					} else {
						// 显示具体错误信息
						uni.showToast({
							title: responseData.msg || `注册失败 (${responseData.code})`,
							icon: 'none'
						})
						this.getCode() // 刷新验证码
					}

				} catch (error) {
					console.error('注册过程异常:', error)
					uni.showToast({
						title: error.message || '注册请求异常',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 跳转到登录页
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.register-container {
		padding: 40rpx;
		min-height: 100vh;
		background: #f8f8f8;

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

			.register-title {
				font-size: 48rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}

			.register-subtitle {
				font-size: 28rpx;
				color: #666;
			}
		}

		.form-item {
			margin-bottom: 30rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

			.picker {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
			}

			.input {
				height: 80rpx;
				font-size: 32rpx;
			}

			&.code-item {
				display: flex;
				align-items: center;

				.code-input {
					flex: 1;
					margin-right: 20rpx;
				}

				.code-image {
					width: 200rpx;
					height: 80rpx;
				}
			}
		}

		.register-btn {
			margin-top: 60rpx;
			background: #007aff;
			color: #fff;
			border-radius: 50rpx;
			font-size: 34rpx;
		}

		.login-link {
			margin-top: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #007aff;
		}

		.placeholder {
			color: #999;
		}
	}

	view,
	text,
	image,
	input {
		box-sizing: border-box;
	}
</style>