<template>
	<a-drawer
		v-model:open="visible"
		:title="$t('pages.acl.component.modal.permission.title')"
		placement="right"
		:width="900"
	>
		<template #extra>
			<a-button style="margin-right: 8px" :loading="confirmLoading" @click="visible = false">
				{{ $t('pages.acl.component.modal.permission.cancle') }}
			</a-button>
			<a-button type="primary" @click="handleOk">{{ $t('pages.acl.component.modal.permission.submit') }}</a-button>
		</template>
		<vxe-table
			ref="xTree"
			:row-config="{ keyField: 'keyPath' }"
			:column-config="{ resizable: true }"
			:tree-config="{ transform: true, rowField: 'key', parentField: 'parentKey', expandAll: true }"
			:data="permissions"
			:checkbox-config="checkboxConfig"
			@checkbox-change="selectChangeEvent"
			@checkbox-all="checkAll"
		>
			<vxe-column
				show-overflow="tooltip"
				type="checkbox"
				: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>
	</a-drawer>
</template>
<script lang="ts" setup>
	import type { VxeTableInstance, VxeTableEvents } from 'vxe-table'
	const emit = defineEmits(['ok'])

	const props = withDefaults(defineProps<{ permissions: Array<acl.PermissionInfo> }>(), {
		permissions: () => [],
	})
	const { permissions } = toRefs(props)
	const visible = ref(false)
	const confirmLoading = ref(false)
	const checkedKeys = ref<string[]>([])
	const checkRowKeys = ref<string[]>([])
	const xTree = ref<VxeTableInstance<acl.PermissionInfo>>()
	watch(
		permissions,
		(newVal) => {
			checkRowKeys.value = newVal.filter((item) => item.selected).map((item) => String(item.keyPath))
			checkedKeys.value = newVal.filter((item) => item.selected).map((item) => String(item.keyPath))
		},
		{ deep: true, immediate: true },
	)
	const checkboxConfig = computed(() => {
		return { labelField: 'key', checkRowKeys: checkRowKeys.value }
	})
	const open = () => {
		visible.value = true
		confirmLoading.value = false
	}

	const close = () => {
		visible.value = false
		permissions.value = []
		confirmLoading.value = false
	}

	const selectChangeEvent: VxeTableEvents.CheckboxChange = (data) => {
		checkedKeys.value = [
			...data.$table.getCheckboxRecords().map((item) => item.keyPath),
			...data.$table.getCheckboxIndeterminateRecords().map((item) => item.keyPath),
		]
	}
	const checkAll = ({ checked }: { checked: boolean }) => {
		if (checked) {
			checkRowKeys.value = permissions.value.map((item) => String(item.keyPath))
			checkedKeys.value = permissions.value.map((item) => String(item.keyPath))
		} else {
			checkRowKeys.value = []
			checkedKeys.value = []
		}
	}

	const handleOk = () => {
		confirmLoading.value = true
		permissions.value = []
		emit('ok', checkedKeys.value)
	}

	defineExpose({ open, close })
	nextTick(() => {
		xTree.value?.reloadData(permissions.value)
	})
</script>
