<template>
  <el-button
    type="danger"
    size="small"
    @click="confirmRemove"
  >
    <el-icon><Delete /></el-icon>
  </el-button>
</template>

<script lang="ts" setup>
import { Delete } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import * as scheduleApi from '@/api/schedule'

const props = defineProps({
  job_id: { 
    type: String, 
    required: true 
  }
})

const emit = defineEmits(['success'])

const confirmRemove = () => {
  ElMessageBox.confirm('是否确认删除该调度任务?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        const res = await scheduleApi.removeJob({
          job_id: props.job_id
        })
        
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功!'
          })
          emit('success')
        }
      } catch (error) {
        console.error('删除调度任务失败:', error)
      }
    })
    .catch(() => {
      // 用户取消操作
    })
}
</script>

<style lang="scss" scoped>
</style>
