<script setup lang="ts">
  import { SmoothStepEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from '@vue-flow/core';
  import { computed } from 'vue';
  import { useRuleProcessStore } from './../../store';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { useVueFlow } from '@vue-flow/core';
  const store = useRuleProcessStore();
  const { getEdgeId, deleteInfo } = store;
  const props = defineProps<EdgeProps>();
  const { removeEdges } = useVueFlow();
  const path = computed(() => getBezierPath(props));
  const hasDeleteIcon = computed(() => {
    return getEdgeId() == props.id;
  });
  function deleteEdge() {
    removeEdges(props.data.id);
    deleteInfo(props.data.id);
  }
</script>

<template>
  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
  <SmoothStepEdge v-bind="props" />
  <!--  {{ data.label }} -->
  <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
  <EdgeLabelRenderer>
    <div
      :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
      }"
      class="nodrag nopan"
    >
      <div class="nopan-btn" v-if="hasDeleteIcon">
        <IconFontSymbol icon="rule-shanchu" fontSize="14" @click.stop="deleteEdge"
      /></div>
    </div>
  </EdgeLabelRenderer>
</template>
