<script setup lang="ts">
import {
  CurrentHeaderOperationProvideName,
  GrandparentMethod,
  HJInterNodeData,
  HJMethodName, HJNodeData,
  HJPosition
} from '../../types/comTypes';
import {Handle} from '@vue-flow/core'
import {Position} from '@vue-flow/core';
import {inject, watch} from "vue";
const props = defineProps<HJInterNodeData>();

//  'basic-box--selected': props.data.isSelected || (currentHeaderOperationNode && currentHeaderOperationNode.id === props.id) 如果是选中或者正在通过header编辑节点信息的样式
const currentHeaderOperationNode = inject<HJNodeData | null>(CurrentHeaderOperationProvideName)


</script>

<template>
  <div
      class="basic-box"
      :class="{
      [`basic-box--${props.type}`]: props.type,
      'basic-box--selected': props.data.isSelected || (currentHeaderOperationNode && currentHeaderOperationNode.id === props.id),
      'basic-box--dragging': props.data.isDragging,
    }"
  >

    <slot name="header"></slot>

    <slot name="default">
    </slot>

    <!--    这里是handle的操作-->
    <div v-if="props.sourcePosition && props.targetPosition">
      <Handle class="handle-style"  type="source" :position="props.sourcePosition"/>
      <Handle class="handle-style"  type="target" :position="props.targetPosition"/>
    </div>
    <div v-else-if="props.data.handles && props.data.handles.length">
      <Handle class="handle-style" v-for="(handle, index) in props.data.handles"  :type="handle.type"
              :position="handle.position" :style="handle.style"/>
    </div>
    <div v-else>
      <Handle class="handle-style"  type="target" :position="Position.Top"/>
      <Handle class="handle-style"  type="source" :position="Position.Bottom"/>
    </div>

  </div>
</template>

<style scoped lang="less">
.basic-box {
  width: 200px;
  height: 60px;
  border: 2px solid #625454;
  border-radius: 5px;
  background-color: rgba(255, 255, 255);
  overflow: hidden;
}

.handle-style {
  width: 10px;
  height: 10px;
}


//可以根据type类型来设置不同的Node的样式
.basic-box--custom {
  border-style: dashed;
}

.basic-box--nest {
  border-style: double;
  width: 300px;
  height: 100px;
  background: transparent;
}

.basic-box:hover {
  //background-color: #30bfcb;
  border-color: #2b48dd;
}

.basic-box--selected {
  //background-color: #388d25;
  border-color: rgb(184, 129.6, 48);
  color: rgb(184, 129.6, 48);
}

.basic-box--dragging {
  background-color: #da5565;
}
</style>
