<template>
	<el-dialog
		title="添加收回明细"
		v-model="visible"
		width="900px"
		height="400px"
		@close="close"
		append-to-body
		draggable
	>
		<el-form ref="dialogForm" :model="queryParams" :inline="true" style="padding-top: 16px">
			<el-form-item label="批次号：" prop="lotCode" label-width="70">
				<el-input
					v-model.trim="queryParams.lotCode"
					type="text"
					@keydown.enter.prevent
					style="width: 160px"
					placeholder="请输入批次号"
					:clearable="true"
					@keyup.enter="handleSearch"
				/>
			</el-form-item>
			<el-form-item label="产品描述：" prop="productDescription" label-width="90">
				<el-input
					v-model.trim="queryParams.productDescription"
					type="text"
					@keydown.enter.prevent
					style="width: 140px"
					placeholder="请输入产品描述"
					:clearable="true"
					@keyup.enter="handleSearch"
				/>
			</el-form-item>
			<el-form-item label="外协商：" prop="supplierName" label-width="70">
				<el-input
					v-model.trim="queryParams.supplierName"
					type="text"
					@keydown.enter.prevent
					style="width: 140px"
					placeholder="请输入外协商"
					:clearable="true"
					@keyup.enter="handleSearch"
				/>
			</el-form-item>
			<el-form-item label-width="20px">
				<el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
			</el-form-item>
			<!-- <div style="float: inline-end">
          <span
		    v-if="!showAll"
            style="
              color: rgba(0, 203, 117, 1);
              font-size: 16px;
              font-weight: 400;
              line-height: 40px;
              cursor: pointer;
              display: inline-block;
            "
            @click="handleShowAllDetail"
            >+查看所有明细</span
          >
		  <span
		  v-else
            style="
              color: rgba(0, 203, 117, 1);
              font-size: 16px;
              font-weight: 400;
              line-height: 40px;
              cursor: pointer;
              display: inline-block;
            "
            @click="handleShowFinishedDetail"
            >+查看已完成明细</span
          >
        </div> -->
		</el-form>

		<el-table
			ref="dialogTable"
			:data="dataList"
			size="small"
			v-loading="loading"
			border
			height="370px"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="40" align="center" />
			<el-table-column type="index" label="行号" width="50" align="center" />
			<el-table-column label="外协商" align="center" prop="supplierName" width="120" />
			<el-table-column label="批次号" align="center" prop="lotCode" width="96" />
			<el-table-column label="料号" align="center" prop="productCode" width="96" />
			<el-table-column label="产品描述" align="center" prop="productDescription" />
			<el-table-column label="箱号" align="center" prop="originalCarrier" width="120">
				<template #default="scope">
        <!-- 检查 scope.row.newCarrier 是否有值 -->
        <span v-if="scope.row.newCarrier">{{ scope.row.newCarrier }}</span>
        <span v-else>{{ scope.row.originalCarrier }}</span>
      </template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" icon="Check" :disabled="selections.length === 0" @click="handleMultipleSelected">
					确 定
				</el-button>
				<el-button type="danger" icon="Close" @click="close">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup>
import { listDetailForReceipt,getNotFinishedOutsourceDetailList } from '@/api/business/outsourcedOrderDetail'
const { proxy } = getCurrentInstance()
const total = ref(0)
const props = defineProps({
	multipleSelected: {
		type: Function,
		default: null
	}
})

const { multipleSelected } = toRefs(props)
const dataList = ref([])
const visible = ref(false)
const showAll = ref(false)
const loading = ref(false)
const queryParams = ref({
	existingOutsourceDetailIds: [],
	productDescription: '',
	pageNum: 1,
	pageSize: 10
})
const selections = ref([])

/**
 * 对话框打开 事件
 */
function open(data) {
	visible.value = true
	getList()
}

/**
 * 对话框关闭 事件
 */
function close() {
	proxy.$refs.dialogForm.resetFields()
	proxy.$refs.dialogTable.clearSelection()
	queryParams.value.pageNum = 1
	visible.value = false
}

/**
 * 加载数据
 */
function getList() {
	loading.value = true
	getNotFinishedOutsourceDetailList(queryParams.value).then((res) => {
		dataList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
	selections.value = selection
}

/**  搜索 事件 */
function handleSearch() {
	if(showAll) {
		getAllList()
	}else {
	getList()
	}
}
/** 多选事件 */
function handleMultipleSelected() {
	if (multipleSelected.value) {
		multipleSelected.value(selections.value)
	}
	close()
}

defineExpose({
	open
})
</script>
