<template>
  <a-modal
    :visible="visible"
    title="链路操作"
    @cancel="handleCancel"
    @update:visible="emit('update:visible', $event)"
    :footer="false"
    width="400px"
  >
    <div class="edge-actions">
      <a-button long @click="handleEdit">编辑链路</a-button>
      <a-button long status="danger" @click="handleDelete">删除链路</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
interface Props {
  visible: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'edit'): void
  (e: 'delete'): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

const handleEdit = () => {
  emit('edit')
  emit('update:visible', false)
}

const handleDelete = () => {
  emit('delete')
  emit('update:visible', false)
}

const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped lang="less">
.edge-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}
</style>
