<template>
	<page-container :title="$t(String($route.meta.title))" :sub-title="$t('pages.dictionary.subTitle')">
		<div style="min-height: calc(100vh - 305px)">
			<a-space direction="vertical" style="width: 100%">
				<a-alert
					:message="$t('pages.dictionary.alter.title')"
					:description="$t('pages.dictionary.alter.description')"
					type="warning"
					show-icon
					closable
				/>
				<a-row :gutter="[12, 12]">
					<a-col :span="8">
						<group-panel @changed="groupChanged"></group-panel>
					</a-col>
					<a-col :span="16">
						<code-table :group="group"></code-table>
					</a-col>
				</a-row>
			</a-space>
		</div>
	</page-container>
</template>
<script lang="ts" setup>
	import GroupPanel from './group-panel.vue'
	import CodeTable from './code-table.vue'
	const group = ref<dictionary.Group>()
	const groupChanged = (g?: dictionary.Group) => {
		group.value = g
	}
</script>
