<template>
  <ele-page>
    <ele-card
      :header-style="{ paddingTop: 0, paddingBottom: 0 }"
      :body-style="{ padding: 0 }"
    >
      <template #header>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <ele-tabs
            type="plain"
            size="large"
            v-model="type"
            :items="[
              { name: 'task', label: '计划任务' },
              { name: 'arrange', label: '任务编排' }
            ]"
          />
          <div>
            <el-tag
              >任务管理器状态: <span style="color: red">未在线</span></el-tag
            >
          </div>
        </div>
      </template>
    </ele-card>
    <div
      v-loading="isLoading"
      element-loading-text="不可用,任务管理器未在线"
      element-loading-spinner="null-spin"
    >
      <task-list v-if="type == 'task'" />
    </div>
  </ele-page>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import TaskList from './task/index.vue';

  const type = ref('task');
  const isLoading = ref(true);
</script>
