<script setup lang="ts">
import type { NodeProps } from '@vue-flow/core'
import { useVueFlow, Handle, Position } from '@vue-flow/core'
import { Setting, Delete } from '@element-plus/icons-vue'

const props = withDefaults(defineProps<{ node: NodeProps; connectionType?: number; canSetting?: boolean; canConnect?: boolean }>(), {
  canSetting: true,
  canConnect: true
})

const emit = defineEmits<{ (e: 'setting'): void }>()

const { findNode, removeNodes, nodesDraggable, nodesConnectable } = useVueFlow()

// 删除
function onRemove() {
  const node = findNode(props.node.id)
  if (node) removeNodes([node])
}
</script>

<template>
  <div class="custom-node">
    <div class="node-toolbar">
      <el-icon v-if="nodesDraggable" size="14" @click="onRemove"><Delete /></el-icon>
      <el-icon size="14" @click="emit('setting')" v-if="canSetting"><Setting /></el-icon>
    </div>
    <div class="custom-node__inner"><slot :node="node" /></div>
    <p class="node-label">{{ node.label }}</p>
  </div>
  <Handle id="handle-left" class="handle" :position="Position.Left" type="target" />
  <Handle id="handle-top" class="handle" :position="Position.Top" type="target" />
  <Handle id="handle-bottom" class="handle" :position="Position.Bottom" type="target" />
  <Handle id="handle-right" class="handle" :position="Position.Right" type="target" />
  <div class="handle-wrap" v-if="!!(nodesConnectable && canConnect)">
    <template v-if="connectionType === 1">
      <Handle id="handle-yes" class="handle-link is-yes" :position="Position.Left" type="source">是</Handle>
      <Handle id="handle-no" class="handle-link is-no" :position="Position.Left" type="source">否</Handle>
    </template>
    <template v-else-if="connectionType === 2">
      <Handle id="handle-success" class="handle-link is-yes" :position="Position.Left" type="source">成功</Handle>
      <Handle id="handle-failure" class="handle-link is-no" :position="Position.Left" type="source">失败</Handle>
      <Handle id="handle-any" class="handle-link is-any" :position="Position.Left" type="source">继续</Handle>
    </template>
    <template v-else-if="connectionType === 3">
      <Handle id="handle-a" class="handle-link is-yes" :position="Position.Left" type="source">A</Handle>
      <Handle id="handle-b" class="handle-link is-no" :position="Position.Left" type="source">B</Handle>
    </template>
    <template v-else>
      <Handle id="handle-any" class="handle-default" :position="Position.Left" type="source">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 dGjRCM svg-icon-path-icon fill"
          viewBox="0 0 512 512"
          width="24"
          height="24">
          <g>
            <path
              d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"
              fill="#6c6c6c"></path>
          </g>
        </svg>
      </Handle>
    </template>
  </div>
</template>

<style lang="scss">
.handle {
  background-color: transparent;
  border-radius: 0;
  border: 0;
}
.handle-wrap {
  opacity: 0;
  position: absolute;
  left: 100%;
  top: 50%;
  padding-left: 2px;
  transform: translateY(-50%);
  .handle-link {
    position: unset;
    min-width: unset;
    min-height: unset;
    width: auto;
    height: auto;
    background: transparent;
    white-space: nowrap;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    color: #fff;
    text-align: center;
    margin: 2px 0;
    padding: 0 10px;
    border: 0;
    transform: unset;
  }
  .handle-default {
    left: 0;
    transform: translateY(-50%);
    svg {
      pointer-events: none;
    }
  }
  .is-yes {
    background-color: #81b337;
  }
  .is-no {
    background-color: #a16222;
  }
  .is-any {
    background-color: #347caf;
  }
}

.vue-flow__node {
  &.selected {
    .node-toolbar {
      display: flex;
    }
    .handle-wrap {
      opacity: 1;
    }
  }
}
.vue-flow__handle-right {
  right: 0;
}
.custom-node {
  position: relative;
  &:hover {
    .circle {
      filter: drop-shadow(2px 2px 10px #969696);
    }
  }
}
.node-toolbar {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 2px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transform: translate(-50%);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  .el-icon {
    padding: 5px 8px;
    cursor: pointer;
  }
}
.node-label {
  position: absolute;
  top: 100%;
  left: 50%;
  font-size: 14px;
  color: var(--el-input-text-color, var(--el-text-color-regular));
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}
.node-item {
  position: relative;
  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
