<template>
<div
  :id="jobId"
  class="job_process_container"
  ref="designer"
></div>
</template>

<script>
const { Graph, Shape, Addon } = require("@antv/x6");
const { lineoption } = require("@/components/designertackle/config");
export default {
  props: {
    jobId: [String],
    dataDetail: [Object],
    taskList: [Array]
  },
  watch: {
    dataDetail: {
      handler() {
        this.initData();
      },
      immediate: true
    },
    taskList() {
      if(this.job.data && this.job.data.jsonDetail) {
        // console.log("更新画布")
        try {
          let cells = JSON.parse(this.job.data.jsonDetail);
          this.setCanvas(cells, this.job);
        } catch (e) {}
      }
    }
  },
  data() {
    return {
      job: {}
    };
  },
  created() {},
  methods: {
    initData() {
      if(this.$refs.designer && this.dataDetail) {
        this.job = {
          id: this.jobId,
          graph: undefined, //画布
          loading: false,
          dnd: undefined, //插画
          change: false,
          data: this.dataDetail
        };
        this.initCanvas();
      }
    },
    /**
     * @Author: 
     * @description: 初始化画布
     */
    initCanvas() {
      this.$nextTick(() => {
        const graphOpetion = this.getGraphOpetion(this.job.id);
        this.job.graph = new Graph(graphOpetion);
        this.bindEvent(this.job);
        this.job.dnd = new Addon.Dnd({
          target: this.job.graph,
          scaled: false,
          animation: true,
        });
        if (this.job.data.jsonDetail) {
          try {
            let cells = JSON.parse(this.job.data.jsonDetail);
            this.setCanvas(cells, this.job);
          } catch (e) {}
        }

      })
    },

    /**
     * @Author: 
     * @description: 绘制画布
     */
    setCanvas(data = { steps: [], hops: [] }, job) {
      const cells = []
      data.steps.forEach(node => {
        node.attrs = undefined;
        //状态解析绘制
        let nodeVal = [];
        if (this.taskList.length > 0) {
          nodeVal = this.taskList[0].children.filter(item => {
            return item.stepId == node.id
          })
        }
        node.data.status = nodeVal.length > 0 ? nodeVal[0].status.toLocaleLowerCase() : "";
        node.component = undefined;
        let cell = {
          label: node.data.name,
          ...node
        }
        cells.push(job.graph.createNode(cell))
      });
      data.hops.forEach(edge => {
        cells.push(job.graph.createEdge({
          ...lineoption,
          ...edge
        }))
      });
      job.graph.resetCells(cells);
      // 内容居中
      job.graph.centerContent();
    },

    /**
     * @Author: Jason Liu
     * @description: 绑定事件
     */
    bindEvent(_this) {
      _this.graph.on("blank:click", ({ e, x, y }) => {
        this.$emit("blankClickCallback")
      });
      _this.graph.on("node:click", ({ e, x, y, node, view }) => {
        let tempNode = node.toJSON();
        this.$emit("nodeClickCallback", tempNode.id);
      });
    },

    getGraphOpetion(id) {
      return {
        container: this.$refs.designer, //容器对象 //容器对象
        grid: true, //
        autoResize: true, //是否允许更新容器大小
        history: true,
        height: "100%",
        width: "100%",
        panning: {
          //支持水平平移
          enabled: true,
          eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
        },
        mousewheel: {
          //允许缩放
          enabled: true, //启动
          zoomAtMousePosition: true,
          modifiers: "ctrl",
          minScale: 0.5,
          maxScale: 3,
        },
        connecting: {
          //连线规则
          router: {
            name: "manhattan",
            args: { padding: 1 },
          },
          connector: {
            name: "rounded",
            args: { radius: 8 },
          },
          anchor: "center",
          connectionPoint: "anchor", //指定连接点
          allowBlank: false, //是否允许连接到画布空白位置的点
          snap: { radius: 20 }, //自动吸附
          createEdge() {
            //连接的过程中创建新的边
            return new Shape.Edge(lineoption);
          },
          validateConnection({ targetMagnet }) {
            //在移动边的时候判断连接是否有效
            return !!targetMagnet;
          },
        },
        highlighting: {
          //选项来指定触发某种交互时的高亮样式
          magnetAdsorbed: {
            //连线过程中，自动吸附到链接桩
            name: "stroke",
            args: {
              attrs: {
                fill: "#5F95FF",
                stroke: "#5F95FF",
              },
            },
          },
        },
        resizing: true, //缩放节点
        rotating: false, //旋转节点
        selecting: {
          enabled: true,
          rubberband: true,
          showNodeSelectionBox: true,
        },
        minimap: {
          enabled: true
        },
        snapline: true, //对齐线是移动节点排版的辅助工具
        keyboard: true, //键盘快捷键
        clipboard: true, //剪切板
      };
    },

  }
};
</script>
<style lang="less" scoped>
.job_process_container {
  height: 100%;
  width: 100%;
  position: relative;
  .x6-node foreignObject > body {
    display: initial;
  }
  .x6-widget-stencil {
    background-color: #fff;
  }
  .x6-widget-stencil-title {
    background-color: #fff;
    display: none;
  }
  .x6-widget-stencil-group-title {
    background-color: #fff !important;
  }
  .x6-widget-transform {
    margin: -1px 0 0 -1px;
    padding: 0px;
    border: 1px dashed #239edd;
  }
  .x6-widget-transform > div {
    border: 1px solid #239edd;
  }
  .x6-widget-transform > div:hover {
    background-color: #3dafe4;
  }
  .x6-widget-transform-active-handle {
    background-color: #3dafe4;
  }
  .x6-widget-transform-resize {
    border-radius: 0;
  }
  .x6-widget-selection-inner {
    border: 1px solid #239edd;
  }
  .x6-widget-selection-box {
    opacity: 0;
  }
}
</style>