<template>
	<view class="content">
		<navbar title="司机注册" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="mt20">
			<!-- 基本信息 -->
			<view class="re-card-p32">
				<view class="re-from-line">
					<view class="re-from-label">所属区域</view>
					<view class="b-relative">
						<input 
							maxlength="6" 
							class="re-from-input" 
							placeholder="注册后不可更改" 
							disabled="true" 
							@tap="selectArea" 
							v-model="form.area" 
						/>
						<uv-icon name="map-pin" class="re-from-icon" color="#999999" size="32rpx"></uv-icon>
					</view>
				</view>
				
				<view class="re-from-line">
					<view class="re-from-label">您的姓名</view>
					<view class="b-relative">
						<input 
							maxlength="6" 
							class="re-from-input" 
							placeholder="请填写真实姓名" 
							v-model="form.name" 
						/>
						<uv-icon name="account" class="re-from-icon" color="#999999" size="32rpx"></uv-icon>
					</view>
				</view>
				
				<view class="re-from-line">
					<view class="re-from-label">手机号码</view>
					<view class="b-relative">
						<input 
							type="number" 
							maxlength="11" 
							class="re-from-input" 
							placeholder="请填写常用联系方式" 
							v-model="form.mobile" 
						/>
						<uv-icon name="phone" class="re-from-icon" color="#999999" size="32rpx"></uv-icon>
					</view>
				</view>
			</view>
			
			<!-- 驾驶证上传 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请点击下方图片上传您的驾驶证</view>
					<view class="re-card-show" @tap="showExample('driver1')">查看示例</view>
				</view>
				<input-image @success="onJszImageSuccess" />
				<view class="re-card-context">
					拍摄时<label>确保边框完整，字迹清晰，亮度均匀，无遮挡涂鸦</label>
				</view>
			</view>
			
			<!-- 操作证上传 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请点击下方图片上传您的操作证</view>
					<view class="re-card-show" @tap="showExample('driver2')">查看示例</view>
				</view>
				<input-image @success="onCzzImageSuccess" />
				<view class="re-card-context">
					拍摄时<label>确保边框完整，字迹清晰，亮度均匀，无遮挡涂鸦</label>
				</view>
			</view>
			
			<!-- 健康证上传 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请点击下方图片上传您的健康证</view>
					<view class="re-card-show" @tap="showExample('driver3')">查看示例</view>
				</view>
				<input-image @success="onJkzImageSuccess" />
				<view class="re-card-context">
					<view><label>健康证、体检报告</label>二选一上传即可。</view>
					拍摄时<label>确保边框完整，字迹清晰，亮度均匀，无遮挡涂鸦</label>
				</view>
			</view>
			
			<!-- 体检报告上传 -->
			<view class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请点击下方图片上传您的体检报告</view>
					<view class="re-card-show" @tap="showExample('driver4')">查看示例</view>
				</view>
				<input-image @success="onTjbgImageSuccess" />
				<view class="re-card-context">
					<label>健康证、体检报告</label>二选一上传即可。
				</view>
			</view>
			
			<!-- 信息收集说明 -->
			<view class="re-card-p32" @tap="showInfoDialog">
				<view class="re-from-label">信息收集说明</view>
				<view class="re-card-context">
					感谢你即将成为我们的平台用户，我们将 <label>保证您上传的信息安全</label>，为了验证您的操作资格和您填写的信息准确度，我们需要您提供<label>驾驶证和行业操作证</label>以便我们确认您确有完成工作的资质，我们希望您能够理解并配合。人工审核需要时间请耐心等待。
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="re-end-pand">
				<button @tap="submit">提交审核</button>
			</view>
		</view>
		
		<!-- 示例图片弹窗 -->
		<show-example 
			v-if="showExampleModal" 
			:show="showExampleModal" 
			:url="exampleUrl" 
			@close="closeExample" 
		/>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	import inputImage from '@/components/base/input-image.vue'
	import showExample from '@/components/base/show-example.vue'
	
	export default {
		name: 'LoginDriver',
		components: {
			navbar,
			inputImage,
			showExample
		},
		data() {
			return {
				showExampleModal: false,
				exampleUrl: '',
				form: {
					area: '',
					name: '',
					mobile: '',
					jszimage: '', // 驾驶证
					czzimage: '', // 操作证
					jkzimage: '', // 健康证
					tjbgimage: '' // 体检报告
				},
				exampleUrls: {
					driver1: 'https://relief.oss-cn-hangzhou.aliyuncs.com/driver1.png',
					driver2: 'https://relief.oss-cn-hangzhou.aliyuncs.com/driver2.png',
					driver3: 'https://relief.oss-cn-hangzhou.aliyuncs.com/driver3.png',
					driver4: 'https://relief.oss-cn-hangzhou.aliyuncs.com/driver4.png'
				}
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '司机注册'
			});
		},
		methods: {
			// 选择区域
			selectArea() {
				const areas = ['长沙', '西安', '苏州', '惠广深'];
				uni.showActionSheet({
					itemList: areas,
					success: (res) => {
						this.form.area = areas[res.tapIndex];
					}
				});
			},
			
			// 显示示例图片
			showExample(type) {
				this.exampleUrl = this.exampleUrls[type] || 'https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg';
				this.showExampleModal = true;
			},
			
			// 关闭示例弹窗
			closeExample() {
				this.showExampleModal = false;
			},
			
			// 驾驶证上传成功
			onJszImageSuccess(url) {
				this.form.jszimage = url;
			},
			
			// 操作证上传成功
			onCzzImageSuccess(url) {
				this.form.czzimage = url;
			},
			
			// 健康证上传成功
			onJkzImageSuccess(url) {
				this.form.jkzimage = url;
			},
			
			// 体检报告上传成功
			onTjbgImageSuccess(url) {
				this.form.tjbgimage = url;
			},
			
			// 显示信息收集说明
			showInfoDialog() {
				uni.showModal({
					title: '信息收集说明',
					content: '感谢你即将成为我们的平台用户，我们将保证您上传的信息安全，为了验证您的操作资格和您填写的信息准确度，我们需要您提供驾驶证和行业操作证以便我们确认您确有完成工作的资质，我们希望您能够理解并配合。人工审核需要时间请耐心等待。',
					showCancel: false,
					confirmText: '我知道了'
				});
			},
			
			// 表单验证
			validateForm() {
				if (!this.form.area) {
					uni.showToast({ icon: 'none', title: '请选择注册区域' });
					return false;
				}
				if (!this.form.name) {
					uni.showToast({ icon: 'none', title: '请填写您的姓名' });
					return false;
				}
				if (!this.form.mobile) {
					uni.showToast({ icon: 'none', title: '请填写常用联系手机' });
					return false;
				}
				if (!/^1[3-9]\d{9}$/.test(this.form.mobile)) {
					uni.showToast({ icon: 'none', title: '请填写正确的手机号码' });
					return false;
				}
				if (!this.form.jszimage) {
					uni.showToast({ icon: 'none', title: '请上传驾驶证' });
					return false;
				}
				if (!this.form.czzimage) {
					uni.showToast({ icon: 'none', title: '请上传操作证' });
					return false;
				}
				if (!this.form.jkzimage && !this.form.tjbgimage) {
					uni.showToast({ icon: 'none', title: '健康证体检报告必须上传其一' });
					return false;
				}
				return true;
			},
			
			// 提交表单
			submit() {
				if (!this.validateForm()) {
					return;
				}
				
				uni.showLoading({ title: '提交中...' });
				
				// 模拟提交延迟
				setTimeout(() => {
					uni.hideLoading();
					
					// 模拟提交成功
					uni.showModal({
						title: '注册成功',
						content: '您的信息已登记，平台可能会通过您留下的联系方式核实您的身份，请保持电话畅通',
						showCancel: false,
						confirmText: '确定',
						success: () => {
							// 返回登录页面
							uni.navigateBack();
						}
					});
				}, 1500);
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	.content {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 200rpx;
	}
	
	// 基础样式
	.mt20 {
		margin-top: 20rpx;
	}
	
	.re-card-p32 {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		width: calc(690rpx - 64rpx);
		min-height: 120rpx;
		margin: 0 calc(50vw - 690rpx / 2);
		margin-bottom: 30rpx;
		padding: 32rpx;
		position: relative;
	}
	
	.re-from-line {
		margin-bottom: 28rpx;
	}
	
	.re-from-label {
		font-size: 28rpx;
		font-weight: normal;
		letter-spacing: 0px;
		margin-bottom: 10rpx;
		color: #1c1c1c;
	}
	
	.b-relative {
		position: relative;
	}
	
	.re-from-input {
		box-sizing: border-box;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		padding-left: 70rpx;
		border: 2rpx solid #CCCCCC;
		font-size: 28rpx;
		font-weight: normal;
		letter-spacing: 0px;
		color: #000;
		background-color: #fff;
	}
	
	.re-from-input[disabled] {
		background-color: #f8f8f8;
		color: #999;
	}
	
	.re-from-icon {
		position: absolute;
		left: 26rpx;
		top: 18rpx;
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.re-card-show {
		color: #9E9E9E;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		cursor: pointer;
	}
	
	.re-card-context {
		font-size: 24rpx;
		font-weight: normal;
		line-height: 36rpx;
		letter-spacing: 0em;
		color: #9E9E9E;
		margin-top: 20rpx;
		
		label {
			color: #F40000;
		}
	}
	
	.re-end-pand {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 88rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		padding: 30rpx 0;
		z-index: 999;
		
		button {
			width: 620rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 10rpx;
			background: #F40000;
			color: #FFF;
			text-align: center;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: 400;
			transition: all 0.2s ease-in-out;
			border: none;
			
			&:active {
				transform: translateY(2rpx) translateX(1rpx);
			}
		}
	}
</style>