<template>
  <div class="disaster-precaution-container">
    <header class="disaster-precaution-container__header">
      <span class="disaster-precaution-container__title">检查任务执行</span>
      <el-tabs v-model="activeName">
        <el-tab-pane label="待执行任务" name="doing" />
        <el-tab-pane label="已提交任务" name="done" />
      </el-tabs>
    </header>
    <main class="disaster-precaution-container__main">
      <component :is="dynamicComponent" />
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { defineAsyncComponent } from 'vue';
  const activeName = ref('doing');
  const dynamicComponent = computed(() => {
    if (activeName.value === 'doing') {
      return defineAsyncComponent(() => import('./src/components/TaskExecutionDoing.vue'));
    }
    return defineAsyncComponent(() => import('./src/components/TaskExecutionDone.vue'));
  });
</script>

<style lang="scss" scoped>
  @use '../style/disaster.scss' as *;
  .disaster-precaution-container__header {
    padding: 16cpx 0 0 22cpx !important;
  }
  :deep(.el-tabs__header) {
    margin: 0;
  }
</style>
