<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="standard" label-width="100px" style="margin-top: 20px">
					<el-input v-model.trim="queryParams.standard" type="text" @keydown.enter.prevent style="width: 180px" placeholder="请输入关键字" :clearable="true" @keyup.enter="handleSearch" />
				</el-form-item>
				<el-form-item label="检测设备：" prop="equipment" label-width="100px" style="margin-top: 20px">
					<el-input v-model.trim="queryParams.equipment" type="text" @keydown.enter.prevent style="width: 180px" 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="dataList" size="small" v-loading="loading" border height="370px" header-row-class-name="list-header-row" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="40" align="center" :reserve-selection="true" />
			<el-table-column type="index" label="行号" width="50" align="center" />
			<el-table-column label="检测标准" align="center" prop="standard" />
			<el-table-column label="检测设备" align="center" prop="equipment" width="120" />
		</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 icon="Close" @click="close">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup>
import { listCategory, list } from '@/api/business/inspectionInstruction'
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { process_status } = proxy.useDict('process_status')
/** 工序变量 */
const total = ref(0)
const props = defineProps({
	multipleSelected: {
		type: Function,
		default: null,
	},
})

const { multipleSelected } = toRefs(props)
const dataList = ref([])
const visible = ref(false)
const loading = ref(false)
const data = reactive({
	queryParams: {
		type: 2,
		standard: '',
		equipment: '',
		pageSize: 10,
		pageNum: 1,
	},
})
const selections = ref([])
const { queryParams } = toRefs(data)

/**
 * 对话框打开 事件
 */
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
	queryParams.value.status = 'NA'
	list(queryParams.value).then((res) => {
		dataList.value = res.rows
		total.value = res.total
		loading.value = false
	})
}

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

/**  搜索 事件 */
function handleSearch(type) {
	if (type && type === 'clear') {
		queryParams.value = {
			processCode: '',
			processAlias: '',
			total: 0,
			pageSize: 10,
			pageNum: 1,
		}
	}
	getList()
}
/** 多选事件 */
function handleMultipleSelected() {
	if (multipleSelected.value) {
		multipleSelected.value(selections.value)
	}
	close()
}

defineExpose({
	open,
})
</script>
<style scoped></style>
