<template>
  <div class="tabs-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="本周" name="week" />
      <el-tab-pane label="本月" name="month" />
      <el-tab-pane label="季度" name="quarter" />
      <el-tab-pane label="年度" name="year" />
    </el-tabs>
    <main class="tabs-container__main">
      <component :is="dynamicComponent" />
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, defineAsyncComponent } from 'vue';
  const activeName = ref('week');
  const dynamicComponent = computed(() => {
    switch (activeName.value) {
      case 'week':
        return defineAsyncComponent(() => import('./WeekRecord.vue'));
      case 'month':
        return defineAsyncComponent(() => import('./MonthRecord.vue'));
      case 'quarter':
        return defineAsyncComponent(() => import('./QuarterRecord.vue'));
      case 'year':
        return defineAsyncComponent(() => import('./YearRecord.vue'));
      default:
        return defineAsyncComponent(() => import('./WeekRecord.vue'));
    }
  });
</script>

<style lang="scss" scoped>
  @use '../styles/tabs-container.scss';
</style>
