<template>
	<fs-page>
		<fs-crud ref="crudRef" :dialog-width="800"  v-bind="crudBinding"> </fs-crud>
		<PermissionDrawerCom />
		<BatchTagsDialog ref="batchTagsDialogRef" :crudExpose="crudExpose" />
		<BatchCategoryDialog ref="batchCategoryDialogRef" :crudExpose="crudExpose" />
		<BatchCompetencyTagsDialog ref="batchCompetencyTagsDialogRef" :crudExpose="crudExpose" />
	</fs-page>
</template>

<script lang="ts" setup name="role">
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { RoleDrawerStores } from './stores/RoleDrawerStores';
import { RoleMenuBtnStores } from './stores/RoleMenuBtnStores';
import { RoleMenuFieldStores } from './stores/RoleMenuFieldStores';
import { RoleUsersStores } from './stores/RoleUsersStores';
import { successMessage } from '../../../utils/message';

const PermissionDrawerCom = defineAsyncComponent(() => import('./components/RoleDrawer.vue'));
const BatchTagsDialog = defineAsyncComponent(() => import('./components/BatchTagsDialog.vue'));
const BatchCategoryDialog = defineAsyncComponent(() => import('./components/BatchCategoryDialog.vue'));
const BatchCompetencyTagsDialog = defineAsyncComponent(() => import('./components/BatchCompetencyTagsDialog.vue'));

const batchTagsDialogRef = ref();
const batchCategoryDialogRef = ref();
const batchCompetencyTagsDialogRef = ref();

const RoleDrawer = RoleDrawerStores(); // 角色-抽屉
const RoleMenuBtn = RoleMenuBtnStores(); // 角色-菜单
const RoleMenuField = RoleMenuFieldStores();// 角色-菜单-字段
const RoleUsers = RoleUsersStores();// 角色-用户
const { crudBinding, crudRef, crudExpose } = useFs({
	createCrudOptions,
	context: { 
		RoleDrawer, 
		RoleMenuBtn, 
		RoleMenuField,
		$message: {
			warning: (msg: string) => successMessage(msg)
		},
		openBatchTagsDialog: (selection: any) => {
			batchTagsDialogRef.value.open(selection);
		},
		openBatchCategoryDialog: (selection: any) => {
			batchCategoryDialogRef.value.open(selection);
		},
		openBatchCompetencyTagsDialog: (selection: any) => {
			batchCompetencyTagsDialogRef.value.open(selection);
		},
		selectedRows: [] // 存储选中的行
	},
});

// 页面打开后获取列表数据
onMounted(async () => {
	// 刷新
	crudExpose.doRefresh();
	// 获取全部用户
	RoleUsers.get_all_users();
});
</script>