<template>
	<view class="update">
		<view class="upload-container">
			<view class="image-list">
				<!-- 已拍摄图片预览 - 不显示hidden的图片 -->
				<view v-for="(file, index) in visibleFileList" :key="index" class="image-item" @click="previewImage(index)">
					<image :src="file.url" class="preview-img" mode="aspectFill" />
					<view class="delete-btn" @click.stop="handleDelete(index)">×</view>
					<!-- 添加上传状态指示器 -->
					<view v-if="file.status === 'uploading'" class="upload-status uploading">上传中...</view>
					<view v-if="file.status === 'error'" class="upload-status error">上传失败</view>
				</view>
				<!-- 拍照图标，未达上限时显示 -->
				<view v-if="fileList.length < maxCount" class="camera-icon" @click="handleOpenCamera"
					hover-class="none">
					<image src="/static/camera.png" class="icon-img" />
				</view>
			</view>
		</view>
		<!-- bcode-camera组件 -->
		<bcode-camera v-if="showCamera" :tipsText="tipsText" :currentCount="visibleFileList.length" :fileList="visibleFileList"
			@onConfirm="handleCameraConfirm" @onCancel="handleCameraCancel" @onUpload="onUpload"
			@onDeleteImage="handleDeleteImage"></bcode-camera>
	</view>
</template>

<script>
	// 导入会员书籍数量检查工具
	import { checkMemberBooksCount } from '@/components/MemberBookCheck.js';
	
	export default {
		name: 'CameraUpload',
		props: {
			// 初始文件列表
			value: {
				type: Array,
				default: () => []
			},
			// 最大上传数量
			maxCount: {
				type: Number,
				default: 9
			},
			uploadUrl: {
				type: String,
				required: true, // 必须传递有效 URL（如 https://xxx.com）
				default: '' // 可选默认值
			},
			// 新增的ISBN和书名props
			isbn: {
				type: String,
				default: ''
			},
			bookName: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showCamera: false,
				fileList: this.value,
				uploadQueue: [], // 上传队列
				isUploading: false, // 是否正在上传
				processedUrls: new Set() // 新增：用于记录已处理的图片URL
			};
		},
		computed: {
			tipsText() {
				return `已拍摄 ${this.fileList.length} 张，最多可拍 ${this.maxCount} 张`;
			},
			visibleFileList() {
				return this.fileList.filter(file => !file.hidden);
			}
		},
		watch: {
			value(newVal) {
				this.fileList = newVal;
			},
			// 新增：监听上传队列变化
			uploadQueue: {
				handler(newQueue) {
					if (newQueue.length > 0 && !this.isUploading) {
						this.processUploadQueue();
					}
				},
				deep: true
			},
			// 监听文件列表变化，检查上传状态
			fileList: {
				handler(newFileList) {
					// 检查是否有文件正在上传中
					const isUploading = newFileList.some(file => file.status === 'uploading');
					// 通知父组件上传状态
					this.$emit('upload-status-change', isUploading);
				},
				deep: true
			}
		},
		methods: {
			// 新增：检查文件是否已处理
			isProcessed(url) {
				return this.processedUrls.has(url);
			},
			
			// 新增：标记文件为已处理
			markAsProcessed(url) {
				this.processedUrls.add(url);
			},
			
			// 新增：检查是否有文件正在上传中
			checkUploadingStatus() {
				const isUploading = this.fileList.some(file => file.status === 'uploading');
				// 通知父组件上传状态
				this.$emit('upload-status-change', isUploading);
				return isUploading;
			},
			
			// 修改：处理新图片
			async processNewImage(imageUrl) {
				if (this.isProcessed(imageUrl)) {
					console.log('图片已处理过，跳过:', imageUrl);
					return;
				}

				// 获取已使用的编号（排除识图照片）
				const usedNums = new Set();

				// 收集当前文件列表中已使用的编号，只收集普通照片
				this.fileList.forEach(file => {
					if (file.num && !file.isOCR) {
						usedNums.add(file.num);
					}
				});

				// 找到下一个可用的编号（从1开始）
				let nextNum = 1;
				while (usedNums.has(nextNum.toString())) {
					nextNum++;
				}

				// 添加到文件列表
				const newFile = {
					url: imageUrl,
					status: "ready",
					message: "待上传",
					num: nextNum.toString()
				};

				// 在添加新文件之前，检查是否存在相同编号的文件
				const existingFileIndex = this.fileList.findIndex(f => f.num === nextNum.toString());
				if (existingFileIndex !== -1) {
					// 如果存在相同编号的文件，为新文件找一个新的编号
					nextNum = Math.max(...Array.from(this.fileList.map(f => parseInt(f.num) || 0))) + 1;
					newFile.num = nextNum.toString();
				}

				this.fileList.push(newFile);

				// 重新排序文件列表，确保识图照片始终在最后
				this.fileList.sort((a, b) => {
					// 如果其中一个是识图照片，保持在最后
					if (a.isOCR || a.name?.startsWith('识图-')) return 1;
					if (b.isOCR || b.name?.startsWith('识图-')) return -1;

					const numA = parseInt(a.num) || 999;
					const numB = parseInt(b.num) || 999;
					return numA - numB;
				});

				// 添加到上传队列（只上传普通照片）
				await this.addToUploadQueue(newFile, this.fileList.indexOf(newFile));

				// 标记为已处理
				this.markAsProcessed(imageUrl);

				// 通知父组件更新
				this.$emit('input', this.fileList);

				console.log(`新照片已添加，编号为: ${nextNum}`);
				console.log('当前文件列表:', this.fileList.map(f => ({
					url: f.url,
					num: f.num,
					name: f.name,
					hidden: f.hidden,
					status: f.status,
					isOCR: f.isOCR
				})));
			},
			
			// 修改：onUpload 处理程序
			async onUpload(data) {
				if (!data || !data.url) {
					console.error('无效的图片URL');
					return;
				}
				
				console.log('接收到新拍摄的照片:', data);
				await this.processNewImage(data.url);
			},
			
			// 修改：handleCameraConfirm 处理程序
			async handleCameraConfirm(data) {
				console.log('相机确认完成，接收到数据:', data);

				// 关闭相机
				this.showCamera = false;
				this.$emit('camera-status-change', false);

				// 检查是否有图片数据
				if (!data || (!data.images && !data.url)) {
					console.log('没有新的图片需要处理');
					return;
				}

				try {
					// 处理图片数组
					if (data.images && data.images.length > 0) {
						console.log(`处理${data.images.length}张新图片`);
						for (const imageUrl of data.images) {
							await this.processNewImage(imageUrl);
						}
					}
					// 处理单张图片
					else if (data.url) {
						await this.processNewImage(data.url);
					}
				} catch (error) {
					console.error('处理照片失败:', error);
					uni.showToast({
						title: '处理照片失败',
						icon: 'none',
						duration: 1500
					});
				}
			},
			
			// 修改：handleCameraCancel 处理程序（处理识图照片）
			async handleCameraCancel(data) {
				if (!data || !data.url) {
					this.showCamera = false;
					this.$emit('camera-status-change', false);
					return;
				}

				try {
					console.log('收到识图照片数据:', data);

					// 添加识图照片（hidden为true，等待第一张照片上传后再显示）
					const file = {
						url: data.url,
						status: "local", // 改为"local"状态，避免触发上传
						message: "本地识图照片",
						name: `识图-${Date.now()}.jpg`,
						num: "999", // 设置为很大的编号，确保排在最后
						hidden: true, // 初始设置为隐藏
						isOCR: true // 标记为识图照片
					};

					if (!this.isProcessed(data.url)) {
						// 如果已经有识图照片，替换它
						const existingOcrIndex = this.fileList.findIndex(f => f.name?.startsWith('识图-'));
						if (existingOcrIndex !== -1) {
							this.fileList.splice(existingOcrIndex, 1, file);
						} else {
							this.fileList.push(file);
						}

						// 标记为已处理
						this.markAsProcessed(data.url);

						// 通知父组件更新
						this.$emit('input', this.fileList);

						console.log('识图照片已保存，等待第一张照片上传后再显示');
					}
				} catch (error) {
					console.error('处理识图照片失败:', error);
					uni.showToast({
						title: '处理照片失败',
						icon: 'none',
						duration: 1500
					});
				} finally {
					this.showCamera = false;
					this.$emit('camera-status-change', false);
				}
			},
			
			// 新增：单个文件上传方法
			async uploadSingleFile(file, index) {
				const parentPage = this.getParentPage();
				if (!parentPage || typeof parentPage.uploadFilePromise !== 'function') {
					throw new Error('上传功能不可用');
				}
				
				try {
					// 更新状态为上传中
					this.updateFileStatus(index, 'uploading', '上传中');
					
					// 上传文件
					const result = await parentPage.uploadFilePromise(file.url, index);
					
					// 更新状态为成功
					this.updateFileStatus(index, 'success', '', result);
					
					console.log(`图片 ${index + 1} 上传成功:`, result);
				} catch (error) {
					console.error(`图片 ${index + 1} 上传失败:`, error);
					this.updateFileStatus(index, 'error', '上传失败');
					throw error;
				}
			},
			
			// 新增：更新文件状态的辅助方法
			updateFileStatus(index, status, message, newUrl = null) {
				const file = this.fileList[index];
				if (file) {
					const updatedFile = {
						...file,
						status: status,
						message: message
					};
					if (newUrl) {
						updatedFile.url = newUrl;
						// 保留原有的num和name属性
						updatedFile.num = file.num;
						updatedFile.name = file.name;
					}
					this.fileList.splice(index, 1, updatedFile);
					this.$emit('input', this.fileList);
				}
			},
			
			// 新增：检查文件是否已存在
			isFileExists(url) {
				return this.fileList.some(file => file.url === url);
			},

			// 修改：添加到上传队列的方法
			async addToUploadQueue(file, index) {
				// 检查是否已在队列中
				const isInQueue = this.uploadQueue.some(item => item.file.url === file.url);
				if (!isInQueue) {
					console.log('添加新文件到上传队列:', file.url);
					
					// 获取父页面实例
					const parentPage = this.getParentPage();
					if (!parentPage || typeof parentPage.uploadFilePromise !== 'function') {
						console.error('上传功能不可用');
						return;
					}
					
					try {
						// 更新状态为上传中
						const fileIndex = this.fileList.indexOf(file);
						if (fileIndex !== -1) {
							this.fileList.splice(fileIndex, 1, {
								...file,
								status: 'uploading',
								message: '上传中'
							});
							this.$emit('input', this.fileList);
							// 检查上传状态并通知父组件
							this.checkUploadingStatus();
						}
						
						// 上传文件
						const result = await parentPage.uploadFilePromise(file.url, index);
						
						// 更新状态为成功
						if (fileIndex !== -1) {
							this.fileList.splice(fileIndex, 1, {
								...file,
								status: 'success',
								message: '上传成功',
								url: result, // 使用服务器返回的URL
								num: file.num, // 保留原有编号
								name: file.name // 保留原有名称
							});
							this.$emit('input', this.fileList);
							// 检查上传状态并通知父组件
							this.checkUploadingStatus();
							
							// 如果是识图照片，确保保留name属性
							if (file.name && file.name.startsWith('识图-')) {
								console.log(`识图照片上传成功，保留name属性: ${file.name}`);
							}
						}
						
						console.log(`文件上传成功: ${file.url} -> ${result}`);
					} catch (error) {
						console.error('文件上传失败:', error);
						// 更新状态为失败
						const fileIndex = this.fileList.indexOf(file);
						if (fileIndex !== -1) {
							this.fileList.splice(fileIndex, 1, {
								...file,
								status: 'error',
								message: '上传失败'
							});
							this.$emit('input', this.fileList);
							// 检查上传状态并通知父组件
							this.checkUploadingStatus();
						}
					}
				} else {
					console.log('文件已在上传队列中，跳过:', file.url);
				}
			},

			previewImage(index) {
				// 获取可见文件的URL列表
				const visibleUrls = this.visibleFileList.map(item => item.url);
				
				uni.previewImage({
					current: this.visibleFileList[index].url,
					urls: visibleUrls,
					indicator: 'number', // 显示数字指示器
					loop: true
				});
			},

			async handleOpenCamera() {
								
				// 检查用户是否可以上传书籍
				const canUpload = await checkMemberBooksCount();
				if (!canUpload) {
					// 如果不能上传，则直接返回，不继续执行
					return;
				}
				
				// 检查ISBN和书名是否存在
				if (!this.isbn || !this.bookName) {
					uni.showToast({
						title: '请先填写ISBN和书名',
						icon: 'none'
					});
					return;
				}
				if (this.fileList.length >= this.maxCount) {
					uni.showToast({
						title: `最多只能上传 ${this.maxCount} 张照片`,
						icon: 'none'
					});
					return;
				}

				this.showCamera = true;
				this.$emit('camera-status-change', true);
			},

			// 获取父组件实例的方法
			getParentPage() {
				let parent = this.$parent;
				while (parent) {
					if (parent.uploadFilePromise) {
						return parent;
					}
					parent = parent.$parent;
				}
				return null;
			},

			handleDelete(index) {
				// 获取要删除的可见文件
				const fileToDelete = this.visibleFileList[index];
				
				// 在完整fileList中找到对应索引并删除
				const actualIndex = this.fileList.findIndex(file => file === fileToDelete);
				if (actualIndex !== -1) {
					this.fileList.splice(actualIndex, 1);
					this.$emit('input', this.fileList);
				}
			},

			handleDeleteImage(event) {
				const index = event.index;
				// 获取可见文件列表中的文件
				if (index >= 0 && index < this.visibleFileList.length) {
					const fileToDelete = this.visibleFileList[index];
					
					// 在完整fileList中找到对应索引并删除
					const actualIndex = this.fileList.findIndex(file => file === fileToDelete);
					if (actualIndex !== -1) {
						this.fileList.splice(actualIndex, 1);
						this.$emit('input', this.fileList);
						uni.showToast({
							title: '已删除图片',
							icon: 'none',
							duration: 1000
						});
					}
				}
			},

			// 添加一个新方法，专门用于处理文件变化
			handleFileChange(newFileList) {
				console.log('CameraUpload组件收到文件变化:', newFileList);
				
				// 检查是否有识图照片
				const ocrPhoto = newFileList.find(file => file.name && file.name.startsWith('识图-'));
				
				if (ocrPhoto) {
					console.log('发现识图照片:', ocrPhoto);
					
					// 确保识图照片的num为2
					const updatedOcrPhoto = {
						...ocrPhoto,
						num: "2"
					};
					
					// 找出识图照片在列表中的位置
					const ocrIndex = newFileList.findIndex(file => file.name && file.name.startsWith('识图-'));
					
					// 更新列表中的识图照片
					if (ocrIndex !== -1) {
						newFileList.splice(ocrIndex, 1, updatedOcrPhoto);
					}
				}
				
				// 更新文件列表
				this.fileList = [...newFileList];
				
				// 触发输入事件
				this.$emit('input', this.fileList);
			}
		}
	};
</script>

<style scoped>
	.update {
		margin-top: 2rpx;
		background-color: #3f51b530;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16rpx;
	}

	.image-item {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.preview-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		border-radius: 50%;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 50rpx;
		z-index: 2;
	}

	.camera-icon {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		border-radius: 8rpx;
		cursor: pointer;
		outline: none !important;
		-webkit-tap-highlight-color: transparent;
	}

	.icon-img {
		width: 60rpx;
		height: 60rpx;
		outline: none !important;
		-webkit-tap-highlight-color: transparent;
	}

	/* 新增：上传状态样式 */
	.upload-status {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 4rpx;
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		z-index: 2;
	}

	.uploading {
		background-color: rgba(0, 122, 255, 0.7);
	}

	.error {
		background-color: rgba(255, 59, 48, 0.7);
	}
	
	/* 添加提示文字样式 */
	.photo-tip {
		position: fixed;
		top: 20rpx;
		left: 0;
		right: 0;
		z-index: 10000;
		text-align: center;
		padding: 10rpx;
	}
	
	.photo-tip text {
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
	}
</style>