<template>
  <div class="tabs-container">
    <el-tabs v-model="activeName" class="custom-tabs">
      <el-tab-pane label="防御通知" name="notice" />
      <el-tab-pane label="管理规定" name="regulation" />
    </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('notice');
  const dynamicComponent = computed(() => {
    switch (activeName.value) {
      case 'notice':
        return defineAsyncComponent(() => import('./DefenseList.vue'));
      case 'regulation':
        return defineAsyncComponent(() => import('./RegulationList.vue'));
    }
  });
</script>

<style lang="scss" scoped>
  @use '../styles/tabs-container.scss';
  :deep(.el-tabs__header) {
    padding-left: 48cpx;
  }
</style>
