<!--
 * User: CHT
 * Date: 2020/5/25
 * Time: 9:12
-->
<template>
  <div
    tabindex="-1"
    class="super-flow__node"
    :class="{'can-move': nodeDrop, active: active}"
    :style="style"
    @blur="handleBlur"
    @mousedown.left="$event => nodeMousedown($event, node)"
    @mouseenter="nodeMouseenter"
    @mouseleave="nodeMouseleave"
    @mouseup.left="$event => nodeMouseup($event, node)"
    @contextmenu.prevent.stop="nodeContextmenu"
    @dblclick="nodeDblclick"
  >
    <slot
      :node="node"
      :meta="node.meta"
    />
    <template v-if="show">
      <div
        v-for="(dir, key) in direction"
        :key="key"
        v-show="output && lineDrop"
        :class="`node-side node-side-${key}`"
        @contextmenu.stop.prevent
        @dblclick.stop.prevent
        @mousedown.left.prevent.stop="evt => sideMousedown(evt, dir)">
      </div>
      <div
        class="node-power node-power-start"
        @contextmenu.stop.prevent
        @dblclick.stop.prevent
        @mousedown.left.prevent.stop="powerToStart"
      ></div>
      <div
        class="node-power node-power-end"
        @contextmenu.stop.prevent
        @dblclick.stop.prevent
        @mousedown.left.prevent.stop="powerToEnd"
      ></div>
    </template>
  </div>
</template>

<script>

import {
  direction
} from './types'

import {
  getOffset
} from './utils'

export default {
  name: 'node-page',
  props: {
    active: {
      type: Boolean,
      default: false
    },
    graph: Object,
    node: Object,
    index: Number,
    isMove: Boolean,
    isTemEdge: Boolean,
    nodeIntercept: Function,
    lineDrop: Boolean,
    nodeDrop: Boolean
  },
  data () {
    return {
      show: false,
      direction,
      output: this.nodeIntercept(),
      graphData: this.graph
    }
  },
  computed: {
    style () {
      const {
        position,
        width,
        height
      } = this.node

      return {
        width: width + 'px',
        height: height + 'px',
        top: position[1] + 'px',
        left: position[0] + 'px'
      }
    }
  },
  methods: {
    powerToStart () {
      this.$emit('node-to-start')
    },

    powerToEnd () {
      this.$emit('node-to-end')
    },

    isChoose () {
      return {
        visible: this.show,
        node: this.node
      }
    },

    handleBlur () {
      this.$emit('updateNode', false)
      this.show = false
    },

    nodeMousedown (evt, node) {
      this.show = true
      this.graph.toLastNode(this.index)
      this.$emit('node-mousedown', this.node, getOffset(evt))
    },

    nodeMouseenter (evt) {
      this.output = this.nodeIntercept()
      this.graphData.mouseonNode = this.node
      this.$emit('update:graph', this.graphData)
      if (!this.isTemEdge) return
      this.$emit('node-mouseenter', evt, this.node, getOffset(evt, this.$el))
    },

    nodeMouseleave () {
      this.graphData.mouseonNode = null
      this.$emit('update:graph', this.graphData)
      if (!this.isTemEdge) return
      this.$emit('node-mouseleave')
    },

    nodeMouseup (evt, node) {
      this.$emit('node-mouseup-auto', evt, node)
      if (!this.isTemEdge) return
      this.$emit('node-mouseup', evt, node)
    },

    nodeContextmenu (evt) {
      this.$emit('node-contextmenu', evt, this.node)
    },

    nodeDblclick (evt) {
      this.$emit('node-dblclick', evt, this.node)
    },

    sideMousedown (evt) {
      this.$emit('side-mousedown', evt, this.node, getOffset(evt, this.$el))
    }
  }
}
</script>

<style lang="less">
.super-flow__node {
  @size    : 20px;
  box-shadow       : 1px 2px 8px rgba(0, 0, 0, .2);
  user-select      : none;

  position         : absolute;
  background-color : #ffffff;
  border           : 1px solid rgb(180, 180, 180);
  z-index          : 1;
  outline          : none;

  &.active {
    // border-color: red;
    box-shadow       : 1px 2px 8px rgba(1, 135, 253, 1);
  }

  &.can-move {
    cursor : move;
  }

  &-header {
    background-color : green;
  }

  .node-side {
    // display: none;
    position : absolute;
    cursor   : crosshair;
    width: (@size/2);
    height: (@size/2);
    border: 3px solid rgba(1, 135, 253, 1);
    background: #FFF;
    border-radius: @size;

    &-top {
      top    : -(@size/2);
      right  : 50%;
      // left   : translate(5px);
      // height : @size;
      transform: translateX((@size/4));
    }

    &-right {
      bottom    : 50%;
      transform: translateY((@size/4));
      right  : -(@size/2);
      // top : 0;
      // width  : @size;
    }

    &-bottom {
      right  : 50%;
      transform: translateX((@size/4));
      bottom : -(@size/2);
      // left   : 0;
      // height : @size;
    }

    &-left {
      bottom    : 50%;
      transform: translateY((@size/4));
      // top : 0;
      left   : -(@size/2);
      // width  : @size;
    }
  }

  .node-power {
    position: absolute;
    width: @size;
    height: @size;
    border-width: 5px;
    border-color: #0187fd transparent transparent #0187fd;
    border-style: solid;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    &-start {
      left: -(@size * 2);
      top: 50%;
      transform: translateY(-(@size/2)) rotate(-45deg);
    }
    &-end {
      right: -(@size * 2);
      top: 50%;
      transform: translateY(-(@size/2)) rotate(135deg);
    }
  }

  // &:hover {
  //   .node-side {
  //     display: block;
  //   }
    // box-shadow : 1px 2px 8px rgba(0, 0, 0, .4);
    // box-shadow       : 1px 2px 8px rgba(1, 135, 253, 1);
  // }

  &.isSelect {
    z-index : 2;
  }
}
</style>
