<template>
	<!--XXX 2025-04-06 工单报工（打印标签后，扫标签报工版本【新】） -->
	<view>
		<!-- TODO 暂时报工逻辑 -->
		<uni-card>
			<uni-forms label-width="80px" label-align="right">
				<uni-forms-item label="报工数" name="finishedNum">
					<uni-easyinput type="number" v-model.number="finishedNum" placeholder="请输入报工数" />
				</uni-forms-item>
			</uni-forms>
		</uni-card>
		<view class="bottom-box">
			<button :disabled="loading" type="primary" @click="submit">工单报工</button>
		</view>
		<view>
			<uni-popup ref="dialogRef" type="dialog">
				<uni-popup-dialog
					:title="dialog.title"
					:content="dialog.content"
					:type="dialog.type"
					cancelText="关闭"
					confirmText="确认"
					@confirm="dialogConfirm"
					@close="dialogClose"
				></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
// 工单相关报工基础Api
import {
	InspectionBoxLabel,
	InspectionProductLabel,
	BoxLabelAndProductLabel,
	getWorkOrderDetail,
	doStartWorkOrder,
	updateReport,
	doFinishWorkOrder
} from '@/api/workorder/index.js';
export default {
	props: {
		formData: {
			type: Object
		}
	},
	data() {
		return {
			loading: false,
			dialogRef: null,
			dialog: {
				title: '操作提醒',
				content: '',
				type: 'warn'
			},
			finishedNum: 0
		};
	},
	methods: {
		submit() {
			let that = this;
			this.loading = true;
			const _workorder = this.formData.fkWorkorder;
			// 不防错报工
			const params = {
				workorder: _workorder,
				reportNum: this.finishedNum
			};

			updateReport(params)
				.then((res) => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: '报工成功',
							duration: 2000,
							success() {
								const params2 = {
									workorder: _workorder
								};
								doFinishWorkOrder(params2).then((res) => {
									if (res.code === 200) {
										uni.showToast({
											icon: 'success',
											title: '完成工单'
										});
										that.loading = false;
									}
									this.$emit('submit');
								});
							}
						});
					}
				})
				.finally(() => {
					this.loading = true;
				});
		},
		dialogConfirm() {
			this.dialogClose();
		},
		dialogClose() {
			this.$refs.dialogRef.close();
		}
	}
};
</script>

<style scoped>
.report-form-item {
	display: flex;
}
.report-form-label {
	width: 80px;
	font-size: 14px;
}
.report-form-value {
	font-size: 16px;
}
.report-box {
	height: 30vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.report-box-title {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
.report-box-parts-list {
	width: 86vw;
	height: 48vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	will-change: scroll-position;
}
.reprot-box-parts-list-item {
	padding: 5px;
	margin: 0px; /* 添加外边距 */
	width: calc(100% - 10px); /* 调整宽度以适应内边距 */
	height: 50px;
	border: 1px solid #c1c1c1; /* 调整边框颜色为更柔和的灰色 */
	display: flex;
	flex-direction: row;
	transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.reprot-box-parts-list-item:hover {
	background-color: #f5f5f5; /* 添加悬停效果 */
}
.reprot-box-parts-list-item-left {
	width: 75%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.reprot-box-parts-list-item-title {
	font-size: 18px;
	font-weight: 600;
}
.reprot-box-parts-list-item-content {
	font-size: 14px;
}
.reprot-box-parts-list-item-right {
	width: 25%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
</style>
