<template>
	<div class="page-container column-container">
		<!-- 搜索区 -->
		<el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true" style="margin-right: 0px">
			<el-form-item label="批次号：" prop="lotCode">
				<el-input
					v-model="queryParams.lotCode"
					placeholder="请输入批次号"
					style="width: 144px"
					clearable
					@keyup.enter="handleQuery"
				/>
			</el-form-item>
            <el-form-item label="产品描述：" prop="productDescription">
				<el-input
					v-model="queryParams.productDescription"
					placeholder="请输入产品描述"
					style="width: 144px"
					clearable
					@keyup.enter="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="收回日期：" >
				<el-date-picker
					v-model="queryParams.startTime"
					type="date"
					style="width: 144px"
					value-format="YYYY-MM-DD"
					placeholder="选择起始日期"
					clearable
				/>
				<span style="margin: 0 4px">~</span>
				<el-date-picker
					v-model="queryParams.endTime"
					type="date"
					style="width: 144px"
					value-format="YYYY-MM-DD"
					placeholder="选择结束日期"
					clearable
				/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 功能按钮区 -->
		<div class="list-btns-container">
			<el-button type="primary" icon="Plus" @click="handleShowFormDialog(null)"> 新增 </el-button>
		</div>
		<!-- 渲染数据区 -->
		<div class="el-table-container">
			<div class="el-table-inner-container">
				<el-table v-loading="loading" :data="dataList" size="small" border height="100%" >
                    <el-table-column type="index" label="行号" width="50" align="center"/>
					<el-table-column label="外协商" align="center" prop="supplierName" width="104" />
					<el-table-column label="批次号" align="center" prop="lotCode" width="120" />
                    <el-table-column label="产品描述" align="center" prop="productDescription" />
					<el-table-column label="收回日期" align="center" prop="formDate" width="120">
						<template #default="scope">
							{{ parseTime(scope.row.formDate, '{y}-{m}-{d}') }}
						</template>
					</el-table-column>
					<el-table-column label="外协工序" align="center" prop="processNames" ></el-table-column>
                    <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" class-name="small-padding fixed-width" width="160">
						<template #default="scope">
                            <el-button v-if="scope.row.status == 1" link type="primary" icon="View" @click="handleShowFormDialog(scope.row)"> 查看 </el-button>
                            <el-button v-else link type="warning" icon="Edit" @click="handleShowFormDialog(scope.row)"> 编辑 </el-button>
                        </template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<!-- 分页 -->
		<pagination
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<!-- 表单 -->
		<receipt-detail-form ref="receiptDetailRef" @handleSaveSuccess="getList" />
	</div>
</template>

<script setup name="returnReceiptDetail">
import { getFinishedOutsourceDetailList } from '@/api/business/outsourcedOrderDetail'
import receiptDetailForm from './form'
const { proxy } = getCurrentInstance()

const dataList = ref([])
const loading = ref(true)
const ids = ref([])
const total = ref(0)
/** 查询对象 */
const queryParams = ref({
	pageNum: 1,
	pageSize: 10,
	formCode: null,
	formDate: null,
	startTime:null,
	endTime:null,
    supplierName:null
})

/***********************  方法区  ****************************/

/** 查询外协单主
带箱方式，是整单的。如果换新箱子，明细中，都需要更换箱子列表 */
function getList() {
	loading.value = true
	getFinishedOutsourceDetailList(queryParams.value).then((response) => {
		dataList.value = response.rows
		total.value = response.total
		loading.value = false
	})
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1
	getList()
}

/** 重置按钮操作 */
function resetQuery() {
	queryParams.value= ref({
	pageNum: 1,
	pageSize: 10,
	formCode: null,
	formDate: null,
	startTime:null,
	endTime:null
})
	handleQuery()
}
/**复选框选中数据 */
function handleSelectionChange(selection) {
	ids.value = selection.map((item) => item.id)
}
/** 修改按钮操作 */
function handleShowFormDialog(row) {
	if (row) {
    row.editStatus = false;
  }
  proxy.$refs.receiptDetailRef.open(row ? row : null);
}

/** 导出按钮操作 */
function handleExport() {
	proxy.download(
		'business/returnReceipt/export',
		{
			...queryParams.value
		},
		`order_${new Date().getTime()}.xlsx`
	)
}
getList()
</script>
