<template>
	<el-dialog title="添加产品" v-model="visible" width="800px" height="400px" @close="close" append-to-body draggable>
		<el-form ref="dialogForm" class="master-container" :model="queryParams" style="align-items: center">
			<div style="display: flex">
				<el-form-item label="产品描述：" prop="description" label-width="104px" style="margin-top: 20px">
					<el-input v-model.trim="queryParams.description" type="text" @keydown.enter.prevent style="width: 320px"
						placeholder="请输入关键字" :clearable="true" @keyup.enter="handleSearch" />
				</el-form-item>
				<el-form-item label-width="20px" style="margin-top: 20px">
					<el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
				</el-form-item>
			</div>
		</el-form>

		<el-table ref="dialogTable" :data="productList" 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="productCode" width="120" />
			<el-table-column label="产品描述" align="center" prop="description" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="text" size="small" @click="handleSingleSelected(scope.row)">选择</el-button>
				</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" />
	</el-dialog>
</template>
<script setup>
import { listProduct } from '@/api/business/product'
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { process_status } = proxy.useDict('process_status')
/** 工序变量 */
const total = ref(0)
const props = defineProps({
	singleSelected: {
		type: Function,
		default: null
	}
})

const { singleSelected } = toRefs(props)
const productList = ref([])
const visible = ref(false)
const loading = ref(false)
const queryParams = ref({
	supplierId: '',
	description: '',
	pageNum: 1,
	pageSize: 10
})
const selections = ref([])

/**
 * 对话框打开 事件
 */
function open() {
	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
	listProduct(queryParams.value).then((res) => {
		productList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}

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

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

function handleSingleSelected(row) {
	if (singleSelected.value) {
		singleSelected.value(row)
	}
	close()
}

defineExpose({
	open
})
</script>
