<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"> 保卫管理规定与通知 </div>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="item in REGULATION_SUBPAGES" :key="item.value" :label="item.label" :name="item.value" />
      </el-tabs>
    </header>
    <main class="safety-platform-container__main">
      <component :is="dynamicComponent" ref="dynamicComponentRef" />
    </main>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, defineAsyncComponent, onUnmounted } from 'vue';
  import { REGULATION_SUBPAGES } from './constants';

  const activeName = ref(sessionStorage.getItem('security-regulation-active') || REGULATION_SUBPAGES[0].value);

  const dynamicComponent = computed(() => {
    switch (activeName.value) {
      case REGULATION_SUBPAGES[0].value:
        return defineAsyncComponent(() => import('./components/RegulationTable.vue'));
      case REGULATION_SUBPAGES[1].value:
        return defineAsyncComponent(() => import('./components/NoticeTable.vue'));
    }
  });

  onUnmounted(() => {
    sessionStorage.setItem('security-regulation-active', activeName.value);
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;
  .safety-platform-container__header {
    padding-bottom: 0 !important;
  }
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 14px !important;
  }
</style>
