<template>
  <BaseEdge
    :id="id"
    :path="edgePath"
    :marker-end="markerEnd"
    :interaction-width="interactionWidth || 32"
    :style="style"
  />

  <EdgeLabelRenderer v-if="selected && !flowStore.disableForm">
    <div class="edge-delete-action nodrag nopan" :style="deleteActionStyle">
      <el-tooltip content="删除连线" placement="top">
        <button type="button" aria-label="删除连线" @click.stop="deleteEdge">
          <el-icon><Delete /></el-icon>
        </button>
      </el-tooltip>
    </div>
  </EdgeLabelRenderer>
</template>

<script setup>
import { computed } from "vue";
import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@vue-flow/core";
import { Delete } from "@element-plus/icons-vue";
import { useFlowStore } from "@/store/modules/flow";

defineOptions({ inheritAttrs: false });

const props = defineProps({
  id: String,
  sourceX: Number,
  sourceY: Number,
  targetX: Number,
  targetY: Number,
  sourcePosition: String,
  targetPosition: String,
  markerEnd: String,
  interactionWidth: Number,
  selected: Boolean,
  style: Object,
});

const flowStore = useFlowStore();
const pathData = computed(() => getBezierPath({
  sourceX: props.sourceX,
  sourceY: props.sourceY,
  sourcePosition: props.sourcePosition,
  targetX: props.targetX,
  targetY: props.targetY,
  targetPosition: props.targetPosition,
}));
const edgePath = computed(() => pathData.value[0]);
const deleteActionStyle = computed(() => ({
  transform: `translate(-50%, -50%) translate(${pathData.value[1]}px, ${pathData.value[2]}px)`,
}));

const deleteEdge = () => {
  window.lf?.deleteEdge(props.id);
  window.lf?.clearSelectElements();
};
</script>

<style scoped lang="scss">
.edge-delete-action {
  position: absolute;
  z-index: 20;
  pointer-events: all;

  button {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid #efb8b4;
    border-radius: 50%;
    background: #fff;
    color: #d93025;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.2);

    &:hover {
      border-color: #d93025;
      background: #fff1f0;
    }
  }
}
</style>
