<template>
	<view class="container">
		<view class="header">
			<view class="title">跑腿注册</view>
		</view>
		<view class="form">
			<view class="input-group" v-for="(field, index) in fields" :key="index">
				<view class="label">{{ field.label }}</view>
				<view class="input">
					<!-- 修改后的性别字段处理 -->
					<template v-if="field.model === 'gender'">
						<radio-group :value="formData.gender" @change="handleGenderChange" class="radio-group">
							<label class="radio-label">
								<view class="radio-wrapper">
									<radio value="男" color="#5e7dec" />
								</view>
								男
							</label>
							<label class="radio-label">
								<view class="radio-wrapper">
									<radio value="女" color="#5e7dec" />
								</view>
								女
							</label>

						</radio-group>
					</template>

					<!-- 配送范围字段 -->
					<template v-else-if="field.model === 'distributionScope'">
						<uni-data-select v-model="formData.distributionScope" :localdata="range" :clear="false"
							class="distribution-select"></uni-data-select>
					</template>


					<!-- 其他字段保持原样 -->
					<input v-else v-model="formData[field.model]" :placeholder="field.placeholder"
						class="styled-input" />
				</view>
			</view>
			<view class="button">
				<button @click="saveAddress" class="styled-button">点击注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiImageUrl
	} from '../../API/api';
	export default {
		data() {
			return {
				formData: {
					checkPassword: '',
					distributionScope: '',
					errandName: '',
					errandPhone: '',
					gender: '',
					userAccount: '',
					userPassword: ''
				},
				range: [{
						value: '1公寓',
						text: '1公寓'
					},
					{
						value: '2公寓',
						text: '2公寓'
					},
					{
						value: '3公寓',
						text: '3公寓'
					},
					{
						value: '4公寓',
						text: '4公寓'
					},
					{
						value: '5公寓',
						text: '5公寓'
					},
					{
						value: '6公寓',
						text: '6公寓'
					},
					{
						value: '7公寓',
						text: '7公寓'
					},
					{
						value: '8公寓',
						text: '8公寓'
					},
					{
						value: '9公寓',
						text: '9公寓'
					},
					{
						value: '10公寓',
						text: '10公寓'
					},
					{
						value: '11公寓',
						text: '11公寓'
					},
					{
						value: '12公寓',
						text: '12公寓'
					},
					{
						value: '育才大厦',
						text: '育才大厦'
					}
				],

				fields: [{
						label: '账户',
						model: 'userAccount',
						placeholder: '请输入账户'
					},
					{
						label: '密码',
						model: 'userPassword',
						placeholder: '请输入密码'
					},
					{
						label: '确认密码',
						model: 'checkPassword',
						placeholder: '请再次输入密码'
					},
					{
						label: '用户名称',
						model: 'errandName',
						placeholder: '请输入用户名称'
					},
					{
						label: '手机号',
						model: 'errandPhone',
						placeholder: '请输入手机号'
					},
					{
						label: '性别',
						model: 'gender',
						placeholder: '请选择性别'
					},
					{
						label: '配送范围',
						model: 'distributionScope',
						placeholder: '请选择配送范围'
					}
				]
			};
		},
		methods: {
			 handleGenderChange(e) {
			      // 将性别转换为数字
			      this.formData.gender = e.detail.value === '男' ? 0 : 1;
			    },


			saveAddress() {
				// 验证表单数据
				if (!this.validateForm()) {
					return; // validateForm内部已处理提示
				}

				const url = apiImageUrl + '/api/errand/add';
				const data = {
					checkPassword: this.formData.checkPassword,
					distributionScope: this.formData.distributionScope,
					errandName: this.formData.errandName,
					errandPhone: this.formData.errandPhone,
				   gender: this.formData.gender,
					userAccount: this.formData.userAccount,
					userPassword: this.formData.userPassword
				};

				uni.request({
					url,
					method: 'POST',
					data,
					header: {
						'Content-Type': 'application/json'
					},
					success(res) {
						console.log(res.data);
						if (res.data.code === 0) {
							uni.showToast({
								title: '注册成功！',
								duration: 2000,
								icon: "success"
							})
							uni.reLaunch({
								url:'/pages/login/login'
							})
						} else if (res.data.code === 40000) {
							uni.showToast({
								title: res.data.description,
								duration: 2000,
								icon: "fail"
							})
						}
					},
					fail(err) {
						console.error(err);
						uni.showModal({
							title: '注册失败', //提示标题
							content: '请重新输入', //提示内容
							//showCancel: true, //是否显示取消按钮
							// success: function (res) {
							//     if (res.confirm) {  //confirm为ture，代表用户点击确定
							//         console.log('点击了确定按钮');
							//     } else if (res.cancel) {  //cancel为ture，代表用户点击取消
							//         console.log('点击了取消按钮');
							//     }
							// }
						})
					}
				});
			},
			validateForm() {
				// 逐个字段校验并给出具体提示
				if (!this.formData.userAccount) {
					uni.showToast({
						title: '请输入账户',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.userPassword) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.userPassword.length < 8) {
					uni.showToast({
						title: '密码过短，至少8位',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.checkPassword) {
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					});
					return false;
				}
				if (this.formData.userPassword !== this.formData.checkPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.errandName) {
					uni.showToast({
						title: '请输入用户名称',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.errandPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.gender) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					});
					return false;
				}
				if (!this.formData.distributionScope) {
					uni.showToast({
						title: '请选择配送范围',
						icon: 'none'
					});
					return false;
				}
				return true;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;

		.title {
			font-size: 24px;
			font-weight: bold;
		}
	}

	.form {
		.input-group {
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			.label {
				flex: 1;
				font-size: 14px;
				margin-right: 20px;
			}

			.input {
				flex: 3;

				.styled-input {
					font-size: 14px;
					width: 100%;
					padding: 10px;
					background-color: rgba(255, 235, 59, 0.6);
					/* 淡黄色并带有透明度 */
					border: none;
					border-radius: 20px;
					/* 圆角 */
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
					/* 添加阴影以创建立体效果 */
					outline: none;
					transition: all 0.2s ease-in-out;

					&:focus {
						background-color: rgba(255, 235, 59, 0.8);
						/* 增加透明度 */
						box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
						/* 更强的阴影 */
					}
				}
			}
		}

		.button {
			margin-top: 20px;

			.styled-button {
				width: 100%;
				padding: 10px;
				background-color: #5e7dec;
				color: #fff;
				border: none;
				border-radius: 15px;
				cursor: pointer;
				font-size: 16px;
				line-height: inherit;
				transition: background-color 0.2s;

				&:hover {
					background-color: #5e7dec;
				}
			}
		}
	}

	/* 新增radio样式 */
	.radio-group {
		display: flex;
		align-items: center;
		height: 100%;

		.radio-label {
			display: flex;
			align-items: center;
			margin-right: 30px;
			font-size: 14px;

			/* 移除直接对radio的样式操作 */
			/* 改为通过包裹元素实现间距 */
			.radio-wrapper {
				display: inline-block;
				margin-right: 5px;
				transform: scale(0.9);
			}
		}
	}
	
	
	/* 新增下拉选择样式 */
		.distribution-select {
			width: 100%;
			.uni-select {
				padding: 10px;
				background-color: rgba(255, 235, 59, 0.6);
				border-radius: 20px;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
				
				&::after {
					border-color: #5e7dec; /* 下拉箭头颜色 */
				}
			}
		}

</style>