<template>
	<view class="content">
		<navbar title="车辆证件上传" leftClick @leftClick="$utils.navigateBack" />
		<view class="car-upload">
			<!-- 车辆照片上传 -->
			<view class="upload-section">
				<view class="section-title">
					<image class="title-icon" src="/static/icons/icon11.png"></image>
					<text>车辆照片</text>
				</view>
				<view class="upload-tip">请上传车辆整体照片，确保车牌号清晰可见</view>
				<input-image @success="onCarImageUpload" :height="400" />
			</view>
			
			<!-- 行驶证上传 -->
			<view class="upload-section">
				<view class="section-title">
					<image class="title-icon" src="/static/icons/icon12.png"></image>
					<text>行驶证</text>
					<view class="example-btn" @tap="showExample('xsz')">
						查看示例
					</view>
				</view>
				
				<view class="certificate-row">
					<view class="certificate-item">
						<view class="certificate-label">行驶证正面</view>
						<input-image @success="onXszFrontUpload" :height="300" />
					</view>
					
					<view class="certificate-item">
						<view class="certificate-label">行驶证反面</view>
						<input-image @success="onXszBackUpload" :height="300" />
					</view>
				</view>
			</view>
			
			<!-- 保险证件上传 -->
			<view class="upload-section">
				<view class="section-title">
					<image class="title-icon" src="/static/icons/icon13.png"></image>
					<text>保险证件</text>
					<view class="example-btn" @tap="showExample('insurance')">
						查看示例
					</view>
				</view>
				
				<view class="certificate-row">
					<view class="certificate-item">
						<view class="certificate-label">交强险截图</view>
						<input-image @success="onJqxUpload" :height="300" />
					</view>
					
					<view class="certificate-item">
						<view class="certificate-label">商业险截图</view>
						<input-image @success="onSyxUpload" :height="300" />
					</view>
				</view>
			</view>
			
			<!-- 上传提示 -->
			<view class="upload-tips">
				<view class="tip-title">上传要求：</view>
				<view class="tip-item">• 照片清晰，无遮挡，无反光</view>
				<view class="tip-item">• 证件信息完整，字迹清楚</view>
				<view class="tip-item">• 保险在有效期内</view>
				<view class="tip-item">• 支持JPG、PNG格式，单张不超过5MB</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-area">
			<button class="submit-btn" @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: 'CarUpload',
		components: {
			navbar,
			InputImage,
			ShowExample
		},
		data() {
			return {
				showExampleModal: false,
				exampleUrl: '',
				carIndex: 0, // 当前编辑的车辆索引
				carInfo: {
					carimage: '', // 车辆照片
					xszaimage: '', // 行驶证正面
					xszbimage: '', // 行驶证反面
					jqximage: '', // 交强险
					syximage: '' // 商业险
				}
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '车辆证件上传'
			});
			
			// 获取车辆索引
			if (options.idx !== undefined) {
				this.carIndex = parseInt(options.idx);
			}
			
			// 加载已有的车辆信息
			const existingData = uni.getStorageSync('__car_data');
			if (existingData) {
				try {
					this.carInfo = JSON.parse(existingData);
				} catch (e) {
					console.error('解析车辆数据失败:', e);
				}
			}
		},
		methods: {
			// 车辆照片上传成功
			onCarImageUpload(url) {
				this.carInfo.carimage = url;
				console.log('车辆照片上传成功:', url);
			},
			
			// 行驶证正面上传成功
			onXszFrontUpload(url) {
				this.carInfo.xszaimage = url;
				console.log('行驶证正面上传成功:', url);
			},
			
			// 行驶证反面上传成功
			onXszBackUpload(url) {
				this.carInfo.xszbimage = url;
				console.log('行驶证反面上传成功:', url);
			},
			
			// 交强险上传成功
			onJqxUpload(url) {
				this.carInfo.jqximage = url;
				console.log('交强险上传成功:', url);
			},
			
			// 商业险上传成功
			onSyxUpload(url) {
				this.carInfo.syximage = url;
				console.log('商业险上传成功:', url);
			},
			
			// 显示示例
			showExample(type) {
				switch (type) {
					case 'xsz':
						this.exampleUrl = 'https://relief.oss-cn-hangzhou.aliyuncs.com/xsz.jpg';
						break;
					case 'insurance':
						this.exampleUrl = 'https://relief.oss-cn-hangzhou.aliyuncs.com/insurance.jpg';
						break;
					default:
						this.exampleUrl = 'https://relief.oss-cn-hangzhou.aliyuncs.com/example.jpg';
				}
				this.showExampleModal = true;
			},
			
			// 关闭示例
			closeExample() {
				this.showExampleModal = false;
			},
			
			// 验证表单
			validateForm() {
				if (!this.carInfo.carimage) {
					uni.showToast({ icon: 'none', title: '请上传车辆照片' });
					return false;
				}
				
				if (!this.carInfo.xszaimage) {
					uni.showToast({ icon: 'none', title: '请上传行驶证正面' });
					return false;
				}
				
				if (!this.carInfo.xszbimage) {
					uni.showToast({ icon: 'none', title: '请上传行驶证反面' });
					return false;
				}
				
				if (!this.carInfo.jqximage) {
					uni.showToast({ icon: 'none', title: '请上传交强险截图' });
					return false;
				}
				
				if (!this.carInfo.syximage) {
					uni.showToast({ icon: 'none', title: '请上传商业险截图' });
					return false;
				}
				
				return true;
			},
			
			// 提交车辆信息
			submit() {
				if (!this.validateForm()) {
					return;
				}
				
				// 保存车辆信息到本地存储
				uni.setStorageSync('__car_data', JSON.stringify(this.carInfo));
				
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}
	
	.car-upload {
		width: 100%;
	}
	
	.upload-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		position: relative;
		
		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-left: 16rpx;
		}
	}
	
	.title-icon {
		width: 48rpx;
		height: 48rpx;
	}
	
	.example-btn {
		position: absolute;
		right: 0;
		padding: 10rpx 20rpx;
		background-color: #f0f0f0;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #666;
	}
	
	.upload-tip {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 30rpx;
		line-height: 1.5;
	}
	
	.certificate-row {
		display: flex;
		gap: 20rpx;
	}
	
	.certificate-item {
		flex: 1;
	}
	
	.certificate-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
		text-align: center;
	}
	
	.upload-tips {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.tip-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.tip-item {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.submit-area {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		border: none;
		
		&:active {
			background-color: #0056CC;
		}
	}
</style>