<template>
	<a-card v-if="group" :title="$t('pages.dictionary.code.title', { group: group?.name })">
		<template #extra>
			<a-button type="primary" @click="addOrEditCode()">
				<template #icon>
					<icon-font type="icon-plus"></icon-font>
				</template>
				{{ $t('pages.dictionary.code.add') }}
			</a-button>
		</template>
		<a-table :columns="columns" :data-source="treeData" :loading="loading">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'ops'">
					<a-space>
						<a-button type="link" @click="addOrEditCode(record)">
							<template #icon>
								<icon-font type="icon-edit" />
							</template>
							{{ $t('pages.dictionary.code.edit') }}
						</a-button>
						<a-button type="link" @click="addOrEditCode({ parentKey: record.key })">
							<template #icon>
								<icon-font type="icon-plus" />
							</template>
							{{ $t('pages.dictionary.code.addChild') }}
						</a-button>
						<a-popconfirm
							:title="$t('pages.dictionary.code.confirm.title', { name: record.key })"
							@confirm="deleteCode(record.key)"
						>
							<a-button type="link" danger>
								<template #icon>
									<icon-font type="icon-delete" />
								</template>
								{{ $t('pages.dictionary.code.delete') }}
							</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</a-table>
		<form-drawer
			ref="codeForm"
			v-model="code"
			:title="codeFormTitle"
			:form-items="items"
			:config="formConfig"
			:disabled-fields="disabledFields"
			@ok="doAOrEditCode"
		></form-drawer>
	</a-card>
	<a-alert
		v-else
		:message="$t('pages.dictionary.code.alter.title')"
		:description="$t('pages.dictionary.code.alter.description')"
		type="info"
		show-icon
	/>
</template>
<script lang="ts" setup>
	import { api } from '@/api'

	import type { PropType } from 'vue'
	import { notification } from 'ant-design-vue'
	import { config, formItems } from './codeForm'
	import { useI18n } from 'vue-i18n'
	import XEUtils from 'xe-utils'
	import FormDrawer from '@/components/form-render/form-drawer.vue'
	const { t } = useI18n()
	const props = defineProps({
		group: {
			type: Object as PropType<dictionary.Group>,
			required: false,
			default: () => undefined,
		},
	})
	const { group } = toRefs(props)
	const groupKey = computed(() => {
		return group?.value?.key
	})
	const codes = ref<dictionary.Dictionary[]>([])
	const loading = ref(false)
	const loadCodes = () => {
		loading.value = true
		api.dictionaryApi.dictionary.dictionaries(String(groupKey.value), (data) => {
			codes.value = data
			loading.value = false
		})
	}

	const treeData = computed(() => {
		return XEUtils.toArrayTree(codes.value, { parentKey: 'parentKey', key: 'key' })
	})
	watch(
		groupKey,
		(newVal) => {
			if (newVal) {
				loadCodes()
			}
		},
		{ immediate: true },
	)
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			key: 'index',
		},
		{
			title: 'Key',
			dataIndex: 'key',
			key: 'key',
		},
		{
			title: 'Value',
			dataIndex: 'value',
			key: 'name',
		},
		{
			title: '描述',
			dataIndex: 'description',
			key: 'description',
		},
		{
			title: '操作',
			dataIndex: 'ops',
			key: 'ops',
			width: 300,
		},
	]

	const items = computed(() => {
		return formItems
	})

	const formConfig = computed(() => {
		return config
	})
	const codeForm = ref<typeof FormDrawer>()
	const code = ref<Partial<dictionary.Dictionary>>({})
	const codeFormTitle = computed(() => {
		return t(code.value.id ? 'pages.dictionary.code.edit' : 'pages.dictionary.code.add')
	})
	const disabledFields = computed(() => {
		return code.value.id ? ['key'] : []
	})
	const addOrEditCode = (c?: Partial<dictionary.Dictionary>) => {
		code.value = { ...c }
		codeForm.value?.show()
	}
	const doAOrEditCode = (c: Record<string, unknown>) => {
		api.dictionaryApi.dictionary.saveOrUpdateDictionary(
			String(groupKey.value),
			c as unknown as dictionary.Dictionary,
			() => {
				codeForm.value?.close()
				notification.success({
					message: t('pages.dictionary.code.notification.success'),
					description: t('pages.dictionary.code.notification.addOrEdit.description'),
					onClose: () => {
						loadCodes()
					},
				})
			},
		)
	}
	const deleteCode = (key: string) => {
		api.dictionaryApi.dictionary.deleteDictionary(String(groupKey.value), key, () => {
			notification.success({
				message: t('pages.dictionary.code.notification.success'),
				description: t('pages.dictionary.code.notification.delete.description'),
				onClose: () => {
					loadCodes()
				},
			})
		})
	}
</script>
