<template>
  <Page>
    <div class="dict-page">
      <DictCategory @search-dict="searchDict"/>
      <ElDivider direction="vertical"/>
      <DictItem ref="dictItem"/>
    </div>
  </Page>
</template>
<script lang="ts" setup>
import Page from '@/components/page/Page.vue'
import DictCategory from '@/pages/sys/dict/DictCategory.vue'
import DictItem from '@/pages/sys/dict/DictItem.vue'

const dictItemIns = useTemplateRef<InstanceType<typeof DictItem>>('dictItem')

function searchDict(data: DictTypes.SearchDictResult) {
  dictItemIns.value?.reload(data)
}

</script>
<style lang="stylus" scoped>
.dict-page {
  display flex
  justify-content space-between
  flex-direction: row;
  gap: 50px;

  & > div:not(:nth-child(2)) {
    width 50%
    box-sizing border-box
  }

  & > div:nth-child(2) {
    height: 100%;
  }
}
</style>
