<template>
	<el-dialog title="添加收回明细" v-model="visible" width="800px" 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="productDescription" label-width="100">
				<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="newCarrier" label-width="70">
				<el-input
					v-model.trim="queryParams.newCarrier"
					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>
		<div><span style="color: red;">注：如果选择框为灰色，外协厂已填写收回单，暂未提交！</span></div>
		<el-table ref="dialogTable" :data="dataList" row-key="id" size="small" v-loading="loading" border height="370px"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="40" align="center" :selectable="handleAllowSelected"/>
			<el-table-column type="index" label="行号" width="50" align="center" />
			<el-table-column label="批次号" align="center" prop="lotCode" width="96" />
			<el-table-column label="产品描述" align="center" prop="productDescription" />
			<el-table-column label="箱号" align="center" prop="originalCarrier" width="220">
				<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="handleChangePageSize" />
		<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, listDetailForAllReceipt } 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
	showAll.value = false
	queryParams.value.existingOutsourceDetailIds = data.outsourceDetailIds
	queryParams.value.supplierId = data.supplierId
	getList()
}

//查看对应外协所有批次
function handleShowAllDetail() {
	queryParams.value.pageNum =1
	queryParams.value.pageSize = 10
	showAll.value = true
	getAllList()
}
//查看对应外协已完成批次
function handleShowFinishedDetail() {
	queryParams.value.pageNum =1
	queryParams.value.pageSize = 10
	showAll.value = false
	getList()
}
function handleAllowSelected(row) {
  return row.returnReceiptDetailList.length >0?false:true
}
//查找分配给外协商的所有明细，除了已经德迈仕已经确认的批次
function getAllList() {
	loading.value = true
	listDetailForAllReceipt(queryParams.value).then((res) => {
		dataList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}

function handleChangePageSize() {
	if (showAll.value) {
		console.log("1")
		getAllList()
	} else {
		console.log("2")
		getList()
	}
}

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

/**
 * 查看已完成的外协单明细（已完成代表分配给外协商的活，都报完工）
 */
function getList() {
	loading.value = true
	listDetailForReceipt(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.value) {
		getAllList()
	} else {
		getList()
	}
}
/** 多选事件 */
function handleMultipleSelected() {
	if (multipleSelected.value) {
		multipleSelected.value(selections.value)
	}
	close()
}

defineExpose({
	open
})
</script>
