<template>
  <div class="run-job-page">
    <BaseTable
      ref="baseTableRef"
      tableName="RUN_JOB_TABLE"
      :api="queryJobsApi"
      :params="{
        runId: currentRunInfo?.uuid,
      }"
      :actionList="actionList"
      :fullHeight="true"
      :showSetting="false"
    >
      <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>
      <template #software="{ row }">
        <div calss="img-box">
          <img width="14" :src="getAppImg(row)" alt="" />
          <span>{{ row.software }}</span>
        </div>
      </template>
    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { queryJobsApi, stopHpcJobApi } from '@/api/pbs/pbs';
import { useDict } from '@/utils/useDict';
import { FileUtil } from '@/utils/file';
import { queryAllApplicationApi } from '@/api/system/application';
import { ElMessage } from 'element-plus';

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

const baseTableRef = ref();

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

const stopFun = async (row: any) => {
  const param = {
    jobId: row.jobId,
  };
  stopHpcJobApi(param).then((res: any) => {
    if (res && res.code === 200) {
      ElMessage.success('操作成功');
    }
  });
};

const getAppImg = (row: any) => {
  const appImg: any =
    appList.value.find((item: any) => {
      return item.uuid === row.softwareId;
    })?.img || '';
  return appImg;
};

const appList = ref<any>([]);

const getAppInfo = async () => {
  const param = {
    appName: '',
    current: 1,
    size: 999,
  };

  try {
    const res: any = await queryAllApplicationApi(param);
    if (res && res.code === 200) {
      appList.value = res.data.data.map((item: any) => {
        return {
          label: item.appName,
          img: FileUtil.getFilePreviewImgPathUrl(item.appImage),
          uuid: item.uuid,
        };
      });
    }
  } catch {}
};

const refrehFun = () => {
  baseTableRef.value.resetFun();
};

defineExpose({
  refrehFun,
});

const timer = ref<any>();

onMounted(async () => {
  if (props.currentRunInfo) {
    timer.value = setInterval(() => {
      refrehFun();
    }, 30 * 1000);
  }

  await getAppInfo();
});

onBeforeMount(() => {
  clearInterval(timer.value);
});
</script>

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

.img-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .img {
    border-radius: 2px;
  }
}
</style>
