<template>
  <div class="dictionary-page art-full-height">
    <ElContainer class="dictionary-layout">
      <ElAside width="320px">
        <GroupList :scope="DictionaryScope.System" :allow-scope-selection="false" />
      </ElAside>
      <ElMain>
        <ItemTable :group="currentGroup" />
      </ElMain>
    </ElContainer>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useDictionaryGroupStore } from '@/store/modules/dictionaryGroup'
  import { DictionaryScope } from '@/enums/Dictionary'
  import GroupList from './components/GroupList.vue'
  import ItemTable from './components/ItemTable.vue'

  defineOptions({ name: 'SystemDictionary' })

  const groupStore = useDictionaryGroupStore()
  const currentGroup = computed(() => groupStore.currentGroup)
</script>

<style scoped>
  .dictionary-page {
    height: 100%;
  }

  .dictionary-layout {
    gap: 16px;
    height: 100%;
  }

  :deep(.el-aside) {
    padding-right: 16px;
  }

  :deep(.el-main) {
    padding: 0;
  }
</style>
