<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>
				<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" 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" disabled placeholder="系统自动生成" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="表单日期" prop="formDate">
							<el-date-picker
								readonly
								v-model="form.formDate"
								type="date"
								value-format="YYYY-MM-DD"
								placeholder="请选择表单日期"
								style="width: 100%"
							>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="外协商名称" prop="supplierName">
							<el-input v-model="form.supplierName" readonly placeholder="请输入外协商名称">
								<template #append>
									<el-button icon="Search" @click="handleShowDialogSuppliers" />
								</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="送货方式" prop="deliveryMethod">
							<el-select v-model="form.deliveryMethod" placeholder="请选择" readonly>
								<el-option v-for="dict in deliveryMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="运费单价" prop="freightPrice">
							<el-input-number v-model="form.freightPrice" :min="0" :precision="2" controls-position="right" readonly />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="运费总价" prop="freightAmount">
							<el-input-number
								v-model="form.freightAmount"
								:min="0"
								:precision="2"
								controls-position="right"
								readonly
							/>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="带箱方式：" prop="packagingMethod">
							<el-select v-model="form.packagingMethod" placeholder="请选择" readonly>
								<el-option v-for="dict in packagingMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="结算方式：" prop="settlementType">
							<el-select v-model="form.settlementType" placeholder="请选择" readonly>
								<el-option v-for="dict in settlementType" :key="dict.value" :label="dict.label" :value="dict.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="form.remark" placeholder="请输入备注" readonly />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<!-- 渲染数据区 -->
			<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="form.packagingMethod === '0' ? '箱号' : '原箱号'"
							align="center"
							prop="originalCarrier"
							width="320"
						/>
						<el-table-column
							v-if="form.packagingMethod === '1'"
							label="新箱号"
							align="center"
							prop="new_carrier"
							width="320"
						/>
						<el-table-column label="外协工序" align="center" prop="processNames" width="320" />
						<el-table-column label="备注" align="center" prop="remark" />
					</el-table>
				</div>
			</div>
		</div>
	</el-drawer>
</template>
<script setup>
import { getOrder } from '@/api/business/outsourcedOrder'
const { proxy } = getCurrentInstance()
/** 父组件传参 */
const props = defineProps({
	deliveryMethod: {
		type: Array,
		default: []
	},
	settlementType: {
		type: Array,
		default: []
	},
	packagingMethod: {
		type: Array,
		default: []
	}
})
const { deliveryMethod, packagingMethod, settlementType } = toRefs(props)
/** 字典数组区 */
/** 表单抽屉 页变量 */

const loading = ref(false)
const visible = ref(false)
const webHost = import.meta.env.VITE_APP_BASE_API
const form = ref({})

/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
	reset()
	loading.value = true
	visible.value = true
	getOrder(id).then((response) => {
		form.value = response.data
		loading.value = false
	})
}

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

/** 表单重置 */
function reset() {
	form.value = {
		id: null,
		tenantId: '0',
		formCode: '',
		formDate: proxy.parseTime(new Date(), '{y}-{m}-{d}'),
		supplierId: '0',
		supplierName: '',
		deliveryMethod: '0',
		freightPrice: 0.0,
		freightAmount: 0.0,
		packagingMethod: '0',
		remark: '',
		details: []
	}
	proxy.resetForm('formRef')
}

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