<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 './category/index.vue';
  import { listDictModel } from '/@/api/common';
  defineOptions({
    name: 'sysDict',
  });
  const activeKey = ref(null);
  const tabList = ref([]);
  onMounted(async () => {
    const dictType = await listDictModel({ dictCode: 'sys_dict_type' });
    tabList.value = dictType.map(ele => {
      return {
        key: ele.id,
        tab: ele.label + '字典',
        type: ele.value,
      };
    });
    activeKey.value = dictType[1]['id'];
  });
</script>
