<template>
	<a-card :title="$t('pages.acl.component.permission.info.panel.title', { name: name, type: typeName })">
		<template #extra>
			<a-space>
				<a-button v-if="type === 'user'" type="primary" @click="showRoleForm">
					<template #icon>
						<icon-font type="icon-role"></icon-font>
					</template>
					{{ $t('pages.acl.component.permission.info.panel.grantRole', { type: typeName }) }}
				</a-button>
				<a-button type="primary" @click="showPermissionForm">
					<template #icon>
						<icon-font type="icon-grant"></icon-font>
					</template>
					{{ $t('pages.acl.component.permission.info.panel.grant', { type: typeName }) }}
				</a-button>
			</a-space>
		</template>
		<vxe-table
			ref="xTree"
			:row-config="{ keyField: 'key' }"
			:column-config="{ resizable: true }"
			:tree-config="{ transform: true, rowField: 'key', parentField: 'parentKey', expandAll: false }"
			:data="permissions"
		>
			<vxe-column
				show-overflow="tooltip"
				field="key"
				:title="$t('pages.acl.component.modal.permission.columns.key')"
				width="280"
				tree-node
			></vxe-column>
			<vxe-column
				show-overflow="tooltip"
				field="keyPath"
				:title="$t('pages.acl.component.modal.permission.columns.keyPath')"
			></vxe-column>
			<vxe-column
				show-overflow="tooltip"
				field="name"
				:title="$t('pages.acl.component.modal.permission.columns.name')"
			></vxe-column>
			<vxe-column
				show-overflow="tooltip"
				field="description"
				:title="$t('pages.acl.component.modal.permission.columns.description')"
			></vxe-column>
			<vxe-column
				show-overflow="tooltip"
				field="typeInfo.description"
				:title="$t('pages.acl.component.modal.permission.columns.type')"
			></vxe-column>
		</vxe-table>
		<permission-select-modal
			ref="permissionForm"
			:permissions="permissionInfos"
			@ok="doGrantPermission"
		></permission-select-modal>
		<role-select-modal ref="roleForm" :roles="roleInfos" @ok="doGrantRole"></role-select-modal>
	</a-card>
</template>
<script lang="ts" setup>
	import PermissionSelectModal from './permission-select-modal.vue'
	import RoleSelectModal from './role-select-modal.vue'
	import type { PropType } from 'vue'
	import { api } from '@/api'
	import { notification } from 'ant-design-vue'
	import { useI18n } from 'vue-i18n'

	const { t } = useI18n()
	const props = defineProps({
		permissions: {
			type: Array as PropType<Array<acl.Permission>>,
			required: false,
			default: () => [],
		},
		type: {
			type: String as PropType<'role' | 'user'>,
			required: false,
			default: () => 'user',
		},
		name: {
			type: String,
			required: true,
		},
		refKey: {
			type: String,
			required: true,
		},
	})
	const { permissions, name, type, refKey } = toRefs(props)

	const typeName = computed(() => {
		return type.value == 'user'
			? t('pages.acl.component.permission.info.panel.user')
			: t('pages.acl.component.permission.info.panel.role')
	})

	const permissionForm = ref<typeof PermissionSelectModal>()
	const permissionInfos = ref<acl.PermissionInfo[]>([])
	const showPermissionForm = () => {
		;(type.value === 'user' ? api.aclApi.user : api.aclApi.role).permissionInfos(refKey.value, (data) => {
			permissionInfos.value = data
			permissionForm.value?.open()
		})
	}

	const doGrantPermission = (permissions: string[]) => {
		;(type.value === 'user' ? api.aclApi.user : api.aclApi.role).grant(refKey.value, permissions, () => {
			permissionForm.value?.close()
			notification.success({
				message: t('pages.acl.component.permission.info.panel.notification.success'),
				description: t('pages.acl.component.permission.info.panel.notification.grant.description', {
					name: name.value,
					type: typeName.value,
				}),
			})
		})
	}
	const roleForm = ref<typeof RoleSelectModal>()
	const roleInfos = ref<acl.RoleInfo[]>([])
	const showRoleForm = () => {
		api.aclApi.user.roleInfos(refKey.value, (data) => {
			roleInfos.value = data
			roleForm.value?.open()
		})
	}

	const doGrantRole = (permissions: string[]) => {
		api.aclApi.user.grantRole(refKey.value, permissions, () => {
			permissionForm.value?.close()
			notification.success({
				message: t('pages.acl.component.permission.info.panel.notification.success'),
				description: t('pages.acl.component.permission.info.panel.notification.grantRole.description', {
					name: name.value,
				}),
			})
		})
	}
</script>
