<template>
	<view class="scan-page">
		<!-- 扫码区域容器 -->
		<view class="scan-window">
			<!-- html5-qrcode 扫描器容器 -->
			<view id="qr-reader" class="qr-reader"></view>
			
			<!-- 扫描装饰 -->
			<view class="scan-mask">
				<view class="scan-frame">
					<view class="scan-line" v-if="scanning"></view>
					<view class="corner top-left"></view>
					<view class="corner top-right"></view>
					<view class="corner bottom-left"></view>
					<view class="corner bottom-right"></view>
				</view>
			</view>
			
			<view class="scan-tip">{{ tipText }}</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<view class="action-item" @click.stop="chooseImage">
				<!-- <view class="action-icon">📷</view> -->
				<uv-icon name="photo" size="24" color="#fff"></uv-icon>
				<text>相册</text>
			</view>
			
			<view class="action-item" @click.stop="toggleInput">
				<!-- <view class="action-icon">✏️</view> -->
				<uv-icon name="edit-pen" size="24" color="#fff"></uv-icon>
				<text>手动输入</text>
			</view>
			
			
			<view class="action-item" @click.stop="goBack">
				<!-- <view class="action-icon">←</view> -->
				<uv-icon name="arrow-left" size="24" color="#fff"></uv-icon>
				<text>返回</text>
			</view>
		</view>

		<!-- 手动输入弹窗 -->
		<uv-popup ref="inputPopup" mode="center" round="16" :closeOnClickOverlay="true">
			<view class="input-dialog">
				<view class="dialog-title">手动输入设备号</view>
				<input 
					v-model="manualDeviceNo" 
					placeholder="请输入设备上的编号" 
					class="device-input"
					type="text"
				/>
				<view class="dialog-btns">
					<button class="cancel-btn" @click="closeInput">取消</button>
					<button class="confirm-btn" @click="confirmManualInput">确定</button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { getQueryString } from '../../util/index.js';
import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode';

const inputPopup = ref(null);
const manualDeviceNo = ref('');
const tipText = ref('正在初始化...');
const scanning = ref(false);
const hasFlash = ref(false);
const flashOn = ref(false);

let html5QrCode = null;
let isProcessing = false; // 防止重复处理

// 统一扫描配置：增大识别区域，提升低清晰度二维码识别成功率
const getScanConfig = () => ({
	fps: 12,
	qrbox: (viewfinderWidth, viewfinderHeight) => {
		const minEdge = Math.min(viewfinderWidth, viewfinderHeight);
		const size = Math.max(220, Math.floor(minEdge * 0.72));
		return { width: size, height: size };
	},
	disableFlip: false,
	formatsToSupport: [Html5QrcodeSupportedFormats.QR_CODE],
	experimentalFeatures: {
		useBarCodeDetectorIfSupported: true
	}
});

// 初始化扫码
const initScan = async () => {
	try {
		tipText.value = '正在初始化...';
		console.log('=== 开始初始化扫码 ===');
		
		// 检查浏览器支持
		if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
			throw new Error('您的浏览器不支持摄像头访问');
		}
		
		// 等待 DOM 渲染
		await new Promise(resolve => setTimeout(resolve, 500));
		
		// 检查容器元素
		const readerElement = document.getElementById('qr-reader');
		if (!readerElement) {
			throw new Error('扫码容器元素未找到');
		}
		console.log('✓ 扫码容器元素已找到');
		
		// 创建 Html5Qrcode 实例
		html5QrCode = new Html5Qrcode('qr-reader', {
			verbose: false // 关闭详细日志
		});
		console.log('✓ Html5Qrcode 实例创建成功');
		
		// 启动扫描
		await startScanning();
		
	} catch (err) {
		console.error('❌ 初始化失败:', err);
		handleInitError(err);
	}
};

// 开始扫描
const startScanning = async () => {
	try {
		if (!html5QrCode) {
			throw new Error('Html5Qrcode 实例不存在');
		}
		
		tipText.value = '正在启动摄像头...';
		console.log('=== 开始启动扫描 ===');
		console.log('html5QrCode 实例:', html5QrCode);
		console.log('html5QrCode.start 方法:', typeof html5QrCode.start);
		
		// 配置扫描参数
		const config = getScanConfig();
		
		console.log('扫描配置:', config);
		console.log('准备调用 html5QrCode.start()...');
		
		// 启动扫描 - 使用 { facingMode: "environment" } 优先后置摄像头
		const startResult = await html5QrCode.start(
			{ facingMode: "environment" },
			config,
			onScanSuccess,
			onScanFailure
		);
		
		console.log('start() 调用结果:', startResult);
		
		scanning.value = true;
		tipText.value = '将二维码放入框内扫描';
		console.log('✅ 扫描已成功启动');
		
		// 延迟隐藏默认UI
		setTimeout(() => {
			hideDefaultUI();
		}, 200);
		
	} catch (err) {
		console.error('❌ 启动扫描失败:', err);
		console.error('错误详情:', {
			name: err.name,
			message: err.message,
			stack: err.stack
		});
		
		// 尝试使用前置摄像头
		console.log('尝试使用前置摄像头...');
		try {
			const config = getScanConfig();
			
			await html5QrCode.start(
				{ facingMode: "user" },
				config,
				onScanSuccess,
				onScanFailure
			);
			
			scanning.value = true;
			tipText.value = '将二维码放入框内扫描';
			console.log('✅ 使用前置摄像头启动成功');
			
			setTimeout(() => {
				hideDefaultUI();
			}, 200);
			
		} catch (err2) {
			console.error('❌ 前置摄像头也失败:', err2);
			
			// 最后尝试：不指定摄像头
			console.log('最后尝试：使用默认摄像头...');
			try {
				const config = getScanConfig();
				
				// 获取摄像头列表
				const cameras = await Html5Qrcode.getCameras();
				console.log('可用摄像头:', cameras);
				
				if (cameras && cameras.length > 0) {
					const cameraId = cameras[0].id;
					console.log('使用摄像头ID:', cameraId);
					
					await html5QrCode.start(
						cameraId,
						config,
						onScanSuccess,
						onScanFailure
					);
					
					scanning.value = true;
					tipText.value = '将二维码放入框内扫描';
					console.log('✅ 使用默认摄像头启动成功');
					
					setTimeout(() => {
						hideDefaultUI();
					}, 200);
				} else {
					throw new Error('未找到可用的摄像头');
				}
			} catch (err3) {
				console.error('❌ 所有方式都失败:', err3);
				throw err3;
			}
		}
	}
};

// 隐藏默认UI
const hideDefaultUI = () => {
	try {
		const shaded = document.getElementById('qr-shaded-region');
		if (shaded) {
			shaded.style.border = 'none';
			console.log('✓ 已隐藏默认边框');
		}
	} catch (err) {
		console.warn('隐藏默认UI失败:', err);
	}
};

// 扫描成功回调
const onScanSuccess = (decodedText, decodedResult) => {
	// 防止重复处理
	if (isProcessing) {
		console.log('正在处理中，忽略重复扫码');
		return;
	}
	
	if (!scanning.value) {
		console.log('扫描已停止，忽略结果');
		return;
	}
	
	isProcessing = true;
	
	console.log('========== 扫码成功 ==========');
	console.log('解码文本:', decodedText);
	console.log('解码结果:', decodedResult);
	console.log('==============================');
	
	// 验证结果
	if (!decodedText || decodedText.trim() === '') {
		console.error('扫码结果为空');
		isProcessing = false;
		return;
	}
	
	const finalResult = decodedText.trim();
	
	// 停止扫描
	stopScan().then(() => {
		// 震动反馈
		if (navigator.vibrate) {
			navigator.vibrate(200);
		}
		
		// 通过全局事件通知首页
		uni.$emit('h5ScanSuccess', {
			result: finalResult,
			scanType: 'QR_CODE',
			path: finalResult
		});
		
		// 不要立即返回，等待首页处理完成
		// 首页会在处理完成后自动关闭扫码页
		console.log('扫码结果已发送，等待首页处理...');
	});
};

// 扫描失败回调
const onScanFailure = (error) => {
	// 正常情况，不需要处理
};

// 停止扫描
const stopScan = async () => {
	if (!html5QrCode) {
		return;
	}
	
	console.log('=== 停止扫描 ===');
	scanning.value = false;
	flashOn.value = false;
	
	try {
		const isScanning = html5QrCode.isScanning;
		if (isScanning) {
			await html5QrCode.stop();
			console.log('✓ Html5Qrcode 已停止');
		}
	} catch (err) {
		console.warn('停止扫描失败:', err);
	}
};

// 处理初始化错误
const handleInitError = (err) => {
	console.error('处理初始化错误:', err);
	
	let errMsg = '初始化失败';
	let errDetail = '';
	
	if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
		errMsg = '摄像头权限被拒绝';
		errDetail = '请在浏览器设置中允许访问摄像头';
	}
	 else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
		errMsg = '未找到可用的摄像头';
		errDetail = '请确保设备有摄像头';
	}
	 else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
		errMsg = '摄像头被占用';
		errDetail = '请关闭其他使用摄像头的应用';
	}
	 else if (err.name === 'NotSupportedError') {
		errMsg = '浏览器不支持';
		errDetail = '请使用现代浏览器访问';
	}
	//  else if (location.protocol !== 'https:' && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
	// 	errMsg = '需要 HTTPS 环境';
	// 	errDetail = '摄像头功能需要在安全环境下使用';
	// }
	 else {
		errMsg = err.message || '摄像头启动失败';
		errDetail = '请尝试刷新页面或使用其他方式';
	}
	
	tipText.value = errMsg;
	
	// 显示错误提示，提供备选方案
	uni.showModal({
		title: errMsg,
		content: errDetail + '\n\n您可以：\n1. 从相册选择二维码图片\n2. 手动输入设备号',
		showCancel: true,
		cancelText: '返回',
		confirmText: '手动输入',
		success: (res) => {
			if (res.confirm) {
				toggleInput();
			} else if (res.cancel) {
				goBack();
			}
		}
	});
};

// 从相册选择图片识别
const chooseImage = async () => {
	// #ifdef H5
	const input = document.createElement('input');
	input.type = 'file';
	input.accept = 'image/*';
	input.onchange = async (e) => {
		const file = e.target.files[0];
		if (!file) {
			return;
		}
		
		uni.showLoading({ title: '正在识别...' });
		
		try {
			// 先停止摄像头扫描
			const wasScanning = scanning.value;
			if (wasScanning) {
				await stopScan();
				console.log('已停止摄像头扫描，准备识别图片');
				// 等待停止完成
				await new Promise(resolve => setTimeout(resolve, 300));
			}
			
			if (!html5QrCode) {
				html5QrCode = new Html5Qrcode('qr-reader', { verbose: false });
			}
			
			// 使用 html5-qrcode 扫描文件
			const result = await html5QrCode.scanFile(file, true);
			console.log(result);
			uni.hideLoading();
			
			if (result) {
				console.log('图片识别成功:', result);
				
				// 震动反馈
				if (navigator.vibrate) {
					navigator.vibrate(200);
				}
				
				// 通过全局事件通知首页
				uni.$emit('h5ScanSuccess', {
					result: result,
					scanType: 'QR_CODE',
					path: result
				});
				
				// 不要立即返回，等待首页处理完成
				console.log('图片识别结果已发送，等待首页处理...');
			} else {
				uni.showToast({ title: '未识别到二维码', icon: 'none' });
				// 识别失败，重新启动摄像头扫描
				if (wasScanning) {
					setTimeout(async () => {
						await startScanning();
					}, 500);
				}
			}
		} catch (err) {
			console.error('图片识别失败:', err);
			uni.hideLoading();
			uni.showToast({ title: '识别失败', icon: 'none' });
			// 识别失败，重新启动摄像头扫描
			setTimeout(async () => {
				try {
					await startScanning();
				} catch (e) {
					console.error('重新启动扫描失败:', e);
				}
			}, 500);
		}
	};
	input.click();
	// #endif
	
	// #ifndef H5
	uni.chooseImage({
		count: 1,
		sourceType: ['album'],
		success: (res) => {
			uni.showToast({ title: '该功能仅在H5环境可用', icon: 'none' });
		}
	});
	// #endif
};

// 打开手动输入弹窗
const toggleInput = () => {
	if (inputPopup.value) {
		inputPopup.value.open();
	}
};

// 关闭手动输入弹窗
const closeInput = () => {
	if (inputPopup.value) {
		inputPopup.value.close();
	}
};

// 确认手动输入
const confirmManualInput = () => {
	const deviceNo = manualDeviceNo.value.trim();
	
	if (!deviceNo) {
		uni.showToast({ title: '请输入设备号', icon: 'none' });
		return;
	}
	
	closeInput();
	stopScan();
	
	// 处理可能包含 URL 的情况
	let finalDeviceNo = deviceNo;
	if (deviceNo.includes('deviceNo=')) {
		finalDeviceNo = getQueryString(deviceNo, 'deviceNo') || deviceNo;
	}
	
	// 通过全局事件通知首页
	uni.$emit('h5ScanSuccess', {
		result: finalDeviceNo,
		scanType: 'MANUAL'
	});
	
	// 不要立即返回，等待首页处理完成
	console.log('手动输入结果已发送，等待首页处理...');
};

// 返回
const goBack = () => {
	stopScan();
	uni.navigateBack();
};

onMounted(() => {
	console.log('扫码页面已挂载');
	
	// 延迟初始化，确保 DOM 已渲染
	setTimeout(() => {
		console.log('开始初始化扫码');
		initScan();
	}, 500);
});

onUnmounted(() => {
	console.log('扫码页面卸载，清理资源');
	isProcessing = false;
	
	if (html5QrCode) {
		stopScan().then(() => {
			html5QrCode.clear().catch(err => {
				console.warn('清理 Html5Qrcode 实例失败:', err);
			});
			html5QrCode = null;
		});
	}
});
</script>

<style lang="scss" scoped>
.scan-page {
	width: 100vw;
	height: 100vh;
	background: #000;
	position: relative;
	overflow: hidden;
}

.scan-window {
	width: 100%;
	height: 100%;
	position: relative;
	
	.qr-reader {
		width: 100%;
		height: 100%;
		
		// 覆盖 html5-qrcode 默认样式
		:deep(#qr-shaded-region) {
			border: none !important; // 隐藏默认边框
			background: transparent !important; // 透明背景
		}
		
		:deep(video) {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
			display: block !important;
		}
		
		:deep(canvas) {
			display: none !important;
		}
		
		// 隐藏 html5-qrcode 的所有内置 UI 元素
		:deep(#qr-shaded-region > div) {
			display: none !important;
		}
	}
}

.scan-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 10;
	background: rgba(0, 0, 0, 0.5); // 添加半透明遮罩
	
	.scan-frame {
		width: 500rpx;
		height: 500rpx;
		position: relative;
		background: transparent; // 扫描区域透明
		box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5); // 使用 box-shadow 创建外部遮罩
		
		.scan-line {
			width: 100%;
			height: 4rpx;
			background: linear-gradient(to right, transparent, #3EAB64, transparent);
			position: absolute;
			top: 0;
			animation: scanMove 3s linear infinite;
			box-shadow: 0 0 10rpx #3EAB64;
		}
		
		.corner {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			border: 6rpx solid #3EAB64;
			box-shadow: 0 0 10rpx rgba(62, 171, 100, 0.5);
		}
		
		.top-left { top: -2rpx; left: -2rpx; border-right: none; border-bottom: none; }
		.top-right { top: -2rpx; right: -2rpx; border-left: none; border-bottom: none; }
		.bottom-left { bottom: -2rpx; left: -2rpx; border-right: none; border-top: none; }
		.bottom-right { bottom: -2rpx; right: -2rpx; border-left: none; border-top: none; }
	}
}

@keyframes scanMove {
	0% { top: 0; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

.scan-tip {
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-size: 28rpx;
	padding: 0 40rpx;
	line-height: 1.6;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.8);
	z-index: 11;
	font-weight: 500;
}

.bottom-actions {
	position: absolute;
	bottom: 80rpx;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	padding: 0 60rpx;
	z-index: 20;
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 20rpx;
		padding: 12rpx 16rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		min-width: 100rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		
		.action-icon {
			font-size: 40rpx;
			line-height: 1;
		}
		
		text {
			color: #fff;
			font-size: 22rpx;
			white-space: nowrap;
		}
		
		&:active {
			transform: scale(0.95);
			background: rgba(62, 171, 100, 0.3);
		}
	}
}

.input-dialog {
	width: 600rpx;
	background: #fff;
	padding: 40rpx;
	border-radius: 24rpx;
	
	.dialog-title {
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		margin-bottom: 40rpx;
		color: #333;
	}
	
	.device-input {
		height: 88rpx;
		background: #F8F9FA;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		border: 1rpx solid #eee;
		margin-bottom: 40rpx;
		box-sizing: border-box;
		
		&:focus {
			border-color: #3EAB64;
			background: #fff;
		}
	}
	
	.dialog-btns {
		display: flex;
		gap: 20rpx;
		
		button {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			border-radius: 40rpx;
			border: none;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
			}
		}
		
		.cancel-btn {
			background: #f5f5f5;
			color: #666;
		}
		
		.confirm-btn {
			background: #3EAB64;
			color: #fff;
		}
	}
}
</style>
