<template>
  <div class="edge-inspector">
    <div class="inspector-head">
      <div class="inspector-title">连线</div>
      <div class="inspector-id">ID: {{ edge.id }}</div>
    </div>

    <dl class="edge-meta">
      <div class="edge-meta-row">
        <dt>起点</dt>
        <dd>{{ edge.sourceLabel }}</dd>
      </div>
      <div class="edge-meta-row">
        <dt>终点</dt>
        <dd>{{ edge.targetLabel }}</dd>
      </div>
      <div v-if="edge.label" class="edge-meta-row">
        <dt>出口</dt>
        <dd>{{ edge.label }}</dd>
      </div>
    </dl>

    <p class="edge-hint muted">按 Delete / Backspace 可快速删除；或点击下方按钮。</p>

    <el-button type="danger" plain size="small" class="edge-delete-btn" @click="emit('delete')">
      删除连线
    </el-button>
  </div>
</template>

<script setup lang="ts">
export interface EdgeInspectorModel {
  id: string
  sourceLabel: string
  targetLabel: string
  label?: string | null
}

defineProps<{
  edge: EdgeInspectorModel
}>()

const emit = defineEmits<{
  delete: []
}>()
</script>

<style scoped>
.edge-inspector {
  height: 100%;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
}
.inspector-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.inspector-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.inspector-id {
  font-size: 11px;
  color: #909399;
  margin-top: 4px;
}
.edge-meta {
  margin: 0 0 12px;
}
.edge-meta-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.edge-meta-row dt {
  flex-shrink: 0;
  width: 36px;
  color: #909399;
}
.edge-meta-row dd {
  margin: 0;
  color: #303133;
  font-weight: 500;
}
.edge-hint {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.muted {
  color: #909399;
}
.edge-delete-btn {
  width: 100%;
}
</style>
