<template>
  <div class="job-cancel">
    <el-button
      :size="size"
      @click="handleCancel"
      :disabled="disabled"
    >取消</el-button>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import * as projectApi from '@/api/project';

const props = defineProps({
  job: { type: String, required: true },
  project: { type: String, required: true },
  scrapydServerId: { type: String, required: true },
  size: { type: String, default: 'default' },
  disabled: { type: Boolean, default: false }
});

const emit = defineEmits(['success']);

// 取消任务
const handleCancel = async () => {
  try {
    const res = await projectApi.cancelJob({
      project: props.project,
      job: props.job,
      scrapydServerId: props.scrapydServerId
    });

    if (res.code === 0) {
      ElMessage.success('取消成功');
      emit('success');
    } else {
      ElMessage.error(res.message || '取消失败');
    }
  } catch (error) {
    console.error('取消任务失败:', error);
    ElMessage.error('取消任务失败');
  }
};
</script>

<style lang="scss" scoped>
.job-cancel {
  display: inline-block;
}
</style>
