<template>
  <div style="height: 100%">
    <el-container class="flow-box">
      <el-aside style="width: 300px" theme="light" class="select-area">
        <el-row>
          <el-button
            v-model="tag.checked0"
            @click="toggleNodeShow0"
            class="tag"
            size="mini"
            >工具</el-button
          >
          <div align="center" class="margin-style" v-if="tag.toolShow">
            <el-button
              size="small"
              v-for="(tool, index) in field.tools"
              :key="index"
              :icon="tool.icon"
              :type="currentTool.type == tool.type ? 'primary' : 'default'"
              @click.native="selectTool(tool.type)"
              >{{ tool.name }}</el-button
            >
          </div>
        </el-row>
        <el-row>
          <el-button
            class="tag"
            size="mini"
            v-model="tag.checked1"
            @click="toggleNodeShow1"
            >基础节点
          </el-button>
          <div align="center" class="margin-style" v-if="tag.commonNodeShow">
            <div
              v-for="(commonNode, index) in field.commonNodes"
              :key="index"
              class="node-item"
              :type="commonNode.type"
              belongto="commonNodes"
            >
              <!-- <a-icon :component="commonNode.icon" /> -->
              {{ commonNode.nodeName }}
            </div>
          </div>
        </el-row>
        <el-row>
          <el-button
            class="tag"
            size="mini"
            v-model="tag.checked3"
            @click="toggleNodeShow3"
            >泳道节点
          </el-button>
          <div align="center" class="margin-style" v-if="tag.laneNodeShow">
            <div
              v-for="(laneNode, index) in field.laneNodes"
              :key="index"
              class="node-item"
              :type="laneNode.type"
              belongto="laneNodes"
            >
              {{ laneNode.nodeName }}
            </div>
          </div>
        </el-row>
      </el-aside>
      <el-container
        ><el-header style="height: auto !important">
          <el-tooltip content="保存流程" placement="bottom">
            <el-button
              @click="saveFlow"
              class="header-option-button"
              size="medium"
              icon="el-icon-camera-solid"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="生成流程图片" placement="bottom">
            <el-button
              @click="exportFlowPicture"
              class="header-option-button"
              size="medium"
              icon="el-icon-picture-outline"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="重新绘制" placement="bottom">
            <el-button
              @click="restSave"
              class="header-option-button"
              size="medium"
              icon="el-icon-delete"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            :content="flowData.config.showGridText"
            placement="bottom"
          >
            <el-button
              @click="toggleShowGrid"
              class="header-option-button"
              size="medium"
              icon="el-icon-view"
            >
            </el-button>
          </el-tooltip>
          <el-tooltip content="设置" placement="bottom">
            <el-button
              @click="setting"
              class="header-option-button"
              size="medium"
              icon="el-icon-setting"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="帮助" placement="bottom">
            <el-button
              class="header-option-button"
              size="medium"
              icon="el-icon-tickets"
              @click="shortcutHelper"
            ></el-button>
          </el-tooltip>
          <!-- <a-popconfirm
            title="请选择帮助项："
            placement="bottom"
            okType="default"
            okText="快捷键大全"
            cancelText="使用文档"
            @confirm="shortcutHelper"
            @cancel="usingDoc"
          >
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <el-tooltip content="帮助" placement="bottom">
              <a-button
                class="header-option-button"
                size="mini"
                icon="book"
              ></a-button>
            </el-tooltip>
          </a-popconfirm> -->
          <el-tooltip content="退出" placement="bottom">
            <el-button
              @click="exit"
              class="header-option-button"
              size="medium"
              icon="el-icon-right"
            ></el-button>
          </el-tooltip>
        </el-header>
        <el-main class="content" style="padding: 0">
          <flow-area
            ref="flowArea"
            :browserType="browserType"
            :flowData="flowData"
            :select.sync="currentSelect"
            :selectGroup.sync="currentSelectGroup"
            :plumb="plumb"
            :currentTool="currentTool"
            @findNodeConfig="findNodeConfig"
            @selectTool="selectTool"
            @getShortcut="getShortcut"
            @saveFlow="saveFlow"
          >
          </flow-area>
          <vue-context-menu
            :contextMenuData="linkContextMenuData"
            @deleteLink="deleteLink"
          >
          </vue-context-menu> </el-main
      ></el-container>
      <el-aside theme="light" class="attr-area" @mousedown.stop="loseShortcut">
        <flow-attr
          :plumb="plumb"
          :flowData="flowData"
          :select.sync="currentSelect"
        ></flow-attr>
      </el-aside>
    </el-container>
    <el-dialog
      :title="'流程设计图_' + flowData.attr.id + '.png'"
      width="90%"
      :show-close="false"
      :visible.sync="flowPicture.modalVisible"
      :modal-append-to-body="false"
      okText="下载到本地"
      cancelText="取消"
      @ok="downLoadFlowPicture"
      @cancel="cancelDownLoadFlowPicture"
    >
      <div align="center">
        <img :src="flowPicture.url" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDownLoadFlowPicture">取 消</el-button>
        <el-button type="primary" @click="downLoadFlowPicture"
          >下载到本地</el-button
        >
      </div>
    </el-dialog>
    <setting-modal ref="settingModal"></setting-modal>
    <shortcut-modal ref="shortcutModal"></shortcut-modal>
  </div>
</template>

<script>
import jsplumb from "jsplumb";
import {
  tools,
  commonNodes,
  highNodes,
  laneNodes,
} from "./config/basic-node-config.js";
import { flowConfig } from "./config/args-config.js";
import $ from "jquery";
import "jquery-ui";
import html2canvas from "html2canvas";
import canvg from "canvg";
import { ZFSN } from "./util/ZFSN.js";
import FlowArea from "./modules/FlowArea";
import FlowAttr from "./modules/FlowAttr";
import SettingModal from "./modules/SettingModal";
import ShortcutModal from "./modules/ShortcutModal";

export default {
  props: ["asyncData"],
  name: "vfd",
  components: {
    jsplumb,
    flowConfig,
    html2canvas,
    canvg,
    FlowArea,
    FlowAttr,
    SettingModal,
    ShortcutModal,
  },
  created() {
    this.initJsPlumb();
  },
  mounted() {
    const that = this;
    that.dealCompatibility();
    that.initNodeSelectArea();
    that.initJsPlumb();
    that.listenShortcut();
    that.initFlow();
    that.listenPage();
  },
  data() {
    return {
      radio3: "",
      info: {
        version: "1.0.5",
        author: "ZSFN",
        gitee: "https://gitee.com/yjblogs/VFD",
      },
      tag: {
        checked0: true,
        checked1: true,
        checked2: true,
        checked3: true,
        toolShow: true,
        commonNodeShow: true,
        highNodeShow: true,
        laneNodeShow: true,
      },
      browserType: 3,
      plumb: {},
      field: {
        tools: tools,
        commonNodes: commonNodes,
        highNodes: highNodes,
        laneNodes: laneNodes,
      },
      flowData: {
        nodeList: [],
        linkList: [],
        attr: {
          id: "",
        },
        config: {
          showGrid: true,
          showGridText: "隐藏网格",
          showGridIcon: "eye",
        },
        status: flowConfig.flowStatus.CREATE,
        remarks: [],
      },
      currentTool: {
        type: "drag",
        icon: "drag",
        name: "拖拽",
      },
      currentSelect: {},
      currentSelectGroup: [],
      activeShortcut: true,
      linkContextMenuData: flowConfig.contextMenu.link,
      flowPicture: {
        url: "",
        modalVisible: false,
        closable: false,
        maskClosable: false,
      },
      data: {
        nodeList: [
          {
            type: "start",
            nodeName: "开始",
            icon: "StartIcon",
            id: "start-c0041b0fb4324c5c916f0cf7d613d63e",
            height: 50,
            x: 3070,
            width: 50,
            y: 3080,
          },
          {
            type: "freedom",
            nodeName: "自动节点",
            icon: "FreedomIcon",
            id: "freedom-24144992e6ba4d969998f317ab0b0d80",
            height: 50,
            x: 3170,
            width: 120,
            y: 3130,
          },
          {
            type: "event",
            nodeName: "事件节点",
            icon: "EventIcon",
            id: "event-daab2a1592ab4df784ef9a7f25b97c54",
            height: 50,
            x: 3330,
            width: 50,
            y: 3180,
          },
        ],
        linkList: [
          {
            type: "link",
            id: "link-43a979bbb8bf45e5909efa8a0f50bead",
            sourceId: "start-c0041b0fb4324c5c916f0cf7d613d63e",
            targetId: "freedom-24144992e6ba4d969998f317ab0b0d80",
            label: "",
            cls: {
              linkType: "Flowchart",
              linkColor: "#2a2929",
              linkThickness: 2,
            },
          },
          {
            type: "link",
            id: "link-f3c1e364daf84ed78cd0d35aa5c78ad9",
            sourceId: "freedom-24144992e6ba4d969998f317ab0b0d80",
            targetId: "event-daab2a1592ab4df784ef9a7f25b97c54",
            label: "",
            cls: {
              linkType: "Flowchart",
              linkColor: "#2a2929",
              linkThickness: 2,
            },
          },
        ],
        attr: { id: "flow-108c6f51ec9949159fd59fd339b95e23" },
        config: {
          showGrid: true,
          showGridText: "隐藏网格",
          showGridIcon: "eye",
        },
        status: "1",
        remarks: [],
      },
    };
  },
  methods: {
    restSave() {
      this.$confirm("确认要重新绘制吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.clear();
        })
        .catch(() => {});
    },
    // 工具栏是否显示
    toggleNodeShow0(flag) {
      this.tag.toolShow = !this.tag.toolShow;
    },
    // 基础节点是否显示
    toggleNodeShow1(flag) {
      this.tag.commonNodeShow = !this.tag.commonNodeShow;
    },
    // 高级节点是否显示
    toggleNodeShow2(flag) {
      if (!flag) {
        this.tag.highNodeShow = false;
      } else {
        this.tag.highNodeShow = true;
      }
    },
    // 泳道是否显示
    toggleNodeShow3(flag) {
      this.tag.laneNodeShow = !this.tag.laneNodeShow;
    },
    // 判断浏览器类型并提示
    getBrowserType() {
      let userAgent = navigator.userAgent;
      let isOpera = userAgent.indexOf("Opera") > -1;
      if (isOpera) {
        return 1;
      }
      if (userAgent.indexOf("Firefox") > -1) {
        return 2;
      }
      if (userAgent.indexOf("Chrome") > -1) {
        return 3;
      }
      if (userAgent.indexOf("Safari") > -1) {
        return 4;
      }
      if (
        userAgent.indexOf("compatible") > -1 &&
        userAgent.indexOf("MSIE") > -1 &&
        !isOpera
      ) {
        alert("IE浏览器支持性较差，推荐使用Firefox或Chrome");
        return 5;
      }
      if (userAgent.indexOf("Trident") > -1) {
        alert("Edge浏览器支持性较差，推荐使用Firefox或Chrome");
        return 6;
      }
    },
    // 如果是火狐浏览器提示
    dealCompatibility() {
      const that = this;
      that.browserType = that.getBrowserType();
      if (that.browserType == 2) {
        flowConfig.shortcut.scaleContainer = {
          code: 16,
          codeName: "SHIFT(chrome下为ALT)",
          shortcutName: "画布缩放",
        };
      }
    },
    // 初始化 jsplump对象
    initJsPlumb() {
      const that = this;
      // flowConfig.jsPlumbInsConfig 配置文件
      that.plumb = jsPlumb.getInstance(flowConfig.jsPlumbInsConfig);
      that.plumb.bind("beforeDrop", function (info) {
        let sourceId = info.sourceId; // 源点
        let targetId = info.targetId; // 目标节点

        if (sourceId == targetId) return false;
        let filter = that.flowData.linkList.filter(
          (link) => link.sourceId == sourceId && link.targetId == targetId
        );
        if (filter.length > 0) {
          that.$message.error("同方向的两节点连线只能有一条！");
          return false;
        }
        return true;
      });

      that.plumb.bind("connection", function (conn, e) {
        let connObj = conn.connection.canvas;
        let o = {},
          id,
          label;
        if (
          that.flowData.status == flowConfig.flowStatus.CREATE ||
          that.flowData.status == flowConfig.flowStatus.MODIFY
        ) {
          id = "link-" + ZFSN.getId();
          label = "";
        } else if (that.flowData.status == flowConfig.flowStatus.LOADING) {
          let l = that.flowData.linkList[that.flowData.linkList.length - 1];
          id = l.id;
          label = l.label;
        }
        connObj.id = id;
        o.type = "link";
        o.id = id;
        o.sourceId = conn.sourceId;
        o.targetId = conn.targetId;
        o.label = label;
        o.cls = {
          linkType: flowConfig.jsPlumbInsConfig.Connector[0],
          linkColor: flowConfig.jsPlumbInsConfig.PaintStyle.stroke,
          linkThickness: flowConfig.jsPlumbInsConfig.PaintStyle.strokeWidth,
        };
        $("#" + id).bind("contextmenu", function (e) {
          that.showLinkContextMenu(e);
          that.currentSelect = that.flowData.linkList.filter(
            (l) => l.id == id
          )[0];
        });
        $("#" + id).bind("click", function (e) {
          let event = window.event || e;
          event.stopPropagation();
          that.currentSelect = that.flowData.linkList.filter(
            (l) => l.id == id
          )[0];
        });
        if (that.flowData.status != flowConfig.flowStatus.LOADING)
          that.flowData.linkList.push(o);
      });
      that.plumb.importDefaults({
        ConnectionsDetachable: flowConfig.jsPlumbConfig.conn.isDetachable,
      });

      ZFSN.consoleLog(["实例化JsPlumb成功..."]);
    },
    // 初始化左侧节点 --- 复制拖拽
    initNodeSelectArea() {
      $(document).ready(function () {
        $(".node-item").draggable({
          opacity: flowConfig.defaultStyle.dragOpacity,
          helper: "clone",
          cursorAt: {
            top: 16,
            left: 60,
          },
          containment: "window",
          revert: "invalid",
        });
        ZFSN.consoleLog(["初始化节点选择列表成功..."]);
      });
    },
    // 初始化键盘快捷键
    listenShortcut() {
      const that = this;
      document.onkeydown = function (e) {
        let event = window.event || e;

        if (!that.activeShortcut) return;
        let key = event.keyCode;

        switch (key) {
          case flowConfig.shortcut.multiple.code:
            that.$refs.flowArea.rectangleMultiple.flag = true;
            break;
          case flowConfig.shortcut.dragContainer.code:
            that.$refs.flowArea.container.dragFlag = true;
            break;
          case flowConfig.shortcut.scaleContainer.code:
            that.$refs.flowArea.container.scaleFlag = true;
            break;
          case flowConfig.shortcut.dragTool.code:
            that.selectTool("drag");
            break;
          case flowConfig.shortcut.connTool.code:
            that.selectTool("connection");
            break;
          case flowConfig.shortcut.zoomInTool.code:
            that.selectTool("zoom-in");
            break;
          case flowConfig.shortcut.zoomOutTool.code:
            that.selectTool("zoom-out");
            break;
          case 37:
            that.moveNode("left");
            break;
          case 38:
            that.moveNode("up");
            break;
          case 39:
            that.moveNode("right");
            break;
          case 40:
            that.moveNode("down");
            break;
        }

        if (event.ctrlKey) {
          if (event.altKey) {
            switch (key) {
              case flowConfig.shortcut.settingModal.code:
                that.setting();
                break;
            }
          }
        }
      };
      document.onkeyup = function (e) {
        let event = window.event || e;

        let key = event.keyCode;
        if (key == flowConfig.shortcut.dragContainer.code) {
          that.$refs.flowArea.container.dragFlag = false;
        } else if (key == flowConfig.shortcut.scaleContainer.code) {
          event.preventDefault();
          that.$refs.flowArea.container.scaleFlag = false;
        } else if (key == flowConfig.shortcut.multiple.code) {
          that.$refs.flowArea.rectangleMultiple.flag = false;
        }
      };

      ZFSN.consoleLog(["初始化快捷键成功..."]);
    },
    listenPage() {
      window.onbeforeunload = function (e) {
        e = e || window.event;
        if (e) {
          e.returnValue = "关闭提示";
        }
        return "关闭提示";
      };
    },
    // 初始化流程
    initFlow() {
      // 创建流程
      if (this.asyncData.hasOwnProperty("status")) {
        this.loadFlow(this.asyncData);
      } else {
        this.flowData.attr.id = "flow-" + ZFSN.getId();
      }
      // if (that.flowData.status == flowConfig.flowStatus.CREATE) {
      // } else {
      //   // 接口加载流程---数据渲染==修改
      //   that.loadFlow(this.data);
      // }
      ZFSN.consoleLog(["初始化流程图成功..."]);
    },
    // 通过获取数据初始化流程图
    loadFlow(json) {
      const that = this;
      that.clear();
      let loadData = json;
      that.flowData.attr = loadData.attr;
      that.flowData.config = loadData.config;
      that.flowData.status = flowConfig.flowStatus.LOADING;
      that.plumb.batch(function () {
        let nodeList = loadData.nodeList;
        nodeList.forEach(function (node, index) {
          that.flowData.nodeList.push(node);
        });
        let linkList = loadData.linkList;
        that.$nextTick(() => {
          linkList.forEach(function (link, index) {
            that.flowData.linkList.push(link);
            let conn = that.plumb.connect({
              source: link.sourceId,
              target: link.targetId,
              anchor: flowConfig.jsPlumbConfig.anchor.default,
              connector: [
                link.cls.linkType,
                {
                  gap: 5,
                  cornerRadius: 8,
                  alwaysRespectStubs: true,
                },
              ],
              paintStyle: {
                stroke: link.cls.linkColor,
                strokeWidth: link.cls.linkThickness,
              },
            });
            if (link.label != "") {
              conn.setLabel({
                label: link.label,
                cssClass: "linkLabel",
              });
            }
          });
          that.currentSelect = {};
          that.currentSelectGroup = [];
          that.flowData.status = flowConfig.flowStatus.MODIFY;
        });
      }, true);
      let canvasSize = that.computeCanvasSize();
      that.$refs.flowArea.container.pos = {
        top: -canvasSize.minY + 100,
        left: -canvasSize.minX + 100,
      };
    },
    findNodeConfig(belongto, type, callback) {
      let node = null;
      switch (belongto) {
        case "commonNodes":
          node = commonNodes.filter((n) => n.type == type);
          break;
        case "highNodes":
          node = highNodes.filter((n) => n.type == type);
          break;
        case "laneNodes":
          node = laneNodes.filter((n) => n.type == type);
          break;
      }
      if (node && node.length >= 0) node = node[0];
      callback(node);
    },
    // 工具栏操作
    selectTool(type) {
      let tool = tools.filter((t) => t.type == type);
      if (tool && tool.length >= 0) this.currentTool = tool[0];

      switch (type) {
        case "drag":
          this.changeToDrag();
          break;
        case "connection":
          this.changeToConnection();
          break;
        case "zoom-in":
          this.changeToZoomIn();
          break;
        case "zoom-out":
          this.changeToZoomOut();
          break;
      }
    },
    // 工具栏选择移动调用
    changeToDrag() {
      const that = this;
      that.flowData.nodeList.forEach(function (node, index) {
        let f = that.plumb.toggleDraggable(node.id);
        // 如果节点未设置可拖动则设置拖动
        if (!f) {
          that.plumb.toggleDraggable(node.id);
        }
        // 如果节点为泳道则关闭连接功能
        if (node.type != "x-lane" && node.type != "y-lane") {
          that.plumb.unmakeSource(node.id);
          that.plumb.unmakeTarget(node.id);
        }
      });
    },
    // 工具栏选择连线触发
    changeToConnection() {
      const that = this;
      that.flowData.nodeList.forEach(function (node, index) {
        let f = that.plumb.toggleDraggable(node.id);
        if (f) {
          that.plumb.toggleDraggable(node.id);
        }
        if (node.type != "x-lane" && node.type != "y-lane") {
          that.plumb.makeSource(
            node.id,
            flowConfig.jsPlumbConfig.makeSourceConfig
          );
          that.plumb.makeTarget(
            node.id,
            flowConfig.jsPlumbConfig.makeTargetConfig
          );
        }
      });
      that.currentSelect = {};
      that.currentSelectGroup = [];
    },
    changeToZoomIn() {
      console.log("切换到放大工具");
    },
    changeToZoomOut() {
      console.log("切换到缩小工具");
    },
    // 查看当前流程节点数
    checkFlow() {
      const that = this;
      let nodeList = that.flowData.nodeList;

      if (nodeList.length <= 0) {
        this.$message.error("流程图中无任何节点！");
        return false;
      }
      return true;
    },
    // 保存流程
    saveFlow() {
      const that = this;
      let flowObj = Object.assign({}, that.flowData);

      if (!that.checkFlow()) return;
      flowObj.status = flowConfig.flowStatus.SAVE;
      let d = JSON.stringify(flowObj);
      console.log(d);
      this.$message.success("保存流程成功！请查看控制台。");
      return d;
    },
    // 导出图片
    exportFlowPicture() {
      const that = this;

      if (!that.checkFlow()) return;

      let $Container = that.$refs.flowArea.$el.children[0],
        svgElems = $($Container).find('svg[id^="link-"]'),
        removeArr = [];
      svgElems.each(function (index, svgElem) {
        let linkCanvas = document.createElement("canvas");
        let canvasId = "linkCanvas-" + ZFSN.getId();
        linkCanvas.id = canvasId;
        removeArr.push(canvasId);

        let svgContent = svgElem.outerHTML.trim();
        canvg(linkCanvas, svgContent);
        if (svgElem.style.position) {
          linkCanvas.style.position += svgElem.style.position;
          linkCanvas.style.left += svgElem.style.left;
          linkCanvas.style.top += svgElem.style.top;
        }
        $($Container).append(linkCanvas);
      });

      let canvasSize = that.computeCanvasSize();

      let pbd = flowConfig.defaultStyle.photoBlankDistance;
      let offsetPbd = ZFSN.div(pbd, 2);

      html2canvas($Container, {
        width: canvasSize.width + pbd,
        height: canvasSize.height + pbd,
        scrollX: -canvasSize.minX + offsetPbd,
        scrollY: -canvasSize.minY + offsetPbd,
        logging: false,
        onclone: function (args) {
          removeArr.forEach(function (id, index) {
            $("#" + id).remove();
          });
        },
      }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        that.flowPicture.url = dataURL;
        that.flowPicture.modalVisible = true;
      });
    },
    // 下载图片
    downLoadFlowPicture() {
      const that = this;
      let alink = document.createElement("a");
      let alinkId = "alink-" + ZFSN.getId();
      alink.id = alinkId;
      alink.href = that.flowPicture.url;
      alink.download = "流程设计图_" + that.flowData.attr.id + ".png";
      alink.click();
    },
    // 关闭导出弹窗并清除图片url
    cancelDownLoadFlowPicture() {
      this.flowPicture.url = "";
      this.flowPicture.modalVisible = false;
    },
    // 设置流程图画布
    computeCanvasSize() {
      const that = this;
      let nodeList = Object.assign([], that.flowData.nodeList),
        minX = nodeList[0].x,
        minY = nodeList[0].y,
        maxX = nodeList[0].x + nodeList[0].width,
        maxY = nodeList[0].y + nodeList[0].height;
      nodeList.forEach(function (node, index) {
        minX = Math.min(minX, node.x);
        minY = Math.min(minY, node.y);
        maxX = Math.max(maxX, node.x + node.width);
        maxY = Math.max(maxY, node.y + node.height);
      });
      let canvasWidth = maxX - minX;
      let canvasHeight = maxY - minY;
      return {
        width: canvasWidth,
        height: canvasHeight,
        minX: minX,
        minY: minY,
        maxX: maxX,
        maxY: maxY,
      };
    },
    // 清空画布
    clear() {
      const that = this;
      that.flowData.nodeList.forEach(function (node, index) {
        that.plumb.remove(node.id);
      });
      that.currentSelect = {};
      that.currentSelectGroup = [];
      that.flowData.nodeList = [];
      that.flowData.linkList = [];
      that.flowData.remarks = [];
    },
    // 显示/隐藏网格
    toggleShowGrid() {
      let flag = this.flowData.config.showGrid;
      if (flag) {
        this.flowData.config.showGrid = false;
        this.flowData.config.showGridText = "显示网格";
        this.flowData.config.showGridIcon = "eye-invisible";
      } else {
        this.flowData.config.showGrid = true;
        this.flowData.config.showGridText = "隐藏网格";
        this.flowData.config.showGridIcon = "eye";
      }
    },
    // 设置功能左侧弹窗
    setting() {
      this.$refs.settingModal.open();
    },
    // 弹出帮助文档
    shortcutHelper() {
      this.$refs.shortcutModal.open();
    },
    usingDoc() {
      window.open(this.info.gitee);
    },
    exit() {
      alert("退出流程设计器...");
    },
    // 修改右键
    showLinkContextMenu(e) {
      let event = window.event || e;

      event.preventDefault();
      event.stopPropagation();
      $(".vue-contextmenuName-flow-menu").css("display", "none");
      $(".vue-contextmenuName-node-menu").css("display", "none");
      let x = event.clientX;
      let y = event.clientY;
      this.linkContextMenuData.axis = { x, y };
    },
    // 删除连线
    deleteLink() {
      const that = this;
      let sourceId = that.currentSelect.sourceId;
      let targetId = that.currentSelect.targetId;
      that.plumb.deleteConnection(
        that.plumb.getConnections({
          source: sourceId,
          target: targetId,
        })[0]
      );
      let linkList = that.flowData.linkList;
      linkList.splice(
        linkList.findIndex(
          (link) => link.sourceId == sourceId || link.targetId == targetId
        ),
        1
      );
      that.currentSelect = {};
    },
    // 关闭键盘快捷键
    loseShortcut() {
      this.activeShortcut = false;
    },
    // 开启键盘快捷键
    getShortcut() {
      this.activeShortcut = true;
    },
    // 移动节点
    moveNode(type) {
      const that = this;

      let m = flowConfig.defaultStyle.movePx,
        isX = true;
      switch (type) {
        case "left":
          m = -m;
          break;
        case "up":
          m = -m;
          isX = false;
          break;
        case "right":
          break;
        case "down":
          isX = false;
      }

      if (that.currentSelectGroup.length > 0) {
        that.currentSelectGroup.forEach(function (node, index) {
          if (isX) {
            node.x += m;
          } else {
            node.y += m;
          }
        });
        that.plumb.repaintEverything();
      } else if (that.currentSelect.id) {
        if (isX) {
          that.currentSelect.x += m;
        } else {
          that.currentSelect.y += m;
        }
        that.plumb.repaintEverything();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style/flow-designer.scss";
.flow-box {
  background-color: white;
  margin: 15px;
  height: 100%;
}
.el-aside {
  overflow: inherit !important;
}
.margin-style {
  margin: 20px 0;
}
</style>