<template>
	<div class="page-container column-container">
		<section class="list-part-container column-container" style="flex: 1">
			<!-- 搜索区 -->
			<el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item class="section-title" label="产品管理" />
				<el-form-item label="产品类别：">
					<el-select v-model="queryParams.type" clearable placeholder="请选择类别" style="width: 130px">
						<el-option v-for="dict in product_type" :key="dict.value" :label="dict.label"
							:value="dict.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="客户集团简称：">
					<el-input placeholder="请输入客户集团简称" v-model.trim="queryParams.companyAlias" style="width: 150px" clearable
						@keyup.enter="handleQueryProduct" @keydown.enter.prevent />
				</el-form-item>
				<el-form-item label="图号：">
					<el-input placeholder="请输入产品图号" v-model.trim="queryParams.drawingNumber" style="width: 130px" clearable
						@keyup.enter="handleQueryProduct" @keydown.enter.prevent />
				</el-form-item>
				<el-form-item label="规格：">
					<el-input placeholder="请输入产品规格" v-model.trim="queryParams.specification" style="width: 130px" clearable
						@keyup.enter="handleQueryProduct" @keydown.enter.prevent />
				</el-form-item>
				<el-form-item label="料号：">
					<el-input placeholder="请输入产品料号" v-model.trim="queryParams.productCode" style="width: 130px" clearable
						@keyup.enter="handleQueryProduct" @keydown.enter.prevent />
				</el-form-item>
				<el-form-item label="产品描述：">
					<el-input placeholder="请输入产品描述" v-model.trim="queryParams.description" style="width: 130px" clearable
						@keyup.enter="handleQueryProduct" @keydown.enter.prevent />
				</el-form-item>
				<el-form-item>
					<el-button type="info" icon="Search" @click="handleQueryProduct">搜索</el-button>
				</el-form-item>
			</el-form>
			<!-- 列表区 -->
			<div class="el-table-container">
				<div class="el-table-inner-container">
					<el-table ref="productTable" v-loading="productLoading" :data="productList" highlight-current-row
						height="100%" @current-change="handleCurrentProductChange">
						<el-table-column type="index" label="行号" width="50" align="center" />
						<el-table-column label="料号" align="center" prop="productCode" />
						<el-table-column label="预入仓库" align="center" prop="preStock" />
						<el-table-column label="类别" align="center" prop="type">
							<template #default="scope">
								<dict-tag :options="product_type" :value="scope.row.type" />
							</template>
						</el-table-column>
						<el-table-column label="轴类型大类" width="150px" align="center" prop="shaftBroadCategoryCode">
							<template #default="scope">
								<dict-tag :options="product_dtype" :value="scope.row.shaftBroadCategoryCode" />
							</template>
						</el-table-column>
						<el-table-column label="轴类型" align="center" prop="shaftCategoryCode" />
						<el-table-column label="规格" align="center" prop="specification" />
						<el-table-column label="图号" align="center" width="110" prop="drawingNumber" />
						<el-table-column label="客户集团简称" align="center" width="120px" prop="companyAlias" />
						<el-table-column label="产品描述" align="center" width="200px" prop="description" />
						<el-table-column label="直径" align="center" prop="diameter" />
						<el-table-column label="成品长度" align="center" prop="lenght" />
						<el-table-column label="厚度" align="center" prop="thickness" />
						<el-table-column label="客户代号" align="center" prop="companyCode" />
						<el-table-column label="销售员编码" align="center" prop="salesmanCode" />
						<el-table-column label="保管员编码" align="center" prop="stockKeeperCode" />
						<el-table-column label="调度员编号" align="center" prop="dispatcherCode" />
						<el-table-column label="备注" align="center" prop="remark" />
						<el-table-column label="产品状态" align="center" prop="productStatusCode">
							<template #default="scope">
								<dict-tag :options="product_status_code" :value="scope.row.productStatusCode" />
							</template>
						</el-table-column>
						<el-table-column label="生产类型" align="center" prop="productionTypeCode">
							<template #default="scope">
								<dict-tag :options="production_type_code" :value="scope.row.productionTypeCode" />
							</template>
						</el-table-column>
						<el-table-column label="技术员编码" align="center" prop="technicianCode" />
					</el-table>
				</div>
			</div>
		</section>
		<!-- 分页 -->
		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" @pagination="getList" />

		<section class="list-part-container row-container" style="flex: 1">
			<section class="list-part-container" style="flex: 1">
				<!-- 下边页面开始 -->
				<el-form class="list-search-container" :inline="true">
					<el-form-item class="section-title" label="标准工艺库" />
				</el-form>
				<div class="el-table-container">
					<div class="el-table-inner-container">
						<el-table ref="technologicalProcessTable" :data="technologicalProcessList ? technologicalProcessList : []"
							v-loading="technologicalProcessLoading" highlight-current-row height="100%" size="small"
							header-row-class-name="list-header-row" @current-change="handleCurrentTechnologicalProcessChange">
							<el-table-column type="index" label="行号" width="50" align="center" />
							<el-table-column label="工艺版本" align="center" prop="technologyVersion" />
						</el-table>
					</div>
				</div>
			</section>
			<section class="list-part-container" style="flex: 2">
				<el-form class="list-search-container list-search-container-child" :inline="true">
					<el-form-item class="section-title" label="工序清单" />
				</el-form>
				<div class="el-table-container">
					<div class="el-table-inner-container">
						<el-table :data="technologicalprocessDetailList" v-loading="technologicalprocessDetailLoading" size="small"
							highlight-current-row height="100%" @current-change="handleCurrentTechnologicalprocessDetailChange">
							<el-table-column type="index" label="行号" width="50" align="center" />
							<el-table-column label="工序步骤编号" width="100" align="center" prop="processStepNumber" />
							<el-table-column label="工序编码" align="center" prop="processCode" />
							<el-table-column label="工序简称" align="center" prop="processAlias" />
						</el-table>
					</div>
				</div>
			</section>
			<section class="list-part-container" style="flex: 3">
				<el-form class="list-search-container list-search-container-child" ref="queryRef" :inline="true">
					<el-form-item class="section-title" label="检查指导项目" />
					<el-form-item>
						<el-button type="primary" icon="Plus" @click="handleAddInstruction"
							v-hasPermi="['business:productInspectionInstruction:add']"
							:disabled="!currentTechnologicalProcessDetail.id">
							添加 </el-button>
					</el-form-item>
				</el-form>
				<div class="el-table-container">
					<div class="el-table-inner-container">
						<el-table :data="inspectionInstructionList" v-loading="inspectionInstructionLoading" size="small"
							highlight-current-row height="100%">
							<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="standard" />
							<el-table-column label="使用设备" width="120" align="center" prop="equipment" />
							<el-table-column label="操作" width="48px" align="center">
								<template #default="scope">
									<el-button link type="danger" icon="Delete" @click="handleDelInstruction(scope.row, scope.$index)"
										v-hasPermi="['business:productInspectionInstruction:remove']" />
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</section>
		</section>
		<instructionChoiceDialog ref="instructionChoiceDialogRef" :multiple="true"
			:multiple-selected="inspectionInstructionSelected"
			:selectableHandler="(row, index) => instructionSelectionable(row, index)" label="产品检查指导" :type="2" />
	</div>
</template>

<script setup>
import { listProduct, delProduct } from '@/api/business/product'
import { listTechnologicalProcessDetail } from '@/api/business/technologicalProcessDetail'
import { listTechnologicalProcess, saveTechnologicalProcess, delTechnologicalProcess } from '@/api/business/technologicalProcess'
import { listInspectionInstruction, delInspectionInstruction, saveInspectionInstruction } from '@/api/business/productInspectionInstruction'
// import instructionChoice from './DialogInstructionChoice'
import instructionChoiceDialog from '@/views/dialog/InstructionChoiceDialog.vue'

import { ref } from 'vue'
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { product_type } = proxy.useDict('product_type')
const { product_dtype } = proxy.useDict('product_dtype')
const { product_status_code } = proxy.useDict('product_status_code')
const { production_type_code } = proxy.useDict('production_type_code')

/** 产品查询对象 */
const queryParams = ref({
	pageNum: 1,
	pageSize: 10,
	code: '',
	name: '',
	combinedValue: null,
	productCode: '',
})
/** 产品变量 */
const productList = ref([])
const productLoading = ref(false)
const ids = ref([])
const total = ref(0)
const currentProduct = ref({})

/** 工艺变量 */
const technologicalProcessLoading = ref(false)
const technologicalProcessList = ref([])
const currentTechnologicalProcess = ref({})

/** 工序变量 */
const technologicalprocessDetailLoading = ref(false)
const technologicalprocessDetailList = ref([])
const currentTechnologicalProcessDetail = ref({})

/* 检查指导项目 */
const inspectionInstructionLoading = ref(false)
const inspectionInstructionIds = ref([])
const inspectionInstructionList = ref([])
// const instructionChoiceDialogRef = ref(null)

/***********************  方法区  ***********************/
/***********************  产品管理  ***********************/
/** 查询产品管理列表
 * 进入页面产品表第一条和工艺表第一条默认选中
 */
function getList() {
	productLoading.value = true
	listProduct(queryParams.value).then((response) => {
		productList.value = response.rows
		total.value = response.total
		productLoading.value = false
		if (productList.value.length > 0) {
			proxy.$refs.productTable.setCurrentRow(productList.value[0])
		} else {
			technologicalProcessList.value = []
			technologicalprocessDetailList.value = []
		}
	})
}
/**
 * 产品的 current change 事件
 * 要获取工艺列表
 */
function handleCurrentProductChange(row) {
	if (row) {
		currentProduct.value = row
		getTechnologicalProcesses(0)
	}
}
/** 产品搜索按钮操作 */
function handleQueryProduct() {
	queryParams.value.pageNum = 1
	getList()
}

/***********************  标准工艺  ***********************/
// 获取工艺列表
const getTechnologicalProcesses = (index) => {
	technologicalProcessLoading.value = true
	listTechnologicalProcess({ productId: currentProduct.value.id, isHistory: 0 }).then((res) => {
		technologicalProcessList.value = res.rows
		technologicalProcessLoading.value = false
		if (technologicalProcessList.value.length > 0) {
			proxy.$refs.technologicalProcessTable.setCurrentRow(technologicalProcessList.value[index])
		} else {
			technologicalProcessList.value = []
			technologicalprocessDetailList.value = []
		}
	})
}
/**
 * 工艺的 current change 事件
 * 要获取工序列表
 */
function handleCurrentTechnologicalProcessChange(row) {
	if (row) {
		currentTechnologicalProcess.value = row
		getTechnologicalProcessDetails()
	} else {
		technologicalprocessDetailList.value = []
	}
}

/***********************  标准工序  ***********************/
// 获取工序列表
const getTechnologicalProcessDetails = () => {
	if (!currentTechnologicalProcess.value.id) {
		technologicalprocessDetailList.value = []
	} else {
		technologicalprocessDetailLoading.value = true
		listTechnologicalProcessDetail({
			technologicalProcessId: currentTechnologicalProcess.value.id,
		}).then((res) => {
			// 只筛选分选工序
			technologicalprocessDetailList.value = res.rows.filter(item => item.processAlias.slice(0, 2) === '分选')
			// technologicalprocessDetailList.value = res.rows
			technologicalprocessDetailLoading.value = false
		})
	}
}
/**
 * 标准工序的 current change 事件
 * @param {选中行} row 
 */
const handleCurrentTechnologicalprocessDetailChange = (row) => {
	if (row) {
		currentTechnologicalProcessDetail.value = row
		getinspectionInstructions()
	} else {
		inspectionInstructionList.value = []
	}
}

/**
 * 工序的 current change 事件
 * 要获取工序对应的检查项目列表
 */
// const handleCurrentTechnologicalProcessDetailChange = (row) => {
// 	if (row) {
// 		inspectionInstructionLoading.value = true
// 		currentTechnologicalProcessDetail.value = row
// 		getinspectionInstructions()
// 	} else {
// 		technologicalprocessDetailList.value = []
// 	}
// 	inspectionInstructionLoading.value = false
// }

/*********************** 检查指导项目 ***********************/
const handleAddInstruction = () => {
	// console.log(proxy.$refs.instructionChoiceDialogRef)
	proxy.$refs.instructionChoiceDialogRef.open()
}
// 获取检查指导项目列表
const getinspectionInstructions = () => {
	listInspectionInstruction({ productId: currentProduct.value.id, processId: currentTechnologicalProcessDetail.value.processId, technologyVersion: currentTechnologicalProcess.value.technologyVersion, type: 2 }).then(res => {
		// console.log(res)
		inspectionInstructionList.value = res.rows
	})
}
/**
 * 单条删除检查指导项目
 * 删除已经存在的数据-即row.id存在，执行一个对话框选择，如果确认则执行删除方法，并重新查询工艺表操作，
 * 让工艺表第一条默认选中
 * 删除未保存的苏剧-即row.id不存在，通过splice方法，通过下标删除数组的元素
 */
const handleDelInstruction = (row, index) => {
	if (row.id) {
		proxy.$modal
			.confirm('是否确认删除选中的数据项？')
			.then(function () {
				return delInspectionInstruction(row.id)
			})
			.then(() => {
				getinspectionInstructions()
				proxy.$modal.msgSuccess('删除成功！')
			})
	} else {
		inspectionInstructionList.value.splice(index, 1)
		getinspectionInstructions()
	}
}

const inspectionInstructionSelected = (selections) => {
	console.log(selections)
	// 保存到inspectionInstructionIds
	const data = []
	selections.forEach(item => {
		data.push({ type: item.type, technologicalProcessId: currentTechnologicalProcess.value.id, technologicalProcessDetailId: currentTechnologicalProcessDetail.value.id, processId: currentTechnologicalProcessDetail.value.processId, inspectionInstructionId: item.id, standard: item.standard, equipment: item.equipment, remark: item.remark, technologyVersion: currentTechnologicalProcess.value.technologyVersion, productId: currentProduct.value.id })
	})
	console.log(data)

	saveInspectionInstruction(data).then(res => {
		// 刷新表单
		getinspectionInstructions()
	})
}
const instructionSelectionable = (row, index) => {
	console.log(row, inspectionInstructionList.value.filter(v => v.inspectionInstructionId === row.id))
	if (inspectionInstructionList.value.filter(v => v.inspectionInstructionId === row.id).length > 0)
		return false
	else
		return true
}

onMounted(() => {
	getList()
})
</script>
