<template>
	<view class="container">
		<!-- <view class="header">
			<text class="title">手部照片采集</text>
		</view> -->
		
		<view class="photo-container">
			<view class="instruction">
				<text>{{ instructions[currentStep] }}</text>
			</view>
			
			<view class="preview-container">
				<image v-if="photos[currentStep]" :src="photos[currentStep]" mode="aspectFit" class="preview-image"></image>
				<view v-else class="empty-preview">
					<text>{{ previewTexts[currentStep] }}</text>
				</view>
			</view>
			
			<view class="thumbnails"> 
				<view v-for="(photo, index) in photos" :key="index" 
					class="thumbnail-item" 
					:class="{ active: currentStep === index, completed: photo }">
					<image v-if="photo" :src="photo" mode="aspectFill" class="thumbnail-image" @click="previewPhoto(index)"></image>
					<view v-else class="thumbnail-placeholder">{{ index + 1 }}</view>
				</view>
			</view>
		</view>
		
		<view class="controls">
			<button class="camera-btn" @click="takePhoto">{{ photos[currentStep] ? '重新拍摄' : '拍摄照片' }}</button>
			
			<view class="navigation-btns">
				<button class="nav-btn prev" :disabled="currentStep === 0" @click="prevStep">上一步</button>
				<button class="nav-btn next" :disabled="!canGoNext" @click="nextStep">
					{{ currentStep === 5 && photos[5] ? '完成' : '下一步' }}
				</button>
			</view>
		</view>
		
		<!-- 为小程序环境添加camera组件 -->
		<view v-if="!isH5 && showCamera" class="camera-container">
			<cover-view class="gesture-hint">
				<cover-view class="gesture-hint-text">{{ gestureHints[currentStep] }}</cover-view>
			</cover-view>
			<camera 
				:device-position="cameraPosition" 
				flash="auto" 
				@error="handleCameraError" 
				class="camera-component"
				:mode="cameraMode"
				frame-size="medium"
			></camera>
			
			<!-- 添加手势引导蒙层 -->
			<view class="gesture-overlay">
				<!-- 添加右上角引导图标 -->
				<view class="guide-icon" :style="currentStep>=3?'left:30rpx':'right:30rpx'">
					<!-- <image :src="guideIcon[currentStep]" class="guide-image"></image> -->
					<video 
						:src="guideIcon[currentStep]"
						id="mpVideo"
						autoplay 
						class="mp-video-player"
						:controls="false"
						loop
						muted
						object-fit="contain"
					></video>
					<!-- <text class="guide-text">引导</text> -->
				</view>
				
				<image 
					:src="gestureOverlays[currentStep]" 
					class="gesture-image"
				></image>
			</view>
			
			<cover-view class="camera-controls">
				<cover-view class="capture-btn" @tap="capturePhotoMP"></cover-view>
				<cover-view class="camera-buttons">
					<!-- <cover-view class="switch-camera-btn" @tap="switchCamera">切换摄像头</cover-view> -->
					<cover-view class="cancel-btn" @tap="cancelCamera">取消</cover-view>
				</cover-view>
			</cover-view>
		</view>
		
		<!-- 为浏览器环境添加视频元素 -->
		<view v-if="isH5" class="camera-container" v-show="showCamera">
			<!-- <video ref="videoElement" class="camera-video" autoplay></video> -->
			<canvas ref="canvasElement" class="camera-canvas" style="display: none;"></canvas>
			
			<!-- 添加H5环境的手势引导蒙层 -->
			<view class="gesture-overlay">
				<!-- 添加右上角引导图标 -->
				<view class="guide-icon" :style="currentStep>=3?'left:30rpx':'right:30rpx'">
					<image :src="guideIcon[currentStep]" class="guide-image"></image>
					<!-- <text class="guide-text">引导</text> -->
				</view>
				
				<image 
					:src="gestureOverlays[currentStep]" 
					class="gesture-image"
				></image>
				<view class="gesture-hint">
					<text class="gesture-hint-text">{{ gestureHints[currentStep] }}</text>
				</view>
			</view>
			
			<view class="camera-buttons">
				<button class="capture-btn" @click="capturePhoto">拍照</button>
				<button class="switch-camera-btn" @click="switchCamera">切换摄像头</button>
				<button class="cancel-btn" @click="cancelCamera">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
import { apiBaseUrl } from '@/common/config.js'; // Import the base URL from a config file
	export default {
		data() {
			return {
				currentStep: 0,
				photos: [null, null, null, null, null, null], // 存储6张照片：左手正面、左手反面、左手握拳、右手正面、右手反面、右手握拳
				instructions: [
					'请将左手掌正面朝上，保持手指自然伸展，确保整个手掌清晰可见',
					'请将左手掌反面朝上，保持手指自然伸展，确保整个手背清晰可见',
					'请握紧左手拳头，使拳面朝向相机，确保整个拳头清晰可见',
					'请将右手掌正面朝上，保持手指自然伸展，确保整个手掌清晰可见',
					'请将右手掌反面朝上，保持手指自然伸展，确保整个手背清晰可见',
					'请握紧右手拳头，使拳面朝向相机，确保整个拳头清晰可见'
				],
				previewTexts: [
					'左手掌正面照片预览区',
					'左手掌反面照片预览区',
					'左手握拳照片预览区',
					'右手掌正面照片预览区',
					'右手掌反面照片预览区',
					'右手握拳照片预览区'
				],
				photoTypes: ['left_palm', 'left_back', 'left_fist', 'right_palm', 'right_back', 'right_fist'], // 照片类型标识
				isH5: false,
				showCamera: false,
				mediaStream: null,
				cameraContext: null,
				cameraMode: 'normal', // 添加相机模式
				cameraInitRetries: 0, // 添加重试计数器
				gestureOverlays: [
					'http://data.qicai321.com/minlong/18590378-6792-4a26-be18-ad9f2bcc4159.png',
					'http://data.qicai321.com/minlong/e08cff2b-3b1d-478f-a62b-766b38445a16.png',
					'http://data.qicai321.com/minlong/d30ccab7-9cfe-4386-bf0e-ac1f0045bd76.png',
					'http://data.qicai321.com/minlong/8068a698-ac40-4a5d-a737-54dba47a668d.png',
					'http://data.qicai321.com/minlong/f04a1f7e-4f79-49c7-9a02-bbad296672ea.png',
					'http://data.qicai321.com/minlong/1d9bbc36-2fb8-4489-bff6-c36e7a31bd37.png'
					/* '/static/images/palm_overlay.png',  // 手掌正面引导图
					'/static/images/back_overlay.png',  // 手掌反面引导图
					'/static/images/fist_overlay.png'   // 握拳引导图 */
				],
				gestureHints: [
					'请将左手掌对准轮廓线',
					'请将左手背对准轮廓线',
					'请将左手拳头对准轮廓线',
					'请将右手掌对准轮廓线',
					'请将右手背对准轮廓线',
					'请将右手拳头对准轮廓线'
				],
				photoLinks: [null, null, null, null, null, null], // 存储上传后的图片链接
				cameraPosition: 'front', // 修改默认为前置摄像头
				guideIcon: [
					'http://data.qicai321.com/minlong/fd080e3b-67be-4ce7-87a3-58d047cfbbb1.mp4',
					'http://data.qicai321.com/minlong/394a858c-672a-44bd-8206-450913863900.mp4',
					'http://data.qicai321.com/minlong/37153e68-a8f0-4a93-b677-5e5678379243.mp4',
					'http://data.qicai321.com/minlong/ebf6e43f-ffdf-49bb-8b00-adeff9ce1b56.mp4',
					'http://data.qicai321.com/minlong/e0ca45e2-af3e-42a0-9dd1-4de545e9c720.mp4',
					'http://data.qicai321.com/minlong/77028dd6-22bb-41b4-8879-19699e8b1dbb.mp4',
				]
			}
		},
		computed: {
			canGoNext() {
				// 如果是最后一步，检查所有照片是否都已完成
				if (this.currentStep === 5) {
					return this.photos.every(photo => photo !== null);
				}
				// 其他步骤只检查当前步骤的照片
				return this.photos[this.currentStep] !== null;
			}
		},
		onLoad() {
			// 判断当前平台
			// #ifdef H5
			this.isH5 = true;
			// #endif
			
			// 检查相机权限
			// #ifdef MP-WEIXIN
			uni.authorize({
				scope: 'scope.camera',
				success: () => {
					console.log('相机权限已授权');
				},
				fail: () => {
					uni.showModal({
						title: '提示',
						content: '请授权相机权限以完成手部照片采集',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting();
							}
						}
					});
				}
			});
			// #endif
		},
		beforeDestroy() {
			// 在组件销毁前停止摄像头流
			this.stopMediaStream();
		},
		methods: {
			takePhoto() {
				// 先重置当前步骤的状态
				this.$set(this.photos, this.currentStep, null);
				this.$set(this.photoLinks, this.currentStep, null);
				
				// 根据平台选择不同的拍照方法
				if (this.isH5) {
					this.startCamera();
				} else {
					// 小程序环境使用camera组件
					this.showCamera = true;
					this.cameraInitRetries = 0; // 重置重试计数器
					
					this.$nextTick(() => {
						// 创建相机上下文
						// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
						try {
							this.cameraContext = uni.createCameraContext();
							console.log('相机上下文创建成功');
						} catch (err) {
							console.error('创建相机上下文失败:', err);
							this.handleCameraInitError();
						}
						// #endif
					});
				}
			},
			uploadPhoto(filePathOrData, type) {
				console.log(`准备上传${type}类型的手部照片`);
				
				uni.showLoading({
					title: '上传中...'
				});
				
				// 获取用户openid
				const userInfo = uni.getStorageSync('userInfo');
				const openid = userInfo ? JSON.parse(userInfo).openid || '' : '';
				const tenant_id = uni.getStorageSync('tenant_id') || '1';
				
				// 检查用户信息是否完整
				if (!tenant_id) {
					uni.hideLoading();
					uni.showToast({
						title: '用户信息不完整，请重新登录',
						icon: 'none'
					});
					return;
				}
				
				// 定义更详细的照片描述
				const photoDescriptions = {
					'left_palm': '展示完整的左手手掌',
					'left_back': '展示完整的左手手背',
					'left_fist': '展示完整的左手握拳',
					'right_palm': '展示完整的右手手掌',
					'right_back': '展示完整的右手手背',
					'right_fist': '展示完整的右手握拳'
				};
				
				// 获取当前照片类型的详细描述
				const description = photoDescriptions[type] || `手部照片-${type}`;
				
				// 如果是H5环境且是base64数据
				if (this.isH5 && filePathOrData.startsWith('data:image')) {
					// 将base64转为blob对象
					const base64Data = filePathOrData.split(',')[1];
					const blob = this.base64ToBlob(base64Data, 'image/jpeg');
					
					const formData = new FormData();
					// 确保文件参数名称正确
					formData.append('photo', blob, `${type}.jpg`);
					formData.append('application_id', uni.getStorageSync('appId'));
					formData.append('tenant_id', tenant_id);
					formData.append('description', description);
					
					console.log('H5上传参数:', {
						application_id: uni.getStorageSync('appId'),
						tenant_id: tenant_id,
						description: description
					});
					
					// 使用fetch直接上传到 job/upload_posture_photo 接口
					fetch(`${apiBaseUrl}/job/upload_posture_photo`, {
						method: 'POST',
						body: formData
					})
					.then(response => response.json())
					.then(result => {
						console.log('照片上传成功:', result);
						
						// 保存图片链接到对应类型的索引位置
						const index = this.photoTypes.indexOf(type);
						if (index !== -1 && result.data && result.data.url) {
							this.$set(this.photoLinks, index, result.data.url);
							console.log(`已保存${type}类型照片链接:`, result.data.url);
						}
						
						uni.hideLoading();
						uni.showToast({
							title: '照片上传成功',
							icon: 'success',
							duration: 1500,
							success: () => {
								// 上传成功后自动进入下一步
								setTimeout(() => {
									this.autoNextStep();
								}, 1500);
							}
						});
					})
					.catch(error => {
						console.error('照片上传失败:', error);
						uni.hideLoading();
						uni.showToast({
							title: '照片上传失败，请重试',
							icon: 'none'
						});
					});
				} else {
					// 小程序环境的上传逻辑
					console.log(`小程序环境上传文件路径:`, filePathOrData);
					console.log('小程序上传参数:', {
						application_id: uni.getStorageSync('appId'),
						tenant_id: tenant_id,
						description: description
					});
					
					uni.uploadFile({
						url: `${apiBaseUrl}/job/upload_posture_photo`,
						filePath: filePathOrData,
						name: 'photo',  // 确保文件参数名称正确
						formData: {  // 使用formData替代data以确保参数正确传递
							'application_id': uni.getStorageSync('appId'),
							'tenant_id': tenant_id,
							'description': description
						},
						success: (uploadRes) => {
							console.log('照片上传成功:', uploadRes);
							
							// 解析返回的JSON字符串
							let result;
							try {
								if (typeof uploadRes.data === 'string') {
									result = JSON.parse(uploadRes.data);
								} else {
									result = uploadRes.data;
								}
								console.log('解析后的上传结果:', result);
								
								// 保存图片链接到对应类型的索引位置
								const index = this.photoTypes.indexOf(type);
								if (index !== -1 && result.data && result.data.url) {
									this.$set(this.photoLinks, index, result.data.url);
									console.log(`已保存${type}类型照片链接:`, result.data.url);
								}
							} catch (e) {
								console.error('解析上传结果失败:', e);
							}
							
							uni.hideLoading();
							uni.showToast({
								title: '照片上传成功',
								icon: 'success',
								duration: 1500,
								success: () => {
									// 上传成功后自动进入下一步
									setTimeout(() => {
										this.autoNextStep();
									}, 1500);
								}
							});
						},
						fail: (err) => {
							console.error('照片上传失败:', err);
							uni.hideLoading();
							uni.showToast({
								title: '照片上传失败，请重试',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading();
						}
					});
				}
			},
			prevStep() {
				if (this.currentStep > 0) {
					this.currentStep--;
				}
			},
			nextStep() {
				if (this.currentStep < 5) {
					return
					this.currentStep++;
				} else if (this.currentStep === 5 && this.photos[5]) {
					// 所有照片都已拍摄完成，可以进行提交或跳转
					this.submitAllPhotos();
				}
			},
			previewPhoto(index) {
				// 如果照片存在，则预览
				if (this.photos[index]) {
					uni.previewImage({
						urls: [this.photos[index]],
						current: this.photos[index]
					});
				}
			},
			submitAllPhotos() {
				// 检查是否所有照片都已拍摄
				if (this.photos.every(photo => photo !== null)) {
					uni.showLoading({
						title: '处理中...'
					});
					
					// 获取必要参数
					const application_id = uni.getStorageSync('appId');
					const tenant_id = uni.getStorageSync('tenant_id') || '1';
					
					// 调用视觉分析接口
					uni.request({
						url: `${apiBaseUrl}/api/system/job/trigger_visual_analysis?application_id=${application_id}&tenant_id=${tenant_id}`,
						method: 'POST',
						success: (res) => {
							console.log('视觉分析触发成功:', res);
							
							// 继续处理跳转逻辑
							uni.hideLoading();
							uni.showToast({
								title: '手部照片采集完成',
								icon: 'success',
								duration: 2000,
								success: () => {
									// 延迟跳转，让用户看到成功提示
									setTimeout(() => {
										// 使用redirectTo替代navigateTo，避免页面栈溢出
										uni.redirectTo({
											url: '/pages/interview_success/interview_success'
										});
									}, 100);
								}
							});
						},
						fail: (err) => {
							console.error('视觉分析触发失败:', err);
							uni.hideLoading();
							uni.showToast({
								title: '处理失败，请重试',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '请完成所有照片拍摄',
						icon: 'none'
					});
				}
			},
			// H5环境下启动摄像头
			startCamera() {
				this.showCamera = true;
				
				// 确保浏览器支持getUserMedia
				if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
					// 根据当前摄像头位置设置facingMode
					const facingMode = this.cameraPosition === 'front' ? 'user' : 'environment';
					
					navigator.mediaDevices.getUserMedia({ 
						video: { facingMode: facingMode } 
					})
					.then(stream => {
						this.mediaStream = stream;
						// 等待DOM更新后再设置视频源
						this.$nextTick(() => {
							const videoElement = this.$refs.videoElement;
							if (videoElement) {
								videoElement.srcObject = stream;
							}
						});
					})
					.catch(error => {
						console.error('获取摄像头失败:', error);
						uni.showToast({
							title: '无法访问摄像头，请检查权限设置',
							icon: 'none'
						});
						this.showCamera = false;
					});
				} else {
					uni.showToast({
						title: '您的浏览器不支持摄像头功能',
						icon: 'none'
					});
					this.showCamera = false;
				}
			},
			
			// H5环境下拍照
			capturePhoto() {
				console.log('执行H5拍照方法');
				const videoElement = this.$refs.videoElement;
				const canvasElement = this.$refs.canvasElement;
				
				if (videoElement && canvasElement) {
					try {
						const context = canvasElement.getContext('2d');
						
						// 设置canvas尺寸与视频一致
						canvasElement.width = videoElement.videoWidth;
						canvasElement.height = videoElement.videoHeight;
						
						// 在canvas上绘制当前视频帧
						context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
						
						// 将canvas内容转为base64图片
						const photoData = canvasElement.toDataURL('image/jpeg');
						
						// 更新照片数据
						this.$set(this.photos, this.currentStep, photoData);
						
						// 上传照片
						this.uploadPhoto(photoData, this.photoTypes[this.currentStep]);
						
						// 关闭摄像头
						this.stopMediaStream();
						this.showCamera = false;
					} catch (err) {
						console.error('H5拍照失败:', err);
						uni.showToast({
							title: '拍照失败，请重试',
							icon: 'none'
						});
					}
				}
			},
			
			// 小程序环境下拍照
			capturePhotoMP() {
				console.log('执行小程序拍照方法');
				if (!this.cameraContext) {
					console.error('相机上下文不存在');
					this.handleCameraInitError();
					return;
				}
				
				try {
					uni.showLoading({
						title: '拍照中...',
						mask: true
					});
					
					this.cameraContext.takePhoto({
						quality: 'high',
						success: (res) => {
							console.log('拍照成功:', res);
							uni.hideLoading();
							
							// 先清空当前照片，确保状态一致
							this.$set(this.photos, this.currentStep, null);
							this.$set(this.photoLinks, this.currentStep, null);
							
							// 然后设置新照片
							this.$set(this.photos, this.currentStep, res.tempImagePath);
							
							// 上传照片
							this.uploadPhoto(res.tempImagePath, this.photoTypes[this.currentStep]);
							
							// 关闭相机
							this.showCamera = false;
						},
						fail: (err) => {
							uni.hideLoading();
							console.error('拍照失败:', err);
							uni.showToast({
								title: '拍照失败，请重试',
								icon: 'none'
							});
							// 尝试使用替代方法
							this.fallbackToChooseImage();
						}
					});
				} catch (err) {
					uni.hideLoading();
					console.error('takePhoto方法执行失败:', err);
					this.fallbackToChooseImage();
				}
			},
			
			// 添加相机初始化错误处理
			handleCameraInitError() {
				if (this.cameraInitRetries < 3) {
					this.cameraInitRetries++;
					uni.showToast({
						title: `相机初始化失败，正在重试(${this.cameraInitRetries}/3)`,
						icon: 'none'
					});
					
					setTimeout(() => {
						this.showCamera = false;
						setTimeout(() => {
							this.takePhoto();
						}, 500);
					}, 1000);
				} else {
					uni.showToast({
						title: '相机初始化失败，将使用系统相机',
						icon: 'none'
					});
					this.fallbackToChooseImage();
				}
			},
			
			// 添加备用的系统相机方法
			fallbackToChooseImage() {
				this.showCamera = false;
				
				// 使用系统相机作为备选方案
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						// 更新当前步骤的照片
						this.$set(this.photos, this.currentStep, res.tempFilePaths[0]);
						
						// 上传照片
						this.uploadPhoto(res.tempFilePaths[0], this.photoTypes[this.currentStep]);
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '拍照失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			
			// 修改相机错误处理方法
			handleCameraError(e) {
				console.error('相机错误:', e.detail);
				
				// 记录更详细的错误信息
				const errorInfo = JSON.stringify(e.detail);
				console.log('详细错误信息:', errorInfo);
				
				uni.showToast({
					title: '相机启动失败，将使用系统相机',
					icon: 'none'
				});
				
				// 使用备用方法
				this.fallbackToChooseImage();
			},
			
			// 取消拍照 - 更新为同时支持H5和小程序
			cancelCamera() {
				if (this.isH5) {
					this.stopMediaStream();
				}
				this.showCamera = false;
				// 重置当前步骤的照片状态，确保需要重新拍照
				this.$set(this.photos, this.currentStep, null);
				// 重置当前步骤的照片链接
				this.$set(this.photoLinks, this.currentStep, null);
			},
			
			// 停止摄像头流
			stopMediaStream() {
				if (this.mediaStream) {
					this.mediaStream.getTracks().forEach(track => {
						track.stop();
					});
					this.mediaStream = null;
				}
			},
			
			// base64转blob工具方法
			base64ToBlob(base64, mimeType) {
				const byteCharacters = atob(base64);
				const byteArrays = [];
				
				for (let offset = 0; offset < byteCharacters.length; offset += 512) {
					const slice = byteCharacters.slice(offset, offset + 512);
					
					const byteNumbers = new Array(slice.length);
					for (let i = 0; i < slice.length; i++) {
						byteNumbers[i] = slice.charCodeAt(i);
					}
					
					const byteArray = new Uint8Array(byteNumbers);
					byteArrays.push(byteArray);
				}
				
				return new Blob(byteArrays, { type: mimeType });
			},
			
			retryCamera() {
				this.showCamera = false;
				setTimeout(() => {
					this.takePhoto();
				}, 500);
			},
			
			// 可以添加一个方法来切换蒙层显示
			toggleGestureOverlay() {
				// 实现蒙层显示/隐藏的逻辑
				// 如果需要的话
			},
			
			// 切换摄像头
			switchCamera() {
				// 切换摄像头位置
				this.cameraPosition = this.cameraPosition === 'front' ? 'back' : 'front';
				
				// 如果是H5环境，需要重新启动摄像头
				if (this.isH5 && this.showCamera) {
					this.stopMediaStream();
					this.startCamera();
				}
			},
			
			// 添加自动进入下一步的方法
			autoNextStep() {
				if (this.currentStep < 5) {
					this.currentStep++;
					// 如果不是最后一步，自动开始拍摄下一张照片
					if (this.currentStep < 6) {
						this.takePhoto();
					}
				} else if (this.currentStep === 5 && this.photos[5]) {
					// 所有照片都已拍摄完成，进行提交
					this.submitAllPhotos();
				}
			}
		}
	}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	height: 94vh;
	background-color: #f5f5f5;
}

.header {
	padding: 20rpx;
	background-color: #007AFF;
	text-align: center;
}

.title {
	color: #ffffff;
	font-size: 36rpx;
	font-weight: bold;
}

.photo-container {
	flex: 1;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
}

.instruction {
	padding: 20rpx;
	background-color: #E5E5EA;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.preview-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #E5E5EA;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.preview-image {
	width: 100%;
	height: 100%;
}

.empty-preview {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #999;
}

.thumbnails {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20rpx;
}

.thumbnail-item {
	width: 150rpx;
	height: 150rpx;
	border-radius: 10rpx;
	overflow: hidden;
	background-color: #E5E5EA;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 4rpx solid transparent;
}

.thumbnail-item.active {
	border-color: #007AFF;
}

.thumbnail-item.completed {
	background-color: #ffffff;
}

.thumbnail-image {
	width: 100%;
	height: 100%;
}

.thumbnail-placeholder {
	font-size: 40rpx;
	color: #999;
}

.controls {
	padding: 20rpx;
	background-color: #ffffff;
	border-top: 1px solid #0039b3;
}

.camera-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #0039b3;
	color: white;
	border-radius: 40rpx;
	margin-bottom: 20rpx;
}

.navigation-btns {
	display: flex;
	justify-content: space-between;
}

.nav-btn {
	width: 48%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
}

.nav-btn.prev {
	background-color: #E5E5EA;
	color: #333;
}

.nav-btn.next {
	background-color: #34C759;
	color: white;
}

.nav-btn[disabled] {
	opacity: 0.5;
}

/* 浏览器摄像头相关样式 */
.camera-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.camera-video {
	width: 100%;
	height: 70%;
	object-fit: cover;
}

.camera-canvas {
	display: none;
}

.capture-btn {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	background-color: #ffffff;
	border: 10rpx solid #0039b3;
	margin: 30rpx 0;
}

.cancel-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	text-align: center;
	border-radius: 40rpx;
}

/* 小程序相机组件样式 */
.camera-component {
	width: 100%;
	height: 100%;
	display: block;
}

.camera-controls {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	bottom: 50rpx;
	z-index: 9999;
}

/* 添加手势引导蒙层样式 */
.gesture-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none; /* 允许点击穿透 */
	z-index: 10;
}

.gesture-image {
	width: 100%;
	height: 100%;
/* 	opacity: 0.6; */
}

.gesture-hint {
	position: fixed;
	top: 1px;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
	z-index: 999;
}

.gesture-hint-text {
	color: white;
	font-size: 28rpx;
	text-align: center;
}

/* 添加切换摄像头按钮样式 */
.switch-camera-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	text-align: center;
	border-radius: 40rpx;
	margin: 20rpx 0;
}

.camera-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	margin-top: 20rpx;
}

.capture-btn {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	background-color: #ffffff;
	border: 10rpx solid #0039b3;
	margin: 30rpx 0;
}

.switch-camera-btn, .cancel-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	text-align: center;
	border-radius: 40rpx;
	margin: 0 20rpx;
}

/* 添加右上角引导图标样式 */
.guide-icon {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	width: 160rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 10rpx;
	z-index: 11;
}
.mp-video-player{
	width: 100%;
	height: 100%;
    border-radius: 10rpx;
}

.guide-image {
	width: 160rpx;
	height: 200rpx;
}

.guide-text {
	color: white;
	font-size: 24rpx;
	margin-top: 5rpx;
}
</style>

