<template>
    <div>
      <svg class="node-line">
        <polyline :points="points.linePoints" class="line" ></polyline>
        <text class="add-icon" @click="addNode(node)" :x="points.iconPoint.x" :y="points.iconPoint.y" font-family="Arial" font-size="25"
        text-anchor="middle" dy=".3em" style="cursor: pointer;" >
          ⊕
        </text>
      </svg>
    </div>
</template>

<script lang="ts">
import { ref, defineComponent, computed, PropType } from 'vue';
import { IActionNode, ActionNode, ActionFlow, RootAction } from '../../types/ActionTypes';
export enum Direction {
  Default = "None",
  Left = "LEFT",
  Right = "RIGHT",
  LeftNotNext = "LEFTNOTNEXT",
  RightNotNext = "RIGHTNOTNEXT",
}
export default defineComponent({
  name: 'NodeLine',
  props: {
    actionNode: {
      type: Object as PropType<IActionNode>,
      required: true
    },
    mode: {
      type: String as PropType<Direction>,
      required: true
    },
    inputPoint:{
      type:String
    }
  },
  emits: ['addNode'],
  setup(props,context) {
    const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
    const points = computed(() => {
      switch (props.mode) {
        case Direction.Left:
          return {
            linePoints: '180, 0, 180, 40, 120, 40, 120, 60',
            iconPoint: { x: 180, y: 20 }
          };
        case Direction.Right:
          return {
            linePoints: '60, 0, 60, 40, 120, 40, 120, 60',
            iconPoint: { x: 60, y: 20 }
          };
        case Direction.LeftNotNext:
          return {
            linePoints: '180, 0, 180, 40',
            iconPoint: { x: 180, y: 20 }
          };
        case Direction.RightNotNext:
          return {
            linePoints: '60, 0, 60, 40',
            iconPoint: { x: 60, y: 30 }
          };
        default:
          return {
            linePoints: '120, 0, 120, 60',
            iconPoint: { x: 120, y: 30 }
          };
      }
    });
    const addNode=(prveNode:IActionNode)=>{
      context.emit('addNode',props.inputPoint);
    }

    return {
      node: props.actionNode,
      hasBranch,
      points,
      addNode
    }
  }
});
</script>
<style lang="scss">
.node-line {
  height: 60px;
  width: 240px;
}

.line {
  stroke: $blue-7;
  fill: none;
  stroke-width: 2;
}

.add-icon {
  stroke: $blue-8;
  fill: $blue-8;
  font-family: Arial;
  pointer-events: all;
  font-size: 2.0em;
}

.add-icon:hover{
  stroke: $blue-8;
  fill:$blue-8;
  font-weight: bold;
  font-size: 2.4em;
}
</style>
