<template>
	<div class="knowledge-type-edit-container">
		<el-dialog title="关联组织" v-model="state.dialogVisible" draggable append-to-body destroy-on-close @close="close">
			<div class="border-box">
				<el-input v-model="filterText" placeholder="组织名称" clearable class="mb20" />
				<el-tree-v2
					:data="orgData"
					:height="400"
					:props="{ label: 'name' }"
					node-key="id"
					show-checkbox
					check-strictly
					check-on-click-node
					:default-checked-keys="state.ruleForm.orgArray"
					:default-expanded-keys="state.ruleForm.orgArray"
					:filter-method="filterMethod"
					ref="orgRef"
					v-loading="state.loading"
					@check="changeOrgData"
				/>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit" :loading="state.loading">确 定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="knowledgeTypeEdit">
import { reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { updateType, typeDetail } from '@/api/knowledge/type';
import { getCanUseOrg } from '@/api/system/user';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗
	ruleForm: {
		name: '', // 类型名称
		sort: 0, // 排序
		parentId: '', // 上级类型
		orgArray: [],
	},
	loading: false, // 加载
});
const filterText = ref('');
watch(filterText, (val) => {
	orgRef.value!.filter(val);
});
const filterMethod = (value: string, data: any) => {
	if (!value) return true;
	return data.name.includes(value);
};
// 获取机构数据
const orgData = ref<any[]>([]);
const getOrgData = async () => {
	state.loading = true;
	getCanUseOrg()
		.then((res: any) => {
			orgData.value = res?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 打开弹窗
const ruleFormRef = ref<any>(); // 表单ref
const openDialog = async (row: any) => {
	try {
		state.dialogVisible = true;
		state.ruleForm.orgArray = [];
		await getOrgData();
		const { result } = await typeDetail(row.id);
		state.ruleForm = result;
		state.ruleForm.orgArray = result.knowledgeTypeOrgs.map((item: any) => item.orgId);
		state.ruleForm.typeOrgDtos = result.knowledgeTypeOrgs.map((item: any) => {
			return {
				orgId: item.orgId,
				orgName: item.orgName,
			};
		});
	} catch (error) {
		// 打印错误信息
		console.error(error);
	}
};
const close = () => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
	filterText.value = '';
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 选择适用部门
const orgRef = ref<RefType>();
const changeOrgData = (data: any, object: any) => {
	if (object.checkedNodes.length === 0) state.ruleForm.typeOrgDtos = [];
	state.ruleForm.typeOrgDtos = object.checkedNodes.map((item: any) => {
		return {
			orgId: item.id,
			orgName: item.name,
		};
	});
};
//
// 保存
const onSubmit = () => {
	state.loading = true;
	updateType(state.ruleForm)
		.then(() => {
			ElMessage.success('操作成功');
			state.loading = false;
			emit('updateList');
			closeDialog(); // 关闭弹窗
		})
		.catch(() => {
			state.loading = false;
		});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style scoped lang="scss">
.border-box {
	border: var(--el-border);
	border-radius: var(--el-border-radius-base);
	padding: 15px;
}
</style>
