<template>
  <div class="comp-hpc-list">
    <Dialog
      v-model="visible"
      diaTitle="HPC计算列表"
      width="80%"
      @close="closeFun"
    >
      <div class="content">
        <div class="table">
          <BaseTable
            tableName="HPC_LIST_TABLE"
            :api="queryJobsApi"
            :actionList="actionList"
          />
        </div>
      </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';

interface Props {
  modelValue: boolean;
}

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

const emit = defineEmits(['update:modelValue']);
const visible = ref(true);

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>
