<template>
	<div class="page-container row-container">
		<!-- 左侧区域 -->
		<section class="list-part-container">
			<!-- 搜索区域 -->
			<el-form class="list-search-container" ref="queryRef" :inline="true">
				<el-form-item class="section-title" label="分选标准类别" />
				<el-form-item>
					<el-button type="primary" icon="Plus" @click="handleShowCategoryDialog(null)"
						v-hasPermi="['business:inspectionStandard:add']">新增 </el-button>
				</el-form-item>
			</el-form>
			<!-- 列表区 -->
			<div class="el-table-container">
				<div class="el-table-inner-container" style="overflow: auto;">
					<el-tree ref="categoryTable" v-loading="categoryLoading" :data="categoryList"
						:props="{ label: 'name', children: 'children' }" :expand-on-click-node="false" default-expand-all
						node-key="id" highlight-current @node-click="handleCurrentCategoryChange" >
						<template #default="{ node, data }">
							<div style="display: flex; width: 100%; justify-content: space-between">
								<span>
									<span v-if="data.parentId === '0'" style="display: inline-block; width: 20px">{{ getNodeIndex(data)
										}}. </span>
									<span>{{ node.label }}</span>
								</span>
								<span>
									<el-button link type="warning" icon="Edit" @click="handleShowCategoryDialog(data)"
										v-hasPermi="['business:inspectionStandard:edit']">编辑 </el-button>
									<el-button link type="danger" icon="Delete" @click="handleDeleteCategory(data)"
										v-hasPermi="['business:inspectionStandard:remove']">删除 </el-button>
								</span>
							</div>
						</template>
					</el-tree>
				</div>
			</div>
		</section>

		<!-- 右侧区域 -->
		<section class="list-part-container" style="flex: 2">
			<el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item class="section-title" label="分选标准管理" />
				<el-form-item label="检查标准：">
					<el-input placeholder="请输入关键字" clearable style="width: 180px" v-model.trim="queryParams.keyword"
						@keydown.enter.prevent />
				</el-form-item>
				<el-form-item>
					<el-button type="info" icon="Search" :disabled="categoryList.length === 0" @click="handleQueryInstruction"> 搜索
					</el-button>
					<el-button type="primary" icon="Plus" @click="handleShowInstructionDialog(null)"
						v-hasPermi="['business:inspectionStandard:add']">新增 </el-button>
				</el-form-item>
			</el-form>

			<!-- 列表区 -->
			<div class="el-table-container">
				<div class="el-table-inner-container">
					<el-table v-loading="instructionLoading" :data="instructionList" height="100%">
						<el-table-column type="index" label="行号" width="50" align="center" />
						<el-table-column prop="standard" label="检查标准" align="center" />
						<el-table-column label="操作" width="180" align="center">
							<template #default="scope">
								<el-button link type="warning" icon="Edit" @click="handleShowInstructionDialog(scope.row)"
									v-hasPermi="['business:inspectionStandard:edit']">编辑 </el-button>
								<el-button link type="danger" icon="Delete" @click="handleDeleteInstruction(scope.row)"
									v-hasPermi="['business:inspectionStandard:remove']">删除 </el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>

			<!-- 分页 -->
			<pagination v-show="instructionTotal > 0" :total="instructionTotal" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getInstructions" />
		</section>

		<!-- 检查指导项目类别表单 -->
		<category-form ref="categoryRef" @handleSaveSuccess="handleQueryCategory" />

		<!-- 检查指导项目表单 -->
		<instruction-form ref="instructionRef" @handleSaveSuccess="getInstructions" />
	</div>
</template>

<script setup name="Process">
import { listCategory, delCategory, list, del } from '@/api/business/inspectionInstruction'
import instructionForm from './form'
import categoryForm from './formCategory'

const { proxy } = getCurrentInstance()
const webHost = import.meta.env.VITE_APP_PRODUCTION_API
const categoryTable = ref(null)
const categoryLoading = ref(false)
const categoryList = ref([])
const currentCategory = ref({})

const instructionLoading = ref(false)
const instructionList = ref([])
const instructionTotal = ref(0)

const data = reactive({
	form: {},
	queryParams: {
		// 1：分选标准
		type: 1,
		keyword: '',
		categoryId: '0',
		pageNum: 1,
		pageSize: 10,
	},
})

const { queryParams } = toRefs(data)

/****************************  检查指导项目类别相关事件  ****************************/
/** 检查指导项目分类列表 */
const getCategories = () => {
	categoryLoading.value = true
	listCategory({ type: queryParams.value.type }).then((res) => {
		categoryLoading.value = false
		categoryList.value = res.rows
		if (categoryList.value.length > 0) {
			currentCategory.value = categoryList.value[0]
			nextTick(() => {
				proxy.$refs.categoryTable.setCurrentKey(currentCategory.value.id)
				handleCurrentCategoryChange(currentCategory.value)
			})
		}
	})
}
/**检查指导项目类别点击事件 */
const handleCurrentCategoryChange = (row) => {
	if (row) {
		currentCategory.value = row
	} else {
		currentCategory.value = {}
		if (categoryList.value.length > 0) {
			currentCategory.value = categoryList.value[0]
		}
	}
	if (currentCategory.value.id) {
		getInstructions()
	} else {
		instructionList.value = []
		instructionTotal.value = 0
	}
}
/**检查指导项目类别编号 */
function getNodeIndex(data) {
	const index = categoryList.value.findIndex((item) => item.id === data.id)
	return index + 1
}
/**打开检查指导项目类别弹窗 */
function handleShowCategoryDialog(data) {
	if (data) {
		proxy.$refs.categoryRef.open(data.id)
	} else {
		proxy.$refs.categoryRef.open()
	}
}

/** 删除检测指导书操作 */
const handleDeleteCategory = (data) => {
	var showErrorMessage = false
	proxy.$modal
		.confirm('确定删除选中项？')
		.then(() => {
			categoryLoading.value = true
			instructionLoading.value = true
			if (data.children) {
				showErrorMessage = true
				return Promise.reject(new Error('HasChildrenError'))
			}
			return delCategory(data.id)
		})
		.then(() => {
			if (!showErrorMessage) {
				proxy.$modal.msgSuccess('操作成功！')
				getCategories()
			}
		})
		.catch(() => {
			categoryLoading.value = false
			instructionLoading.value = false
		})
		.finally(() => {
			if (showErrorMessage) {
				proxy.$modal.msgError('该检查指导项目类别下有子类别，不能删除')
			}
			categoryLoading.value = false
			instructionLoading.value = false
		})
}

/**检查指导项目类别查询 */
const handleQueryCategory = () => {
	getCategories()
}
/****************************  检查指导项目相关事件  ****************************/
/**获取检查指导项目数据 */
const getInstructions = () => {
	instructionLoading.value = true
	queryParams.value.categoryId = currentCategory.value.id
	list(queryParams.value).then((res) => {
		instructionLoading.value = false
		instructionList.value = res.rows
		instructionTotal.value = res.total
	})
}

/**检查指导项目查询 */
const handleQueryInstruction = () => {
	queryParams.value.pageNum = 1
	getInstructions()
}

/** 修改检测指导书操作 */
const handleShowInstructionDialog = (data) => {
	const id = data ? data.id : '0'
	proxy.$refs.instructionRef.open({ categoryId: currentCategory.value.id, id: id })
}

/** 删除检测指导书操作 */
const handleDeleteInstruction = (data) => {
	var showErrorMessage = false
	proxy.$modal
		.confirm('确定删除选中项？')
		.then(() => {
			instructionLoading.value = true
			if (data.children) {
				showErrorMessage = true
				return Promise.reject(new Error('HasChildrenError'))
			}
			return del(data.id)
		})
		.then(() => {
			if (!showErrorMessage) {
				proxy.$modal.msgSuccess('操作成功！')
				getInstructions()
			}
		})
		.catch(() => {
			instructionLoading.value = false
		})
		.finally(() => {
			if (showErrorMessage) {
				proxy.$modal.msgError('该检查指导项目类别下有子类别，不能删除')
			}
			instructionLoading.value = false
		})
}

onMounted(() => {
	getCategories()
})
</script>
<style scoped>
:deep(.el-tree-node__label) {
	font-size: 14px !important;
	display: inline-block;
	width: 100%;
}

:deep(.el-tree-node__content) {
	height: 40px;
	border-bottom: 1px solid #ebeef5;
	padding: 8px 0;
	line-height: 23px;
}
</style>
