<template>
	<el-dialog
		v-model="state.dialogVisible"
		draggable
		:title="`用户列表(${state.currentRow.displayName})`"
		width="900px"
		append-to-body
		destroy-on-close
	>
		<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" :pagination="false" :tool-button="['setting']" max-height="500px">
		</ProTable>
	</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';
import qs from 'qs';

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

// 定义子组件向父组件传值/事件
const emit = defineEmits(['openDialog', 'closeDialog']);
const proTableRef = ref<RefType>(); // 表格ref
// 表格配置项
const columns = ref<any[]>([
	{ prop: 'name', label: '姓名', width: 170 },
	{ prop: 'userName', label: '账号', width: 170 },
	{ prop: 'organization.name', label: '所属部门', width: 190 },
	{ prop: 'phoneNo', label: '电话号码', width: 130 },
	{ prop: 'staffNo', label: '工号', width: 120 },
	{ prop: 'userTypeText', label: '用户', width: 80 },
	{ prop: 'genderText', label: '性别', width: 80 },
	{
		prop: 'creationTime',
		label: '创建时间',
		width: 170,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{ prop: 'state', label: '状态', width: 80 },
]);
// 定义变量内容
const state = reactive<StateRoles>({
	dialogVisible: false, // 弹窗显示隐藏
	currentRow: {}, // 当前行数据
	tableData: [], // 表格数据
});
// 打开弹窗
const openDialog = (row: any) => {
	state.currentRow = row;
	let req: string;
	if (row.accountIds.length >= 1) req = '?' + qs.stringify({ ids: row.accountIds }, { indices: false });
	else req = '?' + 'ids=';
	getUserListByIds(req).then((res: any) => {
		state.tableData = res?.result ?? [];
	});
	state.dialogVisible = true;
	emit('openDialog');
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
	emit('closeDialog');
};

//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
