<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="technologyVersion" label-width="96px" style="margin-top: 20px">
					<el-select v-model="queryParams.technologyVersion" placeholder="请选择" style="width: 72px" @change="handleTechnologyVersionChange">
						<el-option
							v-for="item in technologyVersions"
							:key="item.technologyVersion"
							:label="item.technologyVersion"
							:value="item.technologyVersion"
							
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="工序名称：" prop="processAlias" label-width="160px" style="margin-top: 20px">
					<el-input
						v-model.trim="queryParams.processAlias"
						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="processList"
			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="processCode" />
			<el-table-column label="工序简称" align="center" prop="processAlias" />
		</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 { getTechnologicalForSupplier } from '@/api/business/technologicalProcess'
import { getProcessesForSupplier } from '@/api/business/technologicalProcessDetail'
const { proxy } = getCurrentInstance()
/** 工序变量 */
const total = ref(0)
const props = defineProps({
	multipleSelected: {
		type: Function,
		default: null
	},
	productId: {
		type: String,
		default: ''
	},
	supplierId: {
		type: String,
		default: ''
	}
})

const { multipleSelected, productId,supplierId } = toRefs(props)
const processList = ref([])
const visible = ref(false)
const loading = ref(false)
const queryParams = ref({
	productId: '',
	supplierId: '',
	technologyVersion: '',
	processAlias: '',
	pageNum: 1,
	pageSize: 10
})
const technologyVersions = ref([])
const selections = ref([])

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

/**
 * 对话框关闭 事件
 */
function close() {
	proxy.$refs.dialogForm.resetFields()
	proxy.$refs.dialogTable.clearSelection()
	queryParams.value.pageNum = 1
	visible.value = false
}
function getTechnologicalVersionList() {
	queryParams.value.productId = productId.value
	queryParams.value.supplierId = supplierId.value
	getTechnologicalForSupplier({ productId: queryParams.value.productId }).then((res) => {
		technologyVersions.value = res.data
		if (technologyVersions.value.length > 0) {
			queryParams.value.technologyVersion = technologyVersions.value[0].technologyVersion
			queryParams.value.technologicalProcessId = technologyVersions.value[0].id
			getList()
		} else {
			loading.value = false
		}
	})
}
/**
 * 加载数据
 */
function getList() {
	loading.value = true
	getProcessesForSupplier(queryParams.value).then((res1) => {
		processList.value = res1.data
		loading.value = false
	})
}
//切换工艺版本
function handleTechnologyVersionChange() {
	console.log(queryParams.value.technologyVersion)
	let index = technologyVersions.value.findIndex(item => item.technologyVersion === queryParams.value.technologyVersion)
	queryParams.value.technologicalProcessId = technologyVersions.value[index].id
	console.log(queryParams.value.technologicalProcessId)
	proxy.$refs.dialogTable.clearSelection();
     getList()
	 
}

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

/**  搜索 事件 */
function handleSearch() {
	getList()
}
/** 多选事件 */
function handleMultipleSelected() {
	if (multipleSelected.value) {
		selections.value.forEach(element => {
			element.technologyVersion = queryParams.value.technologyVersion
			element.technologicalProcessId = queryParams.value.technologicalProcessId
		});
		console.log(selections.value)
		multipleSelected.value(selections.value)
	}
	close()
}

defineExpose({
	open
})
</script>
