<template>
  <PageWrapper>
    <a-card
      :bordered="false"
      :active-tab-key="activeKey"
      :tab-list="tabList"
      @tabChange="
        key => {
          activeKey = key;
        }
      "
    >
      <p v-for="item in tabList" :key="item.key">
        <Category :type="item.type" v-if="activeKey == item.key" />
      </p>
    </a-card>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import Category from '/@/views/sys/sysDict/category/index.vue';
  import { listDictModel } from '/@/api/common';
  const activeKey = ref(null);
  const tabList = ref([]);
  onMounted(async () => {
    const dictType = await listDictModel({ dictCode: 'sys_dict_type' });
    tabList.value = [
      {
        key: dictType[0].id,
        tab: dictType[0].label + '字典',
        type: dictType[0].value,
      },
    ];
    activeKey.value = dictType[0]['id'];
  });
</script>
