<template>
	<view class="container">
		<u-form ref="formRef" :model="form" :rules="rules" label-position="top">
			<view class="card">
				<u-form-item>
					<view class="switch-wrap">
						<view class="top">
							<text class="t">第一步：上传图片</text>
							<view class="btn">
								<u-button type="primary" :disabled="!img" shape="circle" text="开始解析" @click="startCheckOcrRes"></u-button>
							</view>
						</view>
						<view class="info">
							<my-upload-img v-model="img"></my-upload-img>
						</view>
					</view>
				</u-form-item>
			</view>
			<view class="card" v-if="form.bodyList">
				<u-form-item>
					<view class="switch-wrap">
						<view class="top">
							<text class="t">第二步：编辑信息</text>
						</view>
						<view class="top" style="margin-top: 10px">
							<text class="t">供应商信息</text>
						</view>
						<view class="info">
							<view style="flex: 1">
								<selectVendor v-model="form.vendorId" />
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item>
					<view class="switch-wrap">
						<view class="top">
							<text class="t">耗材信息</text>
							<view class="btn">
								<u-button type="primary" shape="circle" text="选择耗材" @click="openSelectCons" v-if="!stockInStatus"></u-button>
							</view>
						</view>
						<view class="info">
							<view class="list-wrap">
								<view class="top-tips">
									<text class="tb">共{{ form.bodyList.length }}种耗材，</text>
									<text class="tb">
										金额合计：￥{{
											multiplyAndFormat(
												form.bodyList.reduce((sum, item) => sum + (item.purchasePrice || 0) * (item.inOutNumber || 0), 0),
												1
											)
										}}
									</text>
								</view>
								<view class="item" v-for="(item, index) in form.bodyList" :key="index">
									<view class="name">
										<text class="t">{{ item.conName }}</text>
										<view class="error-text" v-if="stockInStatus">
											<u-text type="success" v-if="item.conId" text="入库成功" size="12"></u-text>
											<u-text v-else type="error" :text="`入库失败：${item.failReason}`" size="12"></u-text>
										</view>
									</view>
									<view class="content">
										<view class="ctt-item">
											<text class="t1">单价</text>
											<text class="t2">{{ item.purchasePrice }}</text>
										</view>
										<view class="ctt-item">
											<text class="t1">单位</text>
											<text class="t2">{{ item.unitName }}</text>
										</view>
										<view class="ctt-item">
											<text class="t1">数量</text>
											<text class="t2">{{ item.inOutNumber }}</text>
										</view>
										<view class="ctt-item">
											<text class="t1">小计</text>
											<text class="t2">{{ multiplyAndFormat(item.purchasePrice || 0, item.inOutNumber || 0) }}</text>
										</view>
									</view>
									<view class="footer-btn-wrap">
										<view>
											<u-text type="primary" text="编辑" @click="editorFormHandle(item, index)"></u-text>
										</view>
										<view>
											<u-text type="error" text="删除" @click="form.bodyList.splice(index, 1)"></u-text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item>
					<view class="result_wrap" v-if="stockInStatus">
						上传完成 共{{ form.bodyList.length }}条数据，其中成功
						<u-text type="success" :text="form.bodyList.filter((item) => item.conId).length"></u-text>
						条，失败
						<u-text type="error" :text="form.bodyList.filter((item) => !item.conId).length"></u-text>
						条
					</view>
				</u-form-item>
			</view>
		</u-form>
		<u-popup :show="showEditorPopup" round="20" closeable @close="showEditorPopup = false">
			<view class="editor-popup" v-if="form.bodyList && form.bodyList.length">
				<view class="title">
					<text class="t">{{ form.bodyList[editorIndex].conName }}</text>
				</view>
				<view class="form">
					<u-form ref="editorFormRef" :model="editorForm" :rules="editorFormRules" label-width="60px">
						<u-form-item label="名称" prop="conName" required>
							<u-input v-model="editorForm.conName" :maxlength="50" placeholder="请输入耗材名称"></u-input>
						</u-form-item>
						<u-form-item label="单价" prop="purchasePrice" required>
							<u-input
								v-model="editorForm.purchasePrice"
								placeholder="请输入耗材单价"
								:maxlength="8"
								@change="
									(e) =>
										mySetTimeout(() => {
											editorForm.purchasePrice = filterNumberInput(e);
										}, 50)
								"
							>
								<template #suffix>
									<text>元</text>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item label="单位" prop="unitName" required>
							<u-input v-model="editorForm.unitName" :maxlength="20" placeholder="请选择耗材单位"></u-input>
						</u-form-item>
						<u-form-item label="数量" prop="inOutNumber" required>
							<u-input
								v-model="editorForm.inOutNumber"
								placeholder="请输入耗材数量"
								:maxlength="8"
								@change="
									(e) =>
										mySetTimeout(() => {
											editorForm.inOutNumber = filterNumberInput(e, 1);
										}, 50)
								"
							></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view class="footer">
					<view class="btn">
						<u-button style="width: 100%" shape="circle" @click="showEditorPopup = false">取消</u-button>
					</view>
					<view class="btn">
						<u-button type="primary" style="width: 100%" shape="circle" @click="editorFormSubmitHandle">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<my-footer-btn type="horizontal" showCancel @confirm="submitHandle" @cancel="backHandle"></my-footer-btn>
		<!-- 选择耗材 -->
		<selectCons ref="selectConsRef" @success="selectConsSuccess" />
		<view class="loading-page" v-if="checkLoading">
			<view class="loader"></view>
			<text class="t">{{ loadingText }}</text>
			<view class="btn">
				<u-button type="primary" @click="closeCheckOcrHandle">取消查询</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import _ from 'lodash';
import { ref, computed } from 'vue';
import { multiplyAndFormat, filterNumberInput } from '@/utils/index.js';
import { stockOcr, ocrResult } from '@/http/api/product.js';
import { consStockIn } from '@/http/api/cons.js';
import selectVendor from './components/select-vendor.vue';
import selectCons from './components/select-cons.vue';

const selectConsRef = ref(null);
function selectConsSuccess(e) {
	console.log('selectVendorHandle===', e);
	let arr = e.map((item) => ({
		id: item.id,
		conId: item.id,
		conName: item.conName,
		purchasePrice: item.price,
		unitName: item.conUnit,
		inOutNumber: 1
	}));
	form.value.bodyList.push(...arr);
}

function openSelectCons() {
	const comp = selectConsRef.value;
	if (comp && typeof comp.show === 'function') {
		comp.show();
	} else {
		console.warn('selectConsRef not ready or show() not available', comp);
	}
}

// 封装全局定时器，适配多端
const mySetTimeout = (fn, delay) => {
	if (typeof uni !== 'undefined') {
		return setTimeout(fn, delay); // 小程序
	} else {
		return window.setTimeout(fn, delay); // H5
	}
};

// 编辑耗材 start
const showEditorPopup = ref(false);
const editorFormRef = ref(null);
const editorIndex = ref(0);
const editorForm = ref({
	conName: '',
	purchasePrice: '',
	unitName: '',
	inOutNumber: ''
});
const editorFormRules = ref({
	conName: [
		{
			required: true,
			validator: (rule, value, callback) => {
				if (editorForm.value.conName === '') {
					return callback(new Error('请输入耗材名称'));
				} else {
					return true;
				}
			}
		}
	],
	purchasePrice: [
		{
			required: true,
			validator: (rule, value, callback) => {
				if (editorForm.value.purchasePrice === '') {
					return callback(new Error('请输入耗材单价'));
				} else {
					return true;
				}
			}
		}
	],
	unitName: [
		{
			required: true,
			validator: (rule, value, callback) => {
				if (editorForm.value.unitName === '') {
					return callback(new Error('请选择耗材单位'));
				} else {
					return true;
				}
			}
		}
	],
	inOutNumber: [
		{
			required: true,
			validator: (rule, value, callback) => {
				if (editorForm.value.inOutNumber === '') {
					return callback(new Error('请输入耗材数量'));
				} else {
					return true;
				}
			}
		}
	]
});

// 显示编辑
function editorFormHandle(item, index) {
	editorForm.value = _.cloneDeep(item);
	editorIndex.value = index;
	showEditorPopup.value = true;
}

function editorFormSubmitHandle() {
	editorFormRef.value
		.validate()
		.then(() => {
			form.value.bodyList[editorIndex.value] = _.cloneDeep(editorForm.value);
			showEditorPopup.value = false;
		})
		.catch(() => {});
}
// 编辑耗材 end

const resId = ref(null);
const img = ref('');
const stockInStatus = ref(false);
const form = ref({});
// const form = ref({
// 	actualPaymentAmount: null,
// 	amountPayable: 1680,
// 	batchNo: 'XS25110410003',
// 	bodyList: [
// 		{ conId: '', conName: '哈根达斯-小杯(草莓)', failReason: '', inOutNumber: 24, purchasePrice: 35, subTotal: 840, unitName: '杯' },
// 		{ conId: '', conName: '哈根达斯-小杯(香草)', failReason: '', inOutNumber: 24, purchasePrice: 35, subTotal: 840, unitName: '杯' },
// 		{ conId: '', conName: '哈根达斯-小杯(比利时巧克力)', failReason: '', inOutNumber: 12, purchasePrice: 0, subTotal: 0, unitName: '杯' },
// 		{ conId: '', conName: '哈根达斯-小杯(夏威夷果仁)', failReason: '', inOutNumber: 12, purchasePrice: 0, subTotal: 0, unitName: '杯' }
// 	],
// 	inOutDate: '2025-11-04',
// 	ocrSaleOrder: {
// 		customerName: '大客河景餐厅',
// 		date: '2025-11-04',
// 		documentType: '销售单',
// 		items: [
// 			{ conName: '哈根达斯-小杯(草莓)', inOutNumber: '24', purchasePrice: '35', spec: '81g', subTotal: '840', unitName: '杯' },
// 			{ conName: '哈根达斯-小杯(香草)', inOutNumber: '24', purchasePrice: '35', spec: '81g', subTotal: '840', unitName: '杯' },
// 			{ conName: '哈根达斯-小杯(比利时巧克力)', inOutNumber: '12', purchasePrice: '0', spec: '81g', subTotal: '0', unitName: '杯' },
// 			{ conName: '哈根达斯-小杯(夏威夷果仁)', inOutNumber: '12', purchasePrice: '0', spec: '81g', subTotal: '0', unitName: '杯' }
// 		],
// 		operator: '陈钦楠',
// 		orderNumber: 'XS25110410003',
// 		remark: '',
// 		totalAmount: '1680'
// 	},
// 	paymentDate: null,
// 	remark: '',
// 	unInCons: [],
// 	vendorId: null
// });

const rules = ref({});

// 查询OCR结果
async function startCheckOcrRes() {
	try {
		resId.value = await stockOcr({ url: img.value });
		stockInStatus.value = false;
		startQueryInterval()
			.then((res) => {
				// console.log('查询成功', JSON.stringify(res));
				form.value = res;
			})
			.catch((error) => {
				console.error('查询失败', error);
			});
	} catch (error) {
		console.log(error);
	}
}

// 开始查询ocr结果
// 启动查询方法，每5秒查询一次，五分钟后超时停止查询
const checkLoading = ref(false);
const speed = 10000; // 查询间隔时间，单位毫秒
const timeout = 300000; // 超时时间，单位毫秒
// const timeout = 15000; // 超时时间，单位毫秒
const interval = ref(null);
const checkNumber = ref(0);
const loadingText = computed(() => `每${speed / 1000}秒查询1次，已查询：${checkNumber.value}次`);
function startQueryInterval() {
	return new Promise((resolve, reject) => {
		if (!resId.value) {
			reject(new Error('无效的 resId，无法查询'));
			return;
		}

		// 重置计数并显示 loading
		checkNumber.value = 0;
		checkLoading.value = true;

		const startTime = Date.now();
		interval.value = null;

		async function checkOnce() {
			try {
				checkNumber.value++;
				console.log('ocr checkNumber:', checkNumber.value);
				checkLoading.value = true;
				const res = await ocrResult({ id: resId.value });
				if (res && res.batchNo) {
					uni.showToast({
						title: '查询成功',
						icon: 'none'
					});
					setTimeout(() => {
						checkLoading.value = false;
					}, 1000);
					clearInterval(interval.value);
					resolve(res);
					return;
				}

				// 如果还未超时，则继续等待下一轮查询
				if (Date.now() - startTime >= timeout) {
					setTimeout(() => {
						checkLoading.value = false;
					}, 1000);
					uni.showToast({
						title: '查询超时',
						icon: 'none'
					});
					clearInterval(interval.value);
					reject(new Error('查询超时'));
				}
			} catch (error) {
				uni.showToast({
					title: '查询失败',
					icon: 'none'
				});
				setTimeout(() => {
					checkLoading.value = false;
				}, 1000);
				clearInterval(interval.value);
				reject(error);
			}
		}

		// 立即执行一次查询，然后按间隔继续查询
		checkOnce();
		interval.value = setInterval(checkOnce, speed);
	});
}

// 取消查询
function closeCheckOcrHandle() {
	checkLoading.value = false;
	clearInterval(interval.value);
}

// 提交批量入库
async function submitHandle() {
	try {
		console.log('submitHandle', form.value);
		uni.showLoading({
			title: '提交中...',
			mask: true
		});
		const res = await consStockIn(form.value);
		form.value = res;
		stockInStatus.value = true;
		setTimeout(() => {
			uni.showToast({
				title: '提交成功',
				icon: 'none'
			});
		}, 100);
	} catch (error) {
		console.log(error);
	}
	uni.hideLoading();
}

// 返回
function backHandle() {
	uni.navigateBack();
}
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.container {
	padding: 28upx;
}
.card {
	background-color: #fff;
	border-radius: 20px;
	padding: 28upx;
	&:not(:last-child) {
		margin-bottom: 28upx;
	}
}
.switch-wrap {
	flex: 1;
	width: 100%;
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&.column {
			align-items: flex-start;
			flex-direction: column;
		}
		.two {
			display: flex;
			flex-direction: column;
			padding-right: 28upx;
		}
		.t {
			font-size: 32upx;
			color: #333;
			font-weight: bold;
		}
		.tips {
			font-size: 24upx;
			color: #666;
		}
	}
	.info {
		padding-top: 16upx;
		display: flex;
		align-items: center;
		gap: 16upx;
		.i {
			font-size: 28upx;
			color: #666;
		}
		.ipt {
			flex: 1;
		}
		.t {
			font-size: 24upx;
			color: #666;
		}
		.list-wrap {
			flex: 1;
			.top-tips {
				.t {
					font-size: 28upx;
					color: #333;
				}
			}
			.item {
				margin-top: 28upx;
				background-color: #f8f8f8;
				border-radius: 12upx;
				padding: 20upx;
				.name {
					display: flex;
					flex-direction: column;
					.t {
						font-size: 28upx;
						color: #333;
					}
					.error-text {
						display: flex;
					}
				}
				.content {
					display: flex;
					padding: 28upx 0;

					.ctt-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						&:last-child {
							align-items: flex-end;
						}
						.t1 {
							color: #666;
							font-size: 28upx;
						}
						.t2 {
							color: #333;
							font-size: 28upx;
						}
					}
				}
				.footer-btn-wrap {
					display: flex;
					gap: 28upx;
					justify-content: flex-end;
					.btn {
						width: 160upx;
					}
				}
			}
		}
		.package-wrap {
			flex: 1;
			.list {
				.item {
					border: 1px solid #ececec;
					border-radius: 12upx;
					padding: 20upx;
					&:not(:first-child) {
						margin-top: 28upx;
					}
					.header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 20upx;
						.t {
							font-size: 28upx;
							color: #333;
						}
						.del {
							display: flex;
							align-items: center;
							gap: 12upx;
						}
					}
					.input-wrap {
						display: flex;
						gap: 20upx;
						padding-bottom: 20upx;
						.btn {
							display: flex;
							align-items: center;
							gap: 12upx;
							.t {
								color: #318afe;
							}
						}
					}
					.table-wrap {
						padding-bottom: 20upx;
						margin-bottom: 20upx;
						.tab-head {
							background-color: #f8f8f8;
						}
						.tr {
							display: flex;
							gap: 12upx;
							padding: 20upx;
							border-bottom: 1px solid #ececec;
							.td {
								flex: 1;
								&:nth-child(1) {
									flex: 2;
								}
								&:last-child {
									flex: 0.5;
									display: flex;
									align-items: center;
									justify-content: flex-end;
								}
								.t {
									font-size: 28upx;
									color: #333;
								}
								.del {
									color: red;
									font-size: 28upx;
								}
							}
						}
					}
					.select_num_wrap {
						padding-bottom: 28upx;
						.label {
							padding-bottom: 20upx;
							.t {
								color: #333;
								font-size: 32upx;
							}
						}
					}
				}
			}
			.package-wrap-btn {
				display: flex;
				justify-content: center;
				padding-top: 28upx;
				.btn {
					display: flex;
					gap: 8upx;
					align-items: center;
					.t {
						font-size: 28upx;
						color: #318afe;
						font-weight: bold;
					}
				}
			}
		}
		.step-wrap {
			flex: 1;
			.table-wrap {
				padding-bottom: 20upx;
				margin-bottom: 20upx;
				.tab-head {
					background-color: #f8f8f8;
				}
				.tr {
					display: flex;
					gap: 12upx;
					padding: 20upx;
					border-bottom: 1px solid #ececec;
					.td {
						flex: 1;
						display: flex;
						gap: 20upx;
						align-items: center;
						&:last-child {
							flex: 0.6;
						}
						.t {
							font-size: 28upx;
							color: #333;
						}
						.edit {
							color: #318afe;
							font-size: 28upx;
						}
						.del {
							color: red;
							font-size: 28upx;
						}
					}
				}
			}
		}
	}
}
.editor-popup {
	padding: 0 28upx;
	.title {
		padding: 28upx 0;
		display: flex;
		justify-content: center;
		.t {
			font-size: 32upx;
			font-weight: bold;
		}
	}
	.form {
		padding: 28upx;
	}
	.footer {
		display: flex;
		gap: 28upx;
		.btn {
			flex: 1;
		}
	}
}
.result_wrap {
	display: flex;
}
.loading-page {
	width: 100vw;
	height: 100vh;
	display: flex;
	gap: 20upx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	padding-bottom: 10vh;
	.loader {
		width: 50px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, #ffa516);
		-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
		animation: l13 1s infinite linear;
	}
	@keyframes l13 {
		100% {
			transform: rotate(1turn);
		}
	}
	.t {
		font-size: 28upx;
		color: #666;
	}
	.btn {
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
