<template>
  <div>
    <el-button
      size="small"
      type="danger"
      :icon="Delete"
      @click="handleDelete"
      >删除</el-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { deleteScrapydServer } from '@/api/scrapydServer';

// 定义props
const props = defineProps({
  row: { 
    type: Object, 
    default: () => ({}) 
  }
});

// 定义事件
const emit = defineEmits(['success']);

// 处理删除
const handleDelete = () => {
  ElMessageBox.confirm(`确定要删除服务"${props.row.server_name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'custom-message-box',
  }).then(async () => {
    try {
      const res = await deleteScrapydServer({
        scrapydServerId: props.row.id
      });

      if (res.code === 0) {
        ElMessage.success('删除成功');
        emit('success');
      } else {
        ElMessage.error(res.message || '删除失败');
      }
    } catch (error) {
      console.error('删除失败:', error);
      ElMessage.error('删除失败');
    }
  }).catch(() => {
    // 用户取消，不做任何操作
  });
};
</script>

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

<style>
.custom-message-box .el-message-box__headerbtn {
  outline: none;
}
</style>
