<template>
	<view class="register-container" v-if="formData">
		<view class="main">
			<!-- 标题 -->
			<view class="title">
				<view class="title-main">用户注册</view>
				<view class="title-sub">创建您的个人账户</view>
			</view>

			<!-- 表单 -->
			<form @submit="onSubmit">
				<!-- 手机号 -->
				<view class="form-item">
					<text class="label">手机号</text>
					<input class="input" type="tel" placeholder="请输入手机号" v-model="formData.tel" maxlength="11" />
				</view>

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

				<!-- 确认密码 -->
				<view class="form-item">
					<text class="label">确认密码</text>
					<input class="input" type="password" placeholder="请再次输入密码" v-model="formData.confirmPassword" />
				</view>

				<!-- 真实姓名 -->
				<view class="form-item">
					<text class="label">真实姓名</text>
					<input class="input" type="text" placeholder="请输入真实姓名" v-model="formData.name" />
				</view>

				<!-- 身份证号 -->
				<view class="form-item">
					<text class="label">身份证号</text>
					<input class="input" type="text" placeholder="请输入身份证号" v-model="formData.sfz" />
				</view>

				<!-- 银行卡号 -->
				<view class="form-item">
					<text class="label">银行卡号</text>
					<input class="input" type="text" placeholder="请输入银行卡号" v-model="formData.card_number" />
				</view>

				<!-- 银行名称 -->
				<view class="form-item">
					<text class="label">银行名称</text>
					<input class="input" type="text" placeholder="请输入银行名称" v-model="formData.bank_name" />
				</view>

				<!-- 上传收款信息图片 -->
				<view class="form-item upload-item">
					<text class="label">上传收款信息图片</text>
					<view class="upload-box" @click="chooseImage">
						<image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image>
						<span v-else>
							<text class="upload-text">点击上传图片</text>
							<text class="upload-tip">支持JPG、PNG格式</text>
						</span>
					</view>
				</view>

				<!-- 短信验证码 -->
				<view class="form-item">
					<text class="label">短信验证码</text>
					<view class="code-input">
						<input class="input-short" type="number" placeholder="请输入验证码" v-model="formData.verifyCode"
							maxlength="6" />
						<button class="send-btn" :disabled="sending" @click="sendVerifyCode">
							{{ sending ? '发送中...' : '发送验证码' }}
						</button>
					</view>
				</view>

				<!-- 注册按钮 -->
				<button class="register-btn" @click="onSubmit()">注册</button>

				<!-- 登录跳转 -->
				<view class="login-link">
					<text>已有账号？</text>
					<text class="link" @click="gotoLogin">立即登录</text>
				</view>
			</form>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		MemberRegister,
		UpFileNoLogin,
		GetBaseUrl,SmsSendCode
	} from "@/api"
	import {
		onShow
	} from "@dcloudio/uni-app"
	let formData = ref({
		tel: '',
		password: '',
		confirmPassword: '',
		name: '',
		sfz: '',
		card_number: '',
		bank_name: '',
		verifyCode: '',
		res_bank_img: ''
	})
	let sending = ref(false)
	let imageUrl = ref('') // 上传图片路径

	// 上传图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0];
				// imageUrl.value = tempFilePath;
				// 这里可以上传到服务器
				console.log('上传图片:', tempFilePath);
				uni.showLoading({
					title: ''
				})
				uni.uploadFile({
					url: UpFileNoLogin(), // 替换为你的后端接口地址
					filePath: tempFilePath,
					name: 'file', // 后端接收字段名，通常叫 file、image、avatar 等
					success: (uploadRes) => {
						uni.hideLoading()
						console.log('上传成功:', uploadRes);
						const data = JSON.parse(uploadRes.data); // 注意：uploadRes.data 是字符串
						// 假设后端返回 { url: "https://xxx.jpg" }

						if (data.status === true && data.data) {
							imageUrl.value = GetBaseUrl() + data.data; // 使用服务器返回的真实 URL
							formData.value.res_bank_img = data.data
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('上传失败:', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
				});
			}
		});
	}

	// 发送验证码
	const sendVerifyCode = () => {
		if (!formData.value.tel) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}

		sending.value = true;
		// 模拟发送验证码
		SmsSendCode({
			tel: formData.value.tel
		}).then(res => {
			 sending.value = false;
			if (res.status) {
			
			 uni.showToast({
			 	title: '验证码已发送',
			 	icon: 'success'
			 });
			}
		})
		 
	}

	// 提交注册
	const onSubmit = () => {

		// 基本验证
		if (!formData.value.tel) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		if (!formData.value.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return;
		}
		if (formData.value.password !== formData.value.confirmPassword) {
			uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			});
			return;
		}
		if (!formData.value.name) {
			uni.showToast({
				title: '请输入真实姓名',
				icon: 'none'
			});
			return;
		}
		if (!formData.value.sfz) {
			uni.showToast({
				title: '请输入身份证号',
				icon: 'none'
			});
			return;
		}
		if (!formData.value.card_number) {
			uni.showToast({
				title: '请输入银行卡号',
				icon: 'none'
			});
			return;
		}
		if (!formData.value.bank_name) {
			uni.showToast({
				title: '请输入银行名称',
				icon: 'none'
			});
			return;
		}
		if (!formData.value.verifyCode) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			});
			return;
		}

		// 此处可调用接口提交数据
		console.log('注册数据:', formData.value);
		MemberRegister({
			info: formData.value
		}).then(res => {
			if (res.status) {
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				});
				uni.navigateTo({
					url: '/pages/login'
				});
			}
		})

	}

	// 跳转登录页
	const gotoLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	}
</script>

<style scoped lang="scss">
	.register-container {
		background: linear-gradient(135deg, #E1EBFB, #f0f9ff);
		padding-top: 20rpx;
	}

	.main {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		width: 80%;
		margin: 0 auto;
	}

	.title {
		text-align: center;
		margin-bottom: 40rpx;

		.title-main {
			font-size: 40rpx;
			font-weight: bold;
			color: #1a56db;
		}

		.title-sub {
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}

	.form-item {
		margin-bottom: 32rpx;
		position: relative;

		.label {
			display: block;
			font-size: 26rpx;
			color: #333;
			margin-bottom: 12rpx;
		}

		.input {
			width: 100%;
			height: 80rpx;
			border: 1px solid #ddd;
			border-radius: 8rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			box-sizing: border-box;
		}

		.input-short {
			width: 360rpx;
			height: 80rpx;
			border: 1px solid #ddd;
			border-radius: 8rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			line-height: 60rpx;
			box-sizing: border-box;
		}

		.code-input {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}

		.send-btn {
			width: 200rpx;
			height: 60rpx;
			background-color: #0047e5;
			color: white;
			border-radius: 8rpx;
			font-size: 26rpx;
			line-height: 60rpx;
			border: none;
			margin-left: 20rpx;
			background-color: #0047e5;
			color: white;
			font-size: 26rpx;
			border: none;
			border-radius: 8rpx;
			transition: background-color 0.3s;
		}

		.send-btn:disabled {
			background-color: #ccc;
			cursor: not-allowed;
		}

		.upload-box {
			width: 100%;
			height: 160rpx;
			border: 2rpx dashed #ddd;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 26rpx;
			background-color: #f9f9f9;
		}

		.upload-icon1 {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 10rpx;
		}

		.upload-text {
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}

		.upload-tip {
			font-size: 22rpx;
		}
	}

	.register-btn {
		width: 100%;
		height: 80rpx;
		background-color: #0047e5;
		color: white;
		border-radius: 8rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		margin: 30rpx 0;
		font-weight: bold;
	}

	.login-link {
		text-align: center;
		font-size: 24rpx;
		color: #666;
		margin-top: 20rpx;
	}

	.login-link .link {
		color: #0047e5;
		font-weight: bold;
		margin-left: 10rpx;
	}
</style>