<template>
	<el-dialog v-model="state.dialogVisible" draggable title="关联部门" append-to-body destroy-on-close>
		<vxe-table
			border
			:loading="loading"
			:data="state.tableData"
			:column-config="{ resizable: true }"
			:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
			ref="tableRef"
			show-overflow
			:scrollY="{ enabled: true, gt: 0 }"
			showHeaderOverflow
			max-height="400px"
			:tree-config="{
				childrenField: 'children',
				transform: true,
				rowField: 'id',
				parentField: 'parentId',
			}"
		>
			<vxe-column field="name" tree-node title="部门名称"> </vxe-column>
			<vxe-column field="orgTypeText" title="部门类别" width="100"></vxe-column>
			<vxe-column field="areaName" title="所属区域" width="150"></vxe-column>
		</vxe-table>
	</el-dialog>
</template>

<script lang="tsx" setup>
import { reactive, ref } from 'vue';
import { getAuxIndustryDepartment } from '@/api/auxiliary/industry';

// 定义接口来定义对象的类型
interface StateRoles {
	dialogVisible: boolean;
	currentRow: any;
	tableData: Array<any>;
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['openDialog', 'closeDialog']);
const loading = ref<boolean>(false); // 是否显示加载
// 定义变量内容
const state = reactive<StateRoles>({
	dialogVisible: false, // 弹窗显示隐藏
	currentRow: {}, // 当前行数据
	tableData: [], // 表格数据
});
// 打开弹窗
const openDialog = (row: any) => {
	state.dialogVisible = true;
	state.currentRow = row;
	getList();
	emit('openDialog');
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
	emit('closeDialog');
};
const getList = () => {
	loading.value = true;
	getAuxIndustryDepartment({ id: state.currentRow.id })
		.then((res: any) => {
			state.tableData = res?.result.orgs ?? [];
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
