<template>
	<ObjectList :options="listOptions" />
</template>

<script setup lang="jsx">
import { h, ref } from 'vue';
import { toast } from 'vue-sonner';
import { FeatherIcon } from 'jingrow-ui';
import { icon, renderDialog, confirmDialog } from '../../utils/components';
import ObjectList from '../ObjectList.vue';
import RoleConfigureDialog from './RoleConfigureDialog.vue';
import router from '../../router';
import UserAvatarGroup from '../AvatarGroup.vue';
import { getToastErrorMessage } from '../../utils/toast';

const listOptions = ref({
	pagetype: 'Jcloud Role',
	fields: [
		{ users: ['user', 'user.full_name', 'user.user_image'] },
		'admin_access',
	],
	documentation: 'https://jingrow.com/docs/role-permissions',
	columns: [
		{
			label: '角色',
			fieldname: 'title',
			width: 1,
			suffix: (row) => {
				return row.admin_access ? (
					<FeatherIcon name="shield" class="ml-1 h-4 w-4 text-gray-700" />
				) : null;
			},
		},
		{
			label: '成员',
			type: 'Component',
			component: ({ row }) => {
				return (
					<div
						onClick={(e) => {
							e.preventDefault();
							configureRole(row);
						}}
						class="flex h-6 items-center space-x-2"
					>
						<UserAvatarGroup users={row.users} />
						<Button label="添加成员">
							{{ icon: () => <i-lucide-plus class="h-4 w-4 text-gray-600" /> }}
						</Button>
					</div>
				);
			},
			width: 1,
		},
	],
	rowActions({ row, listResource: roleListResource }) {
		return [
			{
				label: '编辑权限',
				onClick() {
					router.push({
						name: 'SettingsPermissionRolePermissions',
						params: { roleId: row.name },
					});
				},
			},
			{
				label: '配置角色',
				onClick: () => configureRole(row),
			},
			{
				label: '删除角色',
				onClick() {
					if (roleListResource.delete.loading) return;
					confirmDialog({
						title: '删除角色',
						message: `确定要删除角色 <b>${row.title}</b> 吗？`,
						onSuccess({ hide }) {
							if (roleListResource.delete.loading) return;
							toast.promise(roleListResource.delete.submit(row.name), {
								loading: '正在删除角色...',
								success: () => {
									roleListResource.reload();
									hide();
									return `角色 ${row.title} 已删除`;
								},
								error: (e) => getToastErrorMessage(e),
							});
						},
					});
				},
			},
		];
	},
	route(row) {
		return {
			name: 'SettingsPermissionRolePermissions',
			params: { roleId: row.name },
		};
	},
	primaryAction({ listResource: groups }) {
		return {
			label: '新建角色',
			variant: 'solid',
			slots: {
				prefix: icon('plus'),
			},
			onClick() {
				confirmDialog({
					title: '创建角色',
					fields: [
						{
							fieldname: 'title',
							label: '角色',
							autocomplete: 'off',
						},
					],
					onSuccess({ hide, values }) {
						if (values.title) {
							return groups.insert.submit(
								{ title: values.title },
								{ onSuccess: hide },
							);
						}
						return null;
					},
				});
			},
		};
	},
});

function configureRole(row) {
	renderDialog(h(RoleConfigureDialog, { roleId: row.name }));
}
</script>