<template>
  <div class="comp-hpc-list">
    <Dialog v-model="visible" diaTitle="作业执行列表" width="80%" height="90%" @close="closeFun">
      <div class="content">
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane label="HPC作业列表" name="cloud">
            <div class="table">
              <BaseTable
                tableName="HPC_LIST_TABLE"
                :api="queryJobsApi"
                :actionList="actionList"
                fullHeight
              >
                <template #totalElapsedTime="{ row }">
                  <span>{{ row.totalElapsedTime || '--' }}h</span>
                </template>
                <template #jobStatus="{ row }">
                  <span>{{ WORK_STATUS.O[row.jobStatus] }}</span>
                </template>
              </BaseTable>
            </div>
          </el-tab-pane>
          <el-tab-pane label="本地作业执行列表" name="local">
            <div class="table"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { queryJobsApi, stopHpcJobApi } from '@/api/pbs/pbs';
import Dialog from '@/components/common/dialog/index.vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { ElMessage } from 'element-plus';
import { useDict } from '@/utils/useDict';

const { WORK_STATUS } = useDict('WORK_STATUS');

interface Props {
  modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emit = defineEmits(['update:modelValue']);
const visible = ref(false);
const activeName = ref('cloud');
watch(
  () => props.modelValue,
  (val: boolean) => {
    visible.value = val;
  }
);

const actionList = ref([
  {
    title: '取消',
    type: 'danger',
    needConfirm: true,
    confirmTip: '确定取消选中计算任务吗？',
    click: (row: any) => {
      stopFun(row);
    },
  },
]);

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

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.comp-hpc-list {
}

.content {
  height: 100%;
  .table {
    height: 100%;
  }
}
</style>
