<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%;">
      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="JeecgComponents" tab="下拉选择组件"></a-tab-pane>
        <a-tab-pane key="JCodeEditDemo" tab="代码编辑器" force-render></a-tab-pane>
        <a-tab-pane key="JEditorDemo" tab="富文本&MakeDown"></a-tab-pane>
        <a-tab-pane key="ImgDragSort" tab="图片拖拽"></a-tab-pane>
        <a-tab-pane key="ImgTurnPage" tab="图片翻页"></a-tab-pane>
        <a-tab-pane key="JeecgPdfView" tab="PDF预览"></a-tab-pane>
        <a-tab-pane key="JUploadDemo" tab="文件上传"></a-tab-pane>
      </a-tabs>
      <component :is="currentComponent"></component>
    </a-card>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import JeecgComponents from './JeecgComponents.vue';
  import JEditorDemo from './JEditorDemo.vue';
  import JCodeEditDemo from './JCodeEditDemo.vue';
  import ImgDragSort from './ImgDragSort.vue';
  import ImgTurnPage from './ImgTurnPage.vue';
  import JeecgPdfView from './JeecgPdfView.vue';
  import JUploadDemo from './JUploadDemo.vue';
  export default defineComponent({
    name:"comp-jeecg-basic",
    setup() {
      const activeKey = ref('JeecgComponents');
      const currentComponent = computed(() => {
        const componentType = {
          'JeecgComponents': JeecgComponents,
          'JEditorDemo': JEditorDemo,
          'JCodeEditDemo': JCodeEditDemo,
          'ImgDragSort': ImgDragSort,
          'ImgTurnPage': ImgTurnPage,
          'JeecgPdfView': JeecgPdfView,
          'JUploadDemo': JUploadDemo,
        };
        return componentType[activeKey.value];
      });

      //使用component动态切换tab
      function tabChange(key) {
        activeKey.value=key
      }
      return {
        activeKey, currentComponent, tabChange,activeKey
      };
    },
  });
</script>
