<template>
	<view class="page padding">
		<view class="padding bg-white radius">
			<view class="text-gray margin-bottom">整改记录</view>
			<view class="padding solid radius">
				<view>
					<view style="color: #999; margin-bottom: 10rpx;">整改方案：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifyPlan || '暂无' }}</view>
				</view>
				<view class="margin-top">
					<view style="color: #999; margin-bottom: 10rpx;">整改措施：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectificationMeasures || '暂无' }}</view>
				</view>
				<view class="margin-top">
					<view style="color: #999; margin-bottom: 10rpx;">管控措施：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.controlMeasures || '暂无' }}</view>
				</view>
				<view class="margin-top">
					<view style="color: #999; margin-bottom: 10rpx;">整改完成情况：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifyResult || '暂无' }}</view>
				</view>
				<view class="margin-top">
					<view style="color: #999; margin-bottom: 10rpx;">计划投资资金：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ formatMoney(rectifyData.planCost) }}</view>
				</view>
				<view class="margin-top">
					<view style="color: #999; margin-bottom: 10rpx;">实际投资资金：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ formatMoney(rectifyData.actualCost) }}</view>
				</view>
				<view class="margin-top">
					<view style="color: #999; margin-bottom: 10rpx;">整改责任人：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifierName || '暂无' }}</view>
				</view>
				<view class="margin-top">
					<view style="color: #999; margin-bottom: 10rpx;">完成情况：</view>
					<view style="word-break: break-all; line-height: 1.6; color: #333;">{{ rectifyData.rectifyStatusName || '暂无' }}</view>
				</view>
				<view class="margin-top-sm">
					<view>整改附件：</view>
					<view class="flex margin-top-xs" style="flex-wrap: wrap; gap: 10rpx;" v-if="rectifyAttachments.length > 0">
						<image v-for="(img, idx) in rectifyAttachments" :key="idx" :src="getFullPath(img.filePath)" style="width: 136rpx;height: 136rpx;border-radius: 16rpx;" mode="aspectFill" @click="previewImage(idx)"></image>
					</view>
					<view v-else class="text-gray text-sm margin-top-xs">暂无附件</view>
				</view>
			</view>
			<view class="flex margin-bottom margin-top">
				<view class="text-gray">验收结果</view>
				<view class="text-red">*</view>
			</view>
			<view class="flex" style="gap: 20rpx;">
				<button :class="['result-btn', formData.result === 1 ? 'active' : '']" @click="formData.result = 1">通过</button>
				<button :class="['result-btn', formData.result === 2 ? 'active' : '']" @click="formData.result = 2">不通过</button>
			</view>
			<view class="flex margin-bottom margin-top">
				<view class="text-gray">验收备注</view>
			</view>
			<up-textarea v-model="formData.verifyRemark" placeholder="请输入验收备注"></up-textarea>
			<view class="flex margin-bottom margin-top">
				<view class="text-gray">验收图片/视频</view>
			</view>
			<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple imageMode="aspectFill" :maxCount="10"></up-upload>
			
			<!-- 隐藏的 Canvas，用于渲染防作弊时间戳水印 -->
			<canvas canvas-id="watermarkCanvas" :width="canvasWidth" :height="canvasHeight" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', position: 'fixed', left: '-9999px', top: '-9999px' }"></canvas>

			<!-- 电子签名部分 -->
			<view class="flex justify-between margin-bottom margin-top-sm align-center">
				<view class="text-gray flex align-center">
					电子签名
					<view class="text-red">*</view>
				</view>
				<button v-if="showCanvas" class="cu-btn sm round line-blue" style="margin: 0; padding: 0 20rpx; height: 50rpx; font-size: 22rpx;" @click="clearSignature">清除重写</button>
				<button v-else class="cu-btn sm round line-blue" style="margin: 0; padding: 0 20rpx; height: 50rpx; font-size: 22rpx;" @click="reSign">重新签名</button>
			</view>
			<view class="signature-box margin-bottom">
				<view v-if="!showCanvas" class="signature-display flex align-center justify-center" style="width: 100%; height: 160px; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center;">
					<image :src="signatureUrl" class="signature-img" mode="aspectFit" style="width: 100%; height: 100%;"></image>
				</view>
				<!-- 改为 v-if 解决小程序原生 canvas 真机渲染与生命周期挂载残留问题 -->
				<view v-if="showCanvas" class="signature-pad-wrap" style="border: 1px dashed #dcdfe6; border-radius: 8rpx; overflow: hidden; background-color: #f8f8f8;">
					<wd-signature 
						ref="signatureRef"
						:width="signatureWidth"
						:height="160"
						backgroundColor="#f8f8f8"
						penColor="#000000"
						:lineWidth="3"
						:enableHistory="false"
						@confirm="(res) => onSignatureConfirm(res.tempFilePath)"
						@start="isSignatureEmpty = false"
						@signing="isSignatureEmpty = false"
						@clear="isSignatureEmpty = true"
					>
						<template #footer></template>
					</wd-signature>
				</view>
			</view>

			<view class="flex margin-top-xl" style="gap: 20rpx;">
				<button class="round flex-sub" @click="handleCancel">取消</button>
				<button class="bg-blue round flex-sub" @click="handleSubmit">提交验收</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, watch, nextTick, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { acceptanceRectification, getHiddenDangerDetail } from '@/request/api.js';
	import { toImageUrl } from '@/request/request.js';
	import {
		createUploadListHandlers,
		buildAttachmentItem,
		uploadToCloud
	} from '@/utils/upload.js';
	
	// 页面参数
	const rectifyId = ref('');
	const hazardId = ref('');
	const assignId = ref('');
	
	// 整改记录数据
	const rectifyData = reactive({
		rectifyPlan: '',
		rectificationMeasures: '',
		controlMeasures: '',
		rectifyResult: '',
		planCost: null,
		actualCost: null,
		rectifierName: '',
		rectifyStatusName: ''
	});
	
	const formatMoney = (value) => {
		if (value === null || value === undefined || value === '') {
			return '暂无';
		}
		const num = Number(value);
		if (Number.isNaN(num)) {
			return '暂无';
		}
		return `${num.toFixed(2)} 元`;
	};
	
	// 整改附件
	const rectifyAttachments = ref([]);
	
	// 表单数据
	const formData = reactive({
		result: 1, // 验收结果 1.通过 2.不通过
		verifyRemark: '' // 验收备注
	});
	
	const fileList1 = ref([]);
	
	// 防作弊时间戳水印 Canvas 大小配置
	const canvasWidth = ref(300);
	const canvasHeight = ref(300);
	
	// 电子签名及草稿相关
	const showCanvas = ref(true);          // 是否显示签字画板
	const signatureUrl = ref('');          // 签名完整预览地址
	const signatureServerPath = ref('');  // 签名服务器相对路径
	const signatureWidth = ref(340);       // 签名画板宽度（动态计算）
	const signatureRef = ref(null);       // 签名组件 ref
	const isSignatureEmpty = ref(true);    // 签名是否为空
	const isSubmitting = ref(false);       // 是否正在提交表单
	
	const hasDraft = ref(false);
	const showRestoreBanner = ref(false); // 独立控制提示 Banner
	const isRestoring = ref(false); // 正在恢复标志
	const isInitialized = ref(false); // 初始化标识
	const signaturePaths = ref([]); // 缓存手写签名的绘制路径
	
	const getDraftKey = () => `draft_accept_${rectifyId.value || ''}`;
	
	// 获取完整图片路径
	const getFullPath = (filePath) => {
		if (!filePath) return '';
		if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
			return toImageUrl(filePath);
		}
		return toImageUrl(filePath);
	};
	
	// 图片预览
	const previewImage = (index) => {
		const urls = rectifyAttachments.value.map(item => getFullPath(item.filePath));
		uni.previewImage({
			current: index,
			urls: urls
		});
	};
	
	// 从 assigns 中找到包含整改记录的那一项
	const resolveAssignWithRectify = (assigns) => {
		if (!assigns?.length) return null;
		if (rectifyId.value) {
			const byRectifyId = assigns.find(
				(item) => item.rectify && String(item.rectify.rectifyId) === String(rectifyId.value)
			);
			if (byRectifyId) return byRectifyId;
		}
		if (assignId.value) {
			const byAssignId = assigns.find(
				(item) => String(item.assignId) === String(assignId.value) && item.rectify
			);
			if (byAssignId) return byAssignId;
		}
		return assigns.find((item) => item.rectify) || null;
	};

	const applyRectifyData = (rectify) => {
		if (!rectify) return;
		rectifyData.rectifyPlan = rectify.rectifyPlan || '';
		rectifyData.rectificationMeasures = rectify.rectificationMeasures || '';
		rectifyData.controlMeasures = rectify.controlMeasures || '';
		rectifyData.rectifyResult = rectify.rectifyResult || '';
		rectifyData.planCost = rectify.planCost ?? null;
		rectifyData.actualCost = rectify.actualCost ?? null;
		rectifyData.rectifierName = rectify.rectifierName || '';
		rectifyData.rectifyStatusName = rectify.rectifyStatusName || '';
		rectifyAttachments.value = rectify.attachments || [];
	};

	// 获取隐患详情
	const fetchDetail = async () => {
		if (!hazardId.value) return;

		try {
			const res = await getHiddenDangerDetail({
				hazardId: hazardId.value,
				assignId: assignId.value
			});
			if (res.code === 0 && res.data) {
				const assign = resolveAssignWithRectify(res.data.assigns);
				if (assign?.rectify) {
					applyRectifyData(assign.rectify);
					console.log('整改记录:', rectifyData);
					console.log('整改附件:', rectifyAttachments.value);
				}
			} else {
				uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
			}
		} catch (error) {
			console.error('获取隐患详情失败:', error);
			uni.showToast({ title: '请求失败', icon: 'none' });
		}
	};

	// 取消
	const handleCancel = () => {
		uni.navigateBack();
	};
	
	// 提交验收
	const handleSubmit = async () => {
		if (!rectifyId.value) {
			uni.showToast({
				title: '缺少整改ID',
				icon: 'none'
			});
			return;
		}

		// 电子签名验证与处理
		if (showCanvas.value) {
			if (!signatureRef.value || isSignatureEmpty.value) {
				uni.showToast({
					title: '请进行电子签名',
					icon: 'none'
				});
				return;
			}
			
			isSubmitting.value = true;
			uni.showLoading({ title: '正在提交...', mask: true });
			// 触发组件导出，导出成功会回调 onSignatureConfirm
			signatureRef.value.confirm();
		} else {
			// 已经有回显的签名
			if (!signatureServerPath.value) {
				uni.showToast({
					title: '请进行电子签名',
					icon: 'none'
				});
				return;
			}
			isSubmitting.value = true;
			uni.showLoading({ title: '正在提交...', mask: true });
			await executeSubmit();
		}
	};
	
	// 真正调取后台接口提交验收
	const executeSubmit = async () => {
		// 构建附件列表
		const attachments = fileList1.value
			.filter((f) => f.status === 'success')
			.map((file) => buildAttachmentItem(file));
		
		const params = {
			rectifyId: Number(rectifyId.value),
			result: formData.result,
			verifyRemark: formData.verifyRemark || '',
			attachments: attachments,
			signPath: signatureServerPath.value || '' // 电子签名路径
		};
		
		console.log('提交验收参数:', params);
		
		try {
			const res = await acceptanceRectification(params);
			uni.hideLoading();
			if (res.code === 0) {
				clearDraft(false);
				uni.showToast({
					title: '验收成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.showToast({
					title: res.msg || '验收失败',
					icon: 'none'
				});
			}
		} catch (error) {
			uni.hideLoading();
			console.error('验收失败:', error);
			uni.showToast({
				title: '请求失败',
				icon: 'none'
			});
		} finally {
			isSubmitting.value = false;
		}
	};
	
	const acceptUploadInstance = getCurrentInstance();
	const { afterRead, deletePic } = createUploadListHandlers(fileList1, {
		watermark: {
			canvasId: 'watermarkCanvas',
			canvasWidthRef: canvasWidth,
			canvasHeightRef: canvasHeight,
			instance: acceptUploadInstance
		}
	});

	// 电子签名画布手写线条变动回调
	const onSignatureChange = () => {
		isSignatureEmpty.value = false;
		signaturePaths.value = [];
		if (rectifyId.value) {
			saveDraft();
		}
	};

	// 保存草稿
	const saveDraft = () => {
		if (isRestoring.value || !isInitialized.value) return;
		const key = getDraftKey();
		const hasContent = formData.verifyRemark || 
		                   fileList1.value.length > 0 || 
		                   signatureServerPath.value ||
		                   signaturePaths.value.length > 0;
		if (!hasContent) {
			uni.removeStorageSync(key);
			hasDraft.value = false;
			return;
		}

		const data = {
			formData: {
				result: formData.result,
				verifyRemark: formData.verifyRemark
			},
			fileList1: fileList1.value,
			signatureServerPath: signatureServerPath.value,
			signatureUrl: signatureUrl.value,
			showCanvas: showCanvas.value,
			signaturePaths: signaturePaths.value
		};
		uni.setStorageSync(key, JSON.stringify(data));
		hasDraft.value = true;
	};

	// 清空草稿
	const clearDraft = (showToast = true) => {
		const key = getDraftKey();
		uni.removeStorageSync(key);
		hasDraft.value = false;
		showRestoreBanner.value = false;
		
		isRestoring.value = true;
		formData.result = 1;
		formData.verifyRemark = '';
		fileList1.value = [];
		signatureServerPath.value = '';
		signatureUrl.value = '';
		showCanvas.value = true;
		signaturePaths.value = [];
		if (signatureRef.value) {
			signatureRef.value.clear();
		}
		
		nextTick(() => {
			isRestoring.value = false;
		});
		if (showToast) {
			uni.showToast({ title: '草稿已清空', icon: 'none' });
		}
	};

	// 恢复草稿
	const restoreDraft = () => {
		const key = getDraftKey();
		const cached = uni.getStorageSync(key);
		if (cached) {
			try {
				const data = JSON.parse(cached);
				const hasContent = data.formData.verifyRemark || 
				                   (data.fileList1 && data.fileList1.length > 0) || 
				                   data.signatureServerPath ||
				                   (data.signaturePaths && data.signaturePaths.length > 0);
				if (!hasContent) {
					isInitialized.value = true;
					return;
				}

				isRestoring.value = true;
				formData.result = data.formData.result !== undefined ? data.formData.result : 1;
				formData.verifyRemark = data.formData.verifyRemark || '';
				fileList1.value = data.fileList1 || [];
				signatureServerPath.value = data.signatureServerPath || '';
				signatureUrl.value = data.signatureUrl || '';
				showCanvas.value = data.showCanvas !== undefined ? data.showCanvas : true;
				signaturePaths.value = data.signaturePaths || [];
				hasDraft.value = true;
				showRestoreBanner.value = true;

				// 延迟恢复签名画布线条重绘
				if (signaturePaths.value.length > 0) {
					setTimeout(() => {
						if (signatureRef.value) {
							isSignatureEmpty.value = false;
							// wot-design-uni auto rendering
						}
					}, 450);
				}

				nextTick(() => {
					isRestoring.value = false;
					isInitialized.value = true;
				});

				uni.showToast({
					title: '已自动恢复您上次未提交的内容',
					icon: 'none',
					duration: 2500
				});
			} catch (e) {
				console.error('解析草稿失败:', e);
				isRestoring.value = false;
				isInitialized.value = true;
			}
		} else {
			isInitialized.value = true;
		}
	};

	// 深度监听验收项和签名笔画变化，自动保存草稿
	watch(
		() => [
			formData.result,
			formData.verifyRemark, 
			fileList1.value, 
			signatureServerPath.value,
			signaturePaths.value
		],
		() => {
			if (rectifyId.value) {
				saveDraft();
			}
		},
		{ deep: true }
	);

	// 清除画布
	const clearSignature = () => {
		isSignatureEmpty.value = true;
		if (signatureRef.value) {
			signatureRef.value.clear();
		}
	};

	// 重新签字
	const reSign = () => {
		isSignatureEmpty.value = true;
		showCanvas.value = true;
		signatureUrl.value = '';
		signatureServerPath.value = '';
		nextTick(() => {
			if (signatureRef.value) {
				signatureRef.value.clear();
			}
		});
	};

	// 签名导出失败
	const onSignatureError = (err) => {
		console.error('签名绘制失败:', err);
		uni.showToast({ title: '签名生成失败', icon: 'none' });
		isSubmitting.value = false;
		uni.hideLoading();
	};

	// 签名导出成功回调
	const onSignatureConfirm = async (tempFilePath) => {
		try {
			const { url } = await uploadToCloud(tempFilePath);
			signatureServerPath.value = url;
			signatureUrl.value = url;
			showCanvas.value = false;
			isSignatureEmpty.value = false;

			if (isSubmitting.value) {
				await executeSubmit();
			}
		} catch (err) {
			isSubmitting.value = false;
			uni.hideLoading();
			console.error('签名上传失败:', err);
			uni.showToast({ title: '签名上传失败，请重试', icon: 'none' });
		}
	};

	onLoad((options) => {
		// 计算签名画布宽度
		try {
			const sysInfo = uni.getSystemInfoSync();
			signatureWidth.value = sysInfo.windowWidth - 40;
		} catch (e) {
			console.error('获取系统信息失败:', e);
		}
		if (options.rectifyId) {
			rectifyId.value = options.rectifyId;
		}
		if (options.hazardId) {
			hazardId.value = options.hazardId;
		}
		if (options.assignId) {
			assignId.value = options.assignId;
		}
		console.log('验收页面参数:', { rectifyId: rectifyId.value, hazardId: hazardId.value, assignId: assignId.value });
		
		// 获取隐患详情
		fetchDetail();
		
		// 页面打开时自动恢复草稿
		restoreDraft();
	});
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}
	
	.result-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 8rpx;
		background: #f5f5f5;
		color: #666;
		font-size: 28rpx;
		
		&::after {
			border: none;
		}
		
		&.active {
			background: #2667E9;
			color: #fff;
		}
	}

	// 签名相关样式
	.signature-box {
		width: 100%;
		min-height: 240rpx;
		background: #f8f8f8;
		border: 1rpx dashed #dcdfe6;
		border-radius: 8rpx;
		margin-top: 16rpx;
		
		.signature-img {
			width: 100%;
			height: 100%;
		}
		
		.signature-placeholder {
			color: #909399;
			font-size: 28rpx;
		}
	}
</style>
