<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 MONITOR_RECORDS_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 } from 'vue';
  import { MONITOR_RECORDS_SUBPAGES } from './constant';

  const activeName = ref(MONITOR_RECORDS_SUBPAGES[0].value);

  const dynamicComponent = computed(() => {
    return activeName.value === MONITOR_RECORDS_SUBPAGES[1].value
      ? defineAsyncComponent(() => import('./components/AccessRecords.vue'))
      : defineAsyncComponent(() => import('./components/InvasionSnapshot.vue'));
  });
</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>
