<template>
	<el-drawer title="外协单信息" :with-header="false" v-model="visible" direction="rtl" size="100%">
		<div class="form-container column-container">
			<div class="form-btns-container">
				<span class="title-label">
					<el-icon><Document /></el-icon>
					<span>收回单信息</span>
				</span>
				<el-button-group>
					<el-button v-if="editStatus" type="primary" icon="Finished" @click="submitForm"> 保存 </el-button>
					<el-button v-else type="primary" icon="Finished" @click="cancel"> 确定 </el-button>
				</el-button-group>

				<div class="close-btn" @click="cancel">
					<i class="fa fa-times" aria-hidden="true" />
					<!-- <span>关闭</span> -->
				</div>
			</div>
			<el-form ref="formRef" class="master-container" :model="form" v-loading="loading" label-width="120px">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="单据号" prop="formCode">
							<el-input v-model="form.formCode" readonly />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="表单日期" prop="formDate">
							<el-date-picker
							    v-if="editStatus"
								v-model="form.formDate"
								type="date"
								value-format="YYYY-MM-DD"
								style="width: 100%"
							>
							</el-date-picker>
							<el-input v-model="form.formDate" v-else readonly />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="form.remark" v-if ="editStatus" />
							<el-input v-model="form.remark" v-else readonly />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<!-- 渲染数据区 -->
			<div class="form-details-btns-container">
				<el-button type="primary" icon="Plus" v-if="editStatus" @click="handleShowDialogOutSourceDetails"> 添加收回明细 </el-button>
			</div>
			<div class="el-table-container">
				<div class="el-table-inner-container">
					<el-table v-loading="loading" :data="form.details" size="small" border height="100%">
						<el-table-column label="行号" type="index" align="center" width="48" />
						<el-table-column label="批次号" align="center" prop="lotCode" width="104" />
						<el-table-column label="产品描述" align="center" prop="productDescription" width="320" />
						<el-table-column label="产品数量" align="center" prop="productNum" width="96" />
						<el-table-column
							label ='原箱号'
							align="center"
							prop="originalCarrier"
							width="320"
						/>
						<el-table-column
							label="新箱号"
							align="center"
							prop="newCarrier"
							width="320"
						/>
						<el-table-column label="外协工序" align="center" prop="processAlias" width="320" />
						<el-table-column label="收回数量" align="center" prop="receiptNum" width="104"/>
						<el-table-column label="备注" align="center" prop="remark">
							<template #default="scope">
								<el-input v-model="scope.row.remark" v-if="editStatus" />
								<el-input v-model="scope.row.remark" v-else readonly />
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<!-- 外协商选择 -->
		<dialog-outsource-details
			ref="dialogOutsourceDetailsRef"
			:multiple-selected="handleMultipleSelectedOutsourceDetails"
		/>
	</el-drawer>
</template>
<script setup>
import { getReceipt, addReceipt, updateReceipt } from '@/api/business/returnReceipt'
import dialogOutsourceDetails from './DialogOutsourceDetails'
import { getTenant } from '@/utils/auth'
const emit = defineEmits(['handleSaveSuccess'])
const { proxy } = getCurrentInstance()
/** 表单抽屉 页变量 */
const loading = ref(false)
const visible = ref(false)
const editStatus = ref(true)
const webHost = import.meta.env.VITE_APP_BASE_API
const form = ref({})

/****************************  方法区  ****************************/
/** 打开抽屉 */
const open = (row) => {
	reset()
	visible.value = true
	if (row) {
		editStatus.value = row.editStatus == false?row.editStatus:true
		loading.value = true
		getReceipt(row.id).then((response) => {
			form.value = response.data
			loading.value = false
		})
	} else {
		form.value.supplierName = getTenant().tenantName
	}
}

/** 取消按钮 */
const cancel = () => {
	visible.value = false
	reset()
}

/** 表单重置 */
const reset = () => {
	form.value = {
		id: null,
		formCode: '',
		formDate: proxy.parseTime(new Date(), '{y}-{m}-{d}'),
		supplierId: '0',
		supplierName: '',
		remark: '',
		details: []
	}
	proxy.resetForm('formRef')
}
/***************************** 外协明细对话框相关 *****************************/
// 打开外协明细选择对话框
const handleShowDialogOutSourceDetails = () => {
	const outsourceDetailIds = form.value.details.map((item) => item.outsourceDetailId)
	proxy.$refs.dialogOutsourceDetailsRef.open(outsourceDetailIds)
}
// 外协明细选择带回
const handleMultipleSelectedOutsourceDetails = (selection) => {
	for(let i = 0;i<selection.length;i++) {
		for(let j = 0;j<selection[i].outsourcedOrderDetailProcessList.length;j++) {
			const newDetail = {
			outsourceDetailId: selection[i].id,
			productDescription: selection[i].productDescription,
			lotCode:selection[i].lotCode,
			lotId:selection[i].lotId,
			dayworkId:selection[i].dayworkId,
			productId:selection[i].productId,
			productNum: selection[i].productNum,
			receiptNum: selection[i].outsourcedOrderDetailProcessList[j].qualifiedNum,
			originalCarrier:selection[i].originalCarrier,
			originalCarrierCount:selection[i].originalCarrierCount,
			newCarrier:selection[i].newCarrier,
			newCarrierCount:selection[i].newCarrierCount,
			processNames: selection[i].processNames,
			remark: '',
			technologicalProcessId:selection[i].outsourcedOrderDetailProcessList[j].technologicalProcessId,
			technologyVersion:selection[i].outsourcedOrderDetailProcessList[j].technologyVersion,
			technologicalProcessDetailId:selection[i].outsourcedOrderDetailProcessList[j].technologicalProcessDetailId,
			processId:selection[i].outsourcedOrderDetailProcessList[j].processId,
			processAlias:selection[i].outsourcedOrderDetailProcessList[j].processAlias,
			processCode:selection[i].outsourcedOrderDetailProcessList[j].processCode,
			processStepNumber:selection[i].outsourcedOrderDetailProcessList[j].processStepNumber
			}
		    form.value.details.push(newDetail)
		}
		}
	}

/** 提交按钮 */
function submitForm() {
	proxy.$refs['formRef'].validate((valid) => {
		if (valid) {
			var flag = true;
			if(form.value.details.length==0) {
				flag = false
				proxy.$modal.msgError('收回明细不能为空')
			}
		for (let i = 0; i < form.value.details.length; i++) {
       		if (form.value.details[i].receiptNum <= 0) {
				flag = false;
				proxy.$modal.msgError("第" + (i + 1) + "行收回数量应大于0");
				return;
       		}
			}
			if(flag) {
			if (form.value.id != null) {
				updateReceipt(form.value).then((response) => {
					proxy.$modal.msgSuccess('修改成功')
					visible.value = false
					emit('handleSaveSuccess')
				})
			} else {
				addReceipt(form.value).then((response) => {
					proxy.$modal.msgSuccess('新增成功')
					visible.value = false
					emit('handleSaveSuccess')
				})
			}
			}
		}
	})
}

/** 暴露给父组件的方法 */
defineExpose({
	open
})
</script>
