<!--
 * @Author: 曹捷
 * @Date: 2020-08-10 21:28:07
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-05 10:33:12
 * @Description: 流程图单个节点组件   二级组件
-->
<template>
  <div :id="itemInfo.mainData.uuid" @click="targetNode"
    :style="{ left: itemInfo.mainData.pageX, top: itemInfo.mainData.pageY }" class="flowNode run-error"
    :class="{ flowAnimation: actived }">
    <span class="animation"></span>
    <span class="animation"></span>
    <span class="animation"></span>
    <span class="animation"></span>
    <a-card hoverable>
      <!-- <div class="clearfix header" slot="header">
        <span>
          {{ itemInfo.mainData.nodeName }}
        </span>
        <span class="f-r operation" v-if="!actived && type !== 'show'">
          <i @click="settingCompInfo" class="pointer iconfont iconsetting m-r-10"></i>
          <slot name="operation" :data="itemInfo"></slot>
        </span>
      </div> -->
      <slot :data="itemInfo"></slot>
      <!-- <nodeAdd v-if="type === 'add'"></nodeAdd>
      <nodeCar v-if="type === 'show'"></nodeCar> -->
      <!-- <div class="flow-content">13232</div> -->
    </a-card>
  </div>
</template>

<script>
import instance from './instance.js'
import { targetEndpoint, sourceEndpoint } from './style.js'
import nodeAdd from './nodeContent/nodeAdd.vue'
import nodeCar from './nodeContent/nodeCar.vue'
import { mapGetters } from 'vuex'
import util from './../../utils/utils'
export default {
  components: { nodeAdd, nodeCar },
  computed: {
    ...mapGetters('flowlayout', ['hasCompSet', 'compSetInfo', 'targetNodeId']),
  },
  props: {
    itemInfo: {
      type: Object,
    },
    // 新增或者只是查看 add  show
    type: {
      type: String,
      default: 'add',
    },
    index: {
      type: Number,
    },
  },
  provide() {
    return { itemInfo: this.itemInfo, parent: this }
  },
  inject: ['panelOption'],
  data() {
    return {
      targetEndpoint: '',
      sourceEndpoint: '',
      actived: false,
    }
  },
  methods: {
    /**
     * 初始化样式  是否可以编辑等
     */
    initStyle() {
      this.targetEndpoint = targetEndpoint
      this.sourceEndpoint = sourceEndpoint
      if (this.type == 'show') {
        this.sourceEndpoint.isSource = false
        this.targetEndpoint.isTarget = false
      }
    },
    // mouseleave() {
    //   if (this.targetNodeId !== this.itemInfo.mainData.uuid) {
    //     let points = instance.getEndpoints(
    //       document.getElementById(this.itemInfo.mainData.uuid)
    //     )
    //     points.forEach((element) => {
    //       element.canvas.classList.remove('pointNone')
    //     })
    //   }
    // },
    // mouseenter() {
    //   if (this.targetNodeId !== this.itemInfo.mainData.uuid) {
    //     let points = instance.getEndpoints(
    //       document.getElementById(this.itemInfo.mainData.uuid)
    //     )
    //     points.forEach((element) => {
    //       element.canvas.classList.add('pointNone')
    //     })
    //   }
    // },
    // 选择 子节点
    targetNode() {
      this.$store.commit(
        'flowlayout/setTargetNodeId',
        this.itemInfo.mainData.uuid
      )
    },
    // 设置子组件参数
    settingCompInfo() {
      if (
        this.hasCompSet &&
        this.compSetInfo.mainData.uuid !== this.itemInfo.mainData.uuid
      ) {
        this.$store.commit('flowlayout/setHasCompSet', false)
        this.$nextTick(() => {
          this.$store.commit('flowlayout/setCompSetInfo', this.itemInfo)
          this.$store.commit('flowlayout/setHasCompSet', true)
        })
      } else {
        this.$store.commit('flowlayout/setCompSetInfo', this.itemInfo)
        this.$store.commit('flowlayout/setHasCompSet', true)
      }
    },
    // 组件瞄点
    initChart() {
      let _this = this
      this.itemInfo.mainData.sourceAnchors.forEach((element) => {
        let uuid = this.itemInfo.mainData.uuid + element
        instance.addEndpoint(this.itemInfo.mainData.uuid, this.sourceEndpoint, {
          anchors: element,
          uuid: uuid,
        })
      })
      this.itemInfo.mainData.targetAnchors.forEach((element) => {
        let uuid = this.itemInfo.mainData.uuid + element
        instance.addEndpoint(this.itemInfo.mainData.uuid, this.targetEndpoint, {
          anchors: element,
          uuid: uuid,
        })
      })
      if (this.type !== 'show') {
        // if (this.type) {
        let drag = instance.draggable(this.itemInfo.mainData.uuid, {
          // containment: 'parent',  //禁锢在父节点不允许出去
          grid: [10, 10],
          // 组件移动的时候
          drag: function (event, ui) {
            // 虚拟标准线
            let info = _this.panelOption.movePos
            _this.panelOption.uuid = _this.itemInfo.mainData.uuid
            if (info[0] != event.pos[0] || info[1] != event.pos[1]) {
              _this.panelOption.movePos = event.pos
            }

            // 判断宽度 流程快超出区域，区域宽度增加
            let parant = event.el.parentNode
            let rightPostion = event.el.offsetWidth + event.pos[0]
            let bottomPostion = event.el.offsetHeight + event.pos[1]
            if (rightPostion > parant.offsetWidth) {
              _this.panelOption.width = `${rightPostion + 20}px`
              parant.parentNode.scrollLeft = rightPostion + 20
            }
            if (bottomPostion > parant.offsetHeight) {
              _this.panelOption.height = `${bottomPostion + 20}px`
              parant.parentNode.scrollTop = bottomPostion + 20
            }
            // 同步page坐标数据
            _this.itemInfo.mainData.pageX = `${event.pos[0]}px`
            _this.itemInfo.mainData.pageY = `${event.pos[1]}px`
          },
          // 组件移动结束
          stop: function (event, ui) {
            _this.panelOption.movePos = [0, 0]
          },
        })
      }
      //  instance.repaintEverything(); // 重绘
      this.$nextTick(() => {
        this.initConnect()
      })
    },
    // 初始化连线
    initConnect() {
      this.itemInfo.next &&
        this.itemInfo.next.forEach((element) => {
          instance.connect({
            uuids: [
              this.itemInfo.mainData.uuid + element.souceType,
              element.uuid + element.targetType,
            ],
            editable: false,
          })
        })
    },
    // remove() {
    //   this.$confirm({
    //     title: '提示',
    //     content: '是否删除当前组件',
    //     cancelText: '取消',
    //     onOk() {
    //       console.log('OK')
    //       this.$http.removeCompFlow(this.itemInfo.mainData).then((res) => {
    //         this.$emit('remove', this.index)
    //         instance.remove(this.itemInfo.mainData.uuid)
    //       })
    //     },
    //   })
    // },

    getNextConnects() {
      let lines = instance.getAllConnections()
      let next = util.array.clearNull(
        lines.map((item) => {
          if (item.sourceId === this.itemInfo.mainData.uuid) {
            return item
          }
        })
      )
      return next
    },
    // 开始动画
    activeStart() {
      let next = this.getNextConnects()
      this.actived = true
      next.forEach((edge) => {
        edge.canvas.classList.add('active')
      })
      // setTimeout(() => {
      //   this.activeEnd()
      // }, 5000)
    },
    // 结束动画
    activeEnd() {
      let next = this.getNextConnects()
      this.actived = false
      next.forEach((edge) => {
        edge.canvas.classList.remove('active')
      })
    },
  },
  mounted() {
    this.initStyle()
    this.initChart()
  },
}
</script>

<style lang="less">
.flowNode {
  width: 240px;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .ant-card-body {
    padding: 10px;
  }
  .flow-content {
    height: 70px;
  }
  .header {
    .operation {
      display: none;
    }
  }
  .header:hover {
    .operation {
      display: block;
    }
  }
  .a-card {
    border: 0;
    border: 1px solid #80c1ec;
  }
  .a-card__header {
    background: #229ae6;
    color: #fff;
    font-size: 14px;
    padding: 15px 10px;
    border-bottom: none;
  }
  .flowShow {
    display: none;
  }
}

// 盒子边框流光效果 ---------------------------- start ------------------------------
@flowColor: #005a93;
.flowAnimation {
  position: relative;
  display: inline-block;
  overflow: hidden;
  .animation {
    position: absolute;
    display: block;
    z-index: 999;
  }
  .flowShow {
    display: inline-block;
  }
  .animation:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, @flowColor);
    animation: flowAnimation1 3s linear infinite;
  }
  .animation:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, @flowColor);
    animation: flowAnimation2 3s linear infinite;
    animation-delay: 0.75s;
  }
  .animation:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, @flowColor);
    animation: flowAnimation3 3s linear infinite;
    animation-delay: 1.5s;
  }
  .animation:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, @flowColor);
    animation: flowAnimation4 3s linear infinite;
    animation-delay: 2.25s;
  }
}
@keyframes flowAnimation1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

@keyframes flowAnimation2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
@keyframes flowAnimation3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}
@keyframes flowAnimation4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>
