<template>
  <div class="run-job-page">
    <BaseTable
      showIndex
      ref="baseTableRef"
      tableName="RUN_JOB_TABLE"
      :api="queryJobsApi"
      :params="{
        runId: currentRunInfo?.uuid,
      }"
      :actionList="actionList"
      :fullHeight="true"
    >
      <template #totalElapsedTime="{ row }">
        <span>{{ row.totalElapsedTime ? row.totalElapsedTime + 'h' : '--' }}</span>
      </template>
      <template #jobStatus="{ row }">
        <el-tag v-if="row.jobStatus === 'Finished'" type="success">{{
          WORK_STATUS.O[row.jobStatus]
        }}</el-tag>
        <el-tag type="info" v-else-if="row.jobStatus === 'Canceled'">{{
          WORK_STATUS.O[row.jobStatus]
        }}</el-tag>
        <el-tag v-else-if="row.jobStatus === 'Failed'" type="danger">{{
          WORK_STATUS.O[row.jobStatus]
        }}</el-tag>
        <el-tag v-else type="primary">{{ WORK_STATUS.O[row.jobStatus] }}</el-tag>
      </template>
    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { queryJobsApi } from '@/api/pbs/pbs';
import { useDict } from '@/utils/useDict';

defineProps({
  currentRunInfo: {
    type: Object,
    default: () => {},
  },
});
const { WORK_STATUS } = useDict('WORK_STATUS');

const baseTableRef = ref();

const actionList = ref([
  {
    title: '暂停',
    type: 'danger',
    click: (row: any) => {},
    hide: (row: any) => {
      return !['Canceled', 'Finished', 'Failed'].includes(row.jobStatus);
    },
  },
]);
</script>

<style lang="scss" scoped>
.run-job-page {
  width: 100%;
  height: 100%;
}
</style>
