<template>
	<view class="content">
		<navbar title="企业注册" leftClick @leftClick="$utils.navigateBack" />
		<view class="cr mt40">
			<!-- 认证类型选择 -->
			<view class="re-card-p32">
				<view class="re-from-line">
					<view class="re-from-label">认证类型</view>
					<view class="b-relative m20">
						<radio-group @change="changeType">
							<radio value="1" :checked="form.type === '1'" class="radio-item">企业注册</radio>
							<radio value="2" :checked="form.type === '2'" class="radio-item">个人老板</radio>
						</radio-group>
					</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="注册后不可更改" 
							disabled 
							@tap="selectArea" 
							v-model="form.area" 
						/>
						<image class="re-from-icon" src="/static/icons/icon05.png"></image>
					</view>
				</view>
				
				<!-- 企业注册表单 -->
				<view v-if="form.type === '1'">
					<view class="re-from-line">
						<view class="re-from-label">公司名称</view>
						<view class="b-relative">
							<input 
								maxlength="20" 
								class="re-from-input" 
								placeholder="填写营业执照上的全称" 
								v-model="form.name" 
							/>
							<image class="re-from-icon" src="/static/icons/icon03.png"></image>
						</view>
					</view>
					
					<view class="re-from-line">
						<view class="re-from-label">法人代表</view>
						<view class="b-relative">
							<input 
								maxlength="8" 
								class="re-from-input" 
								placeholder="填写营业执照上的法人代表" 
								v-model="form.faren" 
							/>
							<image class="re-from-icon" src="/static/icons/icon04.png"></image>
						</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" 
							/>
							<image class="re-from-icon" src="/static/icons/icon02.png"></image>
						</view>
					</view>
					
					<view class="re-from-line" @tap="openSelect">
						<view class="re-from-label">到场地点</view>
						<view class="b-relative">
							<input 
								class="re-from-input" 
								placeholder="选择施工到场地点" 
								v-model="form.address" 
								disabled
							/>
							<image class="re-from-icon" src="/static/icons/icon05.png"></image>
						</view>
					</view>
				</view>
				
				<!-- 个人老板表单 -->
				<view v-if="form.type === '2'">
					<view class="re-from-line">
						<view class="re-from-label">名称</view>
						<view class="b-relative">
							<input 
								maxlength="8" 
								class="re-from-input" 
								placeholder="填写老板姓名" 
								v-model="form.faren" 
							/>
							<image class="re-from-icon" src="/static/icons/icon01.png"></image>
						</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" 
							/>
							<image class="re-from-icon" src="/static/icons/icon02.png"></image>
						</view>
					</view>
					
					<view class="re-from-line" @tap="openSelect">
						<view class="re-from-label">到场地点</view>
						<view class="b-relative">
							<input 
								disabled 
								class="re-from-input" 
								placeholder="选择施工到场地点" 
								v-model="form.address" 
							/>
							<image class="re-from-icon" src="/static/icons/icon05.png"></image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 营业执照上传 -->
			<view v-if="form.type === '1'" class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请点击下方图片上传营业执照</view>
					<view class="re-card-show" @tap="showExample('business')">
						查看示例
					</view>
				</view>
				<input-image @success="onBusinessLicenseUpload" :height="846" />
				<view class="re-card-context">
					拍摄时<text>确保边框完整，字迹清晰，亮度均匀，无遮挡涂鸦</text>
				</view>
			</view>
			
			<!-- 身份证上传 -->
			<view v-if="form.type === '2'" class="re-card-p32">
				<view class="flex-sb">
					<view class="re-from-label">请点击下方图片上传老板身份证正反面</view>
					<view class="re-card-show" @tap="showExample('idcard')">
						查看示例
					</view>
				</view>
				<input-image @success="onIdCardFrontUpload" />
				<input-image @success="onIdCardBackUpload" />
				<view class="re-card-context">
					拍摄时<text>确保边框完整，字迹清晰，亮度均匀，无遮挡涂鸦，注意：请上传老板的</text>
				</view>
			</view>
			
			<!-- 车辆信息 -->
			<view v-for="(car, index) in cars" :key="index" class="re-card-p32">
				<view class="flex-sb">
					<view class="car-header">
						<image class="re-from-car" src="/static/icons/icon11.png"></image>
						<text>添加车辆</text>
					</view>
					<view v-if="index === cars.length - 1" class="re-card-show" @tap="addNewCar">
						<text style="font-size:32rpx">+</text>
						<text>再加一辆</text>
					</view>
				</view>
				
				<!-- 车辆类型选择 -->
				<view class="flex-sb re-card-select mt20">
					<view>车辆类型</view>
					<picker class="flex picker-style" :range="types" @change="onTypeSelect($event, index)">
						<text v-if="!car.type" class="placeholder-text">请选择</text>
						<view v-if="car.type" class="selected-text">{{ car.type }}</view>
						<uv-icon name="arrow-down" size="28" color="#9E9E9E"></uv-icon>
					</picker>
				</view>
				
				<!-- 设备轴数选择 -->
				<view class="flex-sb re-card-select">
					<view>设备轴数</view>
					<picker class="flex picker-style" :range="car.mib || []" @change="onMiSelect($event, index)">
						<text v-if="!car.mi" class="placeholder-text">请选择</text>
						<view v-if="car.mi" class="selected-text">{{ car.mi }}</view>
						<uv-icon name="arrow-down" size="28" color="#9E9E9E"></uv-icon>
					</picker>
				</view>
				
				<!-- 上传证件 -->
				<view class="flex-sb re-card-select">
					<view>上传证件</view>
					<view v-if="!car.info" class="flex picker-style" @tap="uploadCarInfo(index)">
						<text class="placeholder-text">点击上传</text>
						<uv-icon name="arrow-right" size="28" color="#9E9E9E"></uv-icon>
					</view>
					<view v-if="car.info" class="flex picker-style">
						<text class="selected-text">已上传</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="re-end-pand">
			<button @tap="submit">提交审核</button>
		</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: 'LoginEnter',
		components: {
			navbar,
			InputImage,
			ShowExample
		},
		data() {
			return {
				showExampleModal: false,
				exampleUrl: '',
				form: {
					type: '1', // 1: 企业注册, 2: 个人老板
					area: '',
					name: '',
					faren: '',
					mobile: '',
					address: '',
					addressSimple: '',
					latitude: '',
					longitude: '',
					yyztimage: '', // 营业执照
					sfzzimage: '', // 身份证正面
					sfzfimage: ''  // 身份证反面
				},
				adrr: {
					name: '',
					address: '',
					latitude: '',
					longitude: ''
				},
				cars: [{
					mi: '',
					type: '',
					info: '',
					mib: []
				}],
				mis: [],
				mia: [
					{ mi: '43米泵车', price: '1.2' },
					{ mi: '48米泵车', price: '1.5' },
					{ mi: '52米泵车', price: '1.8' },
					{ mi: '6方搅拌车', price: '0.8' },
					{ mi: '8方搅拌车', price: '1.0' },
					{ mi: '10方搅拌车', price: '1.2' }
				],
				types: ['泵车', '搅拌车']
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '企业入驻'
			});
			this.loadMi();
		},
		onShow() {
			// 处理从车辆信息页面返回的数据
			const idx = uni.getStorageSync('__idx');
			if (idx !== null && idx !== undefined) {
				const carData = uni.getStorageSync('__car_data');
				if (carData) {
					this.cars[idx].info = JSON.parse(carData);
					console.log('load car data:', this.cars);
				}
				uni.removeStorageSync('__idx');
				uni.removeStorageSync('__car_data');
			}
		},
		methods: {
			// 切换认证类型
			changeType(event) {
				this.form.type = event.detail.value;
				// 清空相关数据
				this.form.name = '';
				this.form.faren = '';
				this.form.yyztimage = '';
				this.form.sfzzimage = '';
				this.form.sfzfimage = '';
			},
			
			// 选择区域
			selectArea() {
				const areas = ['长沙', '西安', '苏州', '惠广深'];
				uni.showActionSheet({
					itemList: areas,
					success: (res) => {
						this.form.area = areas[res.tapIndex];
					}
				});
			},
			
			// 选择地点
			openSelect() {
				// 模拟地点选择
				uni.showModal({
					title: '选择地点',
					content: '此功能需要在真实环境中使用地图选择',
					success: (res) => {
						if (res.confirm) {
							// 模拟数据
							this.form.address = '湖南省长沙市雨花区某某街道';
							this.form.addressSimple = '雨花区某某街道';
							this.form.latitude = '28.1234';
							this.form.longitude = '112.5678';
						}
					}
				});
			},
			
			// 加载轴数数据
			loadMi() {
				this.mis = [];
				this.mia.forEach((ele) => {
					this.mis.push(ele.mi);
				});
			},
			
			// 车辆类型选择
			onTypeSelect(event, carIndex) {
				const car = this.cars[carIndex];
				car.type = this.types[event.detail.value];
				car.mi = ''; // 重置轴数选择
				car.mib = [];
				
				// 根据车辆类型筛选轴数选项
				this.mia.forEach((item) => {
					if (item.mi.includes(car.type)) {
						car.mib.push(item.mi);
					}
				});
			},
			
			// 轴数选择
			onMiSelect(event, carIndex) {
				const car = this.cars[carIndex];
				car.mi = car.mib[event.detail.value];
			},
			
			// 添加新车辆
			addNewCar() {
				this.cars.push({
					mi: '',
					type: '',
					info: '',
					mib: []
				});
			},
			
			// 上传车辆证件
			uploadCarInfo(index) {
				uni.setStorageSync('__idx', index);
				uni.navigateTo({
					url: '/pages_order/login/car'
				});
			},
			
			// 营业执照上传成功
			onBusinessLicenseUpload(url) {
				this.form.yyztimage = url;
				console.log('营业执照上传成功:', url);
			},
			
			// 身份证正面上传成功
			onIdCardFrontUpload(url) {
				this.form.sfzzimage = url;
				console.log('身份证正面上传成功:', url);
			},
			
			// 身份证反面上传成功
			onIdCardBackUpload(url) {
				this.form.sfzfimage = url;
				console.log('身份证反面上传成功:', url);
			},
			
			// 显示示例
			showExample(type) {
				if (type === 'business') {
					this.exampleUrl = 'https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg';
				} else if (type === 'idcard') {
					this.exampleUrl = 'https://relief.oss-cn-hangzhou.aliyuncs.com/sfz.jpg';
				} else {
					this.exampleUrl = 'https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg';
				}
				this.showExampleModal = true;
			},
			
			// 关闭示例
			closeExample() {
				this.showExampleModal = false;
			},
			
			// 表单验证
			validateForm() {
				if (!this.form.area) {
					uni.showToast({ icon: 'none', title: '请选择注册区域' });
					return false;
				}
				
				if (this.form.type === '1') {
					if (!this.form.name) {
						uni.showToast({ icon: 'none', title: '请填写企业名称' });
						return false;
					}
					if (!this.form.yyztimage) {
						uni.showToast({ icon: 'none', title: '请上传营业执照' });
						return false;
					}
				} else if (this.form.type === '2') {
					if (!this.form.sfzzimage) {
						uni.showToast({ icon: 'none', title: '请上传身份证（正面）' });
						return false;
					}
					if (!this.form.sfzfimage) {
						uni.showToast({ icon: 'none', title: '请上传身份证（反面）' });
						return false;
					}
				}
				
				if (!this.form.faren) {
					uni.showToast({ icon: 'none', title: '请填写老板姓名或者法人代表' });
					return false;
				}
				
				if (!this.form.mobile) {
					uni.showToast({ icon: 'none', title: '请填写常用联系手机' });
					return false;
				}
				
				if (!this.form.address) {
					uni.showToast({ icon: 'none', title: '请选择派工到场地点' });
					return false;
				}
				
				// 验证车辆信息
				for (let i = 0; i < this.cars.length; i++) {
					const car = this.cars[i];
					if (!car.mi || !car.type) {
						uni.showToast({ icon: 'none', title: '车辆信息未填写完整' });
						return false;
					}
					if (!car.info) {
						uni.showToast({ icon: 'none', title: '请上传车辆证件' });
						return false;
					}
				}
				
				return true;
			},
			
			// 提交表单
			submit() {
				if (!this.validateForm()) {
					return;
				}
				
				this.doSubmit();
			},
			
			// 执行提交
			doSubmit() {
				console.log('提交表单数据:', this.form);
				console.log('车辆数据:', this.cars);
				
				// 模拟提交过程
				uni.showLoading({ title: '提交中...' });
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showModal({
						title: '注册成功',
						content: '您的信息已登记，平台可能会通过您留下的联系方式核实您的身份，请保持电话畅通',
						success: () => {
							uni.navigateTo({ 
								url: '/pages_order/login/login' 
							});
						}
					});
				}, 2000);
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	.content {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #F5F5F5;
	}
	
	.cr {
		min-height: calc(88vh);
	}
	
	.mt40 {
		margin-top: 40rpx;
	}
	
	.m20 {
		margin: 20rpx;
	}
	
	.mt20 {
		margin-top: 20rpx;
	}
	
	.re-card-p32 {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.re-from-line {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.re-from-label {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.b-relative {
		position: relative;
	}
	
	.re-from-input {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 80rpx 0 20rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		
		&:focus {
			border-color: #007AFF;
		}
		
		&:disabled {
			background-color: #f8f8f8;
			color: #999;
		}
	}
	
	.re-from-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
	}
	
	.radio-item {
		width: 50%;
		transform: scale(0.8);
		margin-left: -32rpx;
	}
	
	.flex {
		display: flex;
		align-items: center;
	}
	
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.re-card-show {
		color: #9E9E9E;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
	}
	
	.re-card-context {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
		
		text {
			color: #007AFF;
			font-weight: bold;
		}
	}
	
	.car-header {
		display: flex;
		align-items: center;
		
		text {
			margin-left: 16rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.re-from-car {
		width: 72rpx;
		height: 60rpx;
	}
	
	.re-card-select {
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #333333;
		border-bottom: 1rpx solid #eee;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.picker-style {
		color: #9E9E9E;
		justify-content: flex-end;
		gap: 10rpx;
	}
	
	.placeholder-text {
		color: #9E9E9E;
	}
	
	.selected-text {
		color: #0d0d0d;
	}
	
	.re-end-pand {
		width: 100vw;
		height: 88rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		padding: 30rpx 0;
		position: fixed;
		bottom: 0;
		left: 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);
			}
		}
	}
	
	// 单选框样式
	::v-deep radio .uni-radio-input {
		background-color: #F40000 !important;
		border-color: #F40000 !important;
	}
	
	::v-deep radio .uni-radio-input:empty {
		background-color: #ffffff !important;
		border-color: #d1d1d1 !important;
	}
</style>