<template>
  <div class="safety-platform-container">
    <div class="safety-platform-container__header">
      <div class="bread">
        <BreadcrumbBack />
        <div class="breadcrumb-title">应急物资详情</div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="item in EMERGENCY_SUPPLY_TABS" :key="item.value" :label="item.label" :name="item.value" />
      </el-tabs>
    </div>
    <main class="safety-platform-container__main">
      <component :is="dynamicComponent" :id="id" />
    </main>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { computed, ref,defineAsyncComponent } from 'vue';
  import { EMERGENCY_SUPPLY_TABS } from './src/constant';

  const route = useRoute();
  const activeName = ref(EMERGENCY_SUPPLY_TABS[0].value);
  const id = Number(route.params.id);
  const dynamicComponent = computed(()=>{
    if(activeName.value === EMERGENCY_SUPPLY_TABS[0].value){
      return defineAsyncComponent(()=>import('./src/components/ViewEmergencyItem.vue'))
    }
    return defineAsyncComponent(()=>import('./src/components/ChangeRecord.vue'))
  })
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  .bread {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .safety-platform-container__header {
    padding-bottom: 0 !important;
  }
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 14px !important;
  }
</style>
