<template>
	<a-card :title="$t('pages.dictionary.group.title')">
		<template #extra>
			<a-row :gutter="[5, 5]">
				<a-col :span="14">
					<a-input-search
						v-model:value="key"
						:placeholder="$t('pages.dictionary.group.search.placeholder')"
						enter-button
						@search="loadGroups(1)"
					/>
				</a-col>
				<a-col :span="10">
					<a-button type="primary" @click="addOrEditGroup()">
						<template #icon>
							<icon-font type="icon-plus"></icon-font>
						</template>
						{{ $t('pages.dictionary.group.add') }}
					</a-button>
				</a-col>
			</a-row>
		</template>
		<a-list item-layout="horizontal" :data-source="groupPage?.records">
			<template #renderItem="{ item }">
				<a-list-item style="cursor: pointer" @click="() => (selectedKey = item.key)">
					<a-list-item-meta :description="item.description">
						<template #title>
							{{ item.name }}
						</template>
						<template #avatar>
							<a-avatar :style="{ backgroundColor: item.key === selectedKey ? token.colorPrimary : '' }">
								{{ item.description.substring(0, 1) }}
							</a-avatar>
						</template>
					</a-list-item-meta>
					<template #actions>
						<a-space>
							<a-button type="link" @click.stop="addOrEditGroup(item)">
								<template #icon>
									<icon-font type="icon-edit"></icon-font>
								</template>
								{{ $t('pages.dictionary.group.edit') }}
							</a-button>
							<a-popconfirm
								:title="$t('pages.dictionary.group.confirm.delete.title', { name: item.name })"
								@confirm="deleteGroup(item.key)"
							>
								<a-button type="link" danger>
									<template #icon>
										<icon-font type="icon-delete"></icon-font>
									</template>
									{{ $t('pages.dictionary.group.delete') }}
								</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</a-list-item>
			</template>
		</a-list>
		<form-drawer
			ref="groupForm"
			v-model="group"
			:title="groupFormTitle"
			:form-items="items"
			:config="formConfig"
			@ok="doAOrEditGroup"
		></form-drawer>
	</a-card>
</template>
<script lang="ts" setup>
	import { api } from '@/api'
	import type { IPage } from '@/api/api'
	import { config, formItems } from './groupForm'
	import { useI18n } from 'vue-i18n'
	import { notification, theme } from 'ant-design-vue'
	import FormDrawer from '@/components/form-render/form-drawer.vue'

	const { useToken } = theme
	const { token } = useToken()
	const { t } = useI18n()
	const key = ref('')

	const groupPage = ref<IPage<dictionary.Group>>()

	const loadGroups = (page = 1) => {
		api.dictionaryApi.dictionary.groups(
			{
				page: page || groupPage.value?.current,
				size: groupPage.value?.size,
				key: key.value,
			},
			(data) => {
				groupPage.value = data
			},
		)
	}

	loadGroups()

	const groupForm = ref<typeof FormDrawer>()
	const group = ref<Partial<dictionary.Group>>({})
	const groupFormTitle = computed(() => {
		return t(group.value.id ? 'pages.dictionary.group.edit' : 'pages.dictionary.group.add')
	})
	const items = computed(() => {
		return formItems
	})

	const formConfig = computed(() => {
		return config
	})

	const addOrEditGroup = (g?: dictionary.Group) => {
		group.value = { ...g }
		groupForm.value?.show()
	}
	const doAOrEditGroup = (g: Record<string, unknown>) => {
		api.dictionaryApi.dictionary.saveOrUpdateGroup(g as unknown as dictionary.Group, () => {
			groupForm.value?.close()
			notification.success({
				message: t('pages.dictionary.group.notification.success'),
				description: t('pages.dictionary.group.notification.addOrEdit.description'),
				onClose: () => {
					loadGroups(1)
				},
			})
		})
	}

	const emit = defineEmits<{
		changed: [group?: dictionary.Group]
	}>()
	const selectedKey = ref('')
	watch(
		selectedKey,
		(newVal) => {
			if (newVal)
				emit(
					'changed',
					groupPage.value?.records?.find((g) => g.key === newVal),
				)
		},
		{ immediate: true },
	)
	const deleteGroup = (key: string) => {
		api.dictionaryApi.dictionary.deleteGroup(key, () => {
			notification.success({
				message: t('pages.dictionary.group.notification.success'),
				description: t('pages.dictionary.group.notification.delete.description'),
				onClose: () => {
					loadGroups(1)
				},
			})
		})
	}
</script>
