<template>
	<el-dialog
		v-model="state.dialogVisible"
		draggable
		:title="`用户列表(${state.currentRow.displayName})`"
		append-to-body
		destroy-on-close
		@opened="opened"
	>
		<vxe-toolbar
			ref="toolbarRef"
			:loading="loading"
			custom
			:refresh="{
				queryMethod: getList,
			}"
		>
		</vxe-toolbar>
		<vxe-table
			border
			:loading="loading"
			:data="state.tableData"
			:column-config="{ resizable: true }"
			:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
			ref="tableRef"
			height="auto"
			show-overflow
			:scrollY="{ enabled: true, gt: 100 }"
			showHeaderOverflow
			max-height="400px"
			id="systemRoleUserList"
			:custom-config="{ storage: true }"
		>
			<vxe-column field="name" title="姓名" min-width="120"></vxe-column>
			<vxe-column field="userName" title="账号" min-width="120"></vxe-column>
			<vxe-column field="organization.name" title="所属部门" min-width="140"></vxe-column>
			<vxe-column field="phoneNo" title="电话号码" width="140"></vxe-column>
			<vxe-column field="staffNo" title="工号" width="120"></vxe-column>
			<vxe-column field="userTypeText" title="用户类型" width="120"></vxe-column>
			<vxe-column field="genderText" title="性别" width="120"></vxe-column>
			<vxe-column field="creationTime" title="更新时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>
			<vxe-column field="state" title="状态" width="140"></vxe-column>
		</vxe-table>
	</el-dialog>
</template>

<script lang="tsx" setup name="roleUserList">
import { reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { getUserListByIds } from '@/api/system/roles';

// 定义接口来定义对象的类型
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;
	getUserListByIds(state.currentRow.accountIds)
		.then((res: any) => {
			state.tableData = res?.result ?? [];
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
const tableRef = ref<RefType>();
const toolbarRef = ref<RefType>();
const opened = () => {
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
