<template>
  <div v-show="isShow">
    <el-row>
      <el-button type="primary" icon="el-icon-cancle" @click="btnCancle" circle>取消</el-button>
      <el-button type="danger" icon="el-icon-ok" @click="btnOk" circle>确定</el-button>
    </el-row>
    <v-stage id="vstage" ref="stage" :config="wf.stageSize">
      <v-layer ref="layer">
        <v-arrow v-for="line in wf.lines" :key=" line.id" :config="line.lineDefine"></v-arrow>
        <v-circle
          v-for="node in wf.nodes"
          :key="node.id"
          :config="node.nodeDefine"
          @mousedown="nodeMouseDown"
          @mouseover="nodeMouseOver"
          @mouseleave="nodeMouseLeave"
        ></v-circle>

        <v-label v-for="nodeinfo in wf.nodeInfos" :key="nodeinfo.id" :config="nodeinfo">
          <v-tag :config="nodeinfo.tag"></v-tag>
          <v-text :config="nodeinfo.text"></v-text>
        </v-label>

        <v-circle
          v-for="bk in wf.backChecks"
          :key="bk.id"
          :config="bk"
          @mousedown="bkMouseDown"
          @mouseover="bkMouseOver"
          @mouseleave="bkMouseLeave"
        ></v-circle>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
import https from "../https";
import { uuid } from "vue-uuid"; // Import uuid
const width = window.innerWidth;
const height = window.innerHeight;
export default {
  data() {
    return {
      isShow: false,
      wfInstanceId: "",
      options: "",
      userName: "",
      wfNodeId: "",
      bill: {},
      wf: {
        stageSize: {
          width: width,
          height: height,
          draggable: true
        },
        curSelectedNode: null,
        lines: [],
        nodes: [],
        nodeInfos: [],
        backChecks: [],
        MousePoint: {
          x: 0,
          y: 0
        }
      }
    };
  },
  methods: {
    initWF(wfId, nodeId, bill, options, userName) {
      this.wfNodeId = nodeId;
      this.bill = bill;
      this.options = options;
      this.userName = userName;
      this.wfInstanceId = wfId;
      var that = this;
      https
        .fetchGet("api/WFEngine/GetWFInstanceById", {
          id: wfId
        })
        .then(data => {
          console.log(data);
          that.wf.lines = data.data.lines;
          that.wf.nodes = data.data.nodes;

          that.wf.nodeInfos = [];
          that.setWFState();
        })
        .catch(err => {
          console.log(err);
        });
    },
    btnCancle(e) {},
    btnOk(e) {
      var backNodes = this.wf.backChecks.filter(p => p.fill === "#4876FF");
      if (
        backNodes === null ||
        backNodes === undefined ||
        backNodes.length === 0
      ) {
        this.$message({
          message: "请选择要退回的节点",
          type: "warning"
        });
        return;
      }

      var backNodeIds = [];
      backNodes.forEach(ele => {
        backNodeIds.push(ele.nodeId);
      });

      var paras = {
        wfInstanceId: this.wfInstanceId,
        nodeInstanceId: this.wfNodeId,
        bussinessInfo: this.bill,
        options: this.options,
        userName: this.userName,
        preNodes: backNodeIds
      };
      https
        .fetchPost("api/WFEngine/Back", paras)
        .then(data => {
          console.log(data);
          this.curWF = data.data;

          this.isAdd = true;
          this.curBill = this.billDefault;
        })
        .catch(err => {
          console.log(err);
        });
    },
    bkMouseDown(e) {
      console.log(e);
      if (e.target.attrs.stroke === "lightgray") {
        return;
      }
      var curCheckBox = this.wf.backChecks.find(
        p => p.id === e.target.attrs.id
      );
      if (curCheckBox.fill === "#4876FF") {
        curCheckBox.fill = "lightgray";
        this.setOtherCheckBoxState(curCheckBox.nodeId, true);

        //放开限制
      } else {
        curCheckBox.fill = "#4876FF";
        //限制
        this.setOtherCheckBoxState(curCheckBox.nodeId, false);
      }
    },
    setOtherCheckBoxState(nodeId, state) {
      var curInLines = this.wf.lines.filter(
        p => p.lineDefine.eNodeId === nodeId
      );
      curInLines.forEach(curInLine => {
        this.setPreCheckBoxState(curInLine, state);
      });

      var curOutLines = this.wf.lines.filter(
        p => p.lineDefine.sNodeId === nodeId
      );
      curOutLines.forEach(curOutLine => {
        this.setPosCheckBoxState(curOutLine, state);
      });
    },
    setPreCheckBoxState(line, state) {
      var preCheckBox = this.wf.backChecks.find(
        p => p.nodeId === line.lineDefine.sNodeId
      );
      if (preCheckBox !== null && preCheckBox !== undefined) {
        if (state) {
          preCheckBox.disableCount--;
          if (preCheckBox.disableCount === 0) {
            preCheckBox.stroke = "#87CEFA";
          }
        } else {
          preCheckBox.stroke = "lightgray";
          preCheckBox.disableCount++;
        }

        var curInLines = this.wf.lines.filter(
          p => p.lineDefine.eNodeId === preCheckBox.nodeId
        );
        curInLines.forEach(curInLine => {
          this.setPreCheckBoxState(curInLine, state);
        });
      } else {
        //如果是condition节点
        var curNode = this.wf.nodes.find(
          p =>
            p.nodeDefine.id === line.lineDefine.sNodeId &&
            p.nodeDefine.wfNodeType === "cond"
        );
        if (curNode !== undefined && curNode !== null) {
          var inLines = this.wf.lines.filter(
            p => p.lineDefine.eNodeId === curNode.nodeDefine.id
          );
          inLines.forEach(curInLine => {
            this.setPreCheckBoxState(curInLine, state);
          });
        }
      }
    },
    setPosCheckBoxState(line, state) {
      var preCheckBox = this.wf.backChecks.find(
        p => p.nodeId === line.lineDefine.eNodeId
      );
      if (preCheckBox !== null && preCheckBox !== undefined) {
        if (state) {
          preCheckBox.disableCount--;
          if (preCheckBox.disableCount === 0) {
            preCheckBox.stroke = "#87CEFA";
          }
        } else {
          preCheckBox.stroke = "lightgray";
          preCheckBox.disableCount++;
        }

        var curInLines = this.wf.lines.filter(
          p => p.lineDefine.sNodeId === preCheckBox.nodeId
        );
        curInLines.forEach(curInLine => {
          this.setPosCheckBoxState(curInLine, state);
        });
      } else {
        var curNode = this.wf.nodes.find(
          p =>
            p.nodeDefine.id === line.lineDefine.eNodeId &&
            p.nodeDefine.wfNodeType === "cond"
        );
        if (curNode !== undefined && curNode !== null) {
          var inLines = this.wf.lines.filter(
            p => p.lineDefine.sNodeId === curNode.nodeDefine.id
          );
          inLines.forEach(curInLine => {
            this.setPosCheckBoxState(curInLine, state);
          });
        }
      }
    },
    bkMouseOver(e) {},
    bkMouseLeave(e) {},
    setWFState() {
      var that = this;
      this.wf.nodes.forEach(node => {
        node.nodeDefine.draggable = false;

        var nodeInfo = {
          id: uuid.v4(),
          x: node.nodeDefine.x,
          y: node.nodeDefine.y,
          visible: true,
          opacity: 0.75,
          tag: {
            fill: "green",
            pointerDirection: "down",
            pointerWidth: 0,
            pointerHeight: 0,
            lineJoin: "round",
            shadowColor: "green",
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowOpacity: 0.5
          },
          text: {
            text: node.userName + "：送审",
            fontFamily: "Calibri",
            fontSize: 18,
            padding: 5,
            fill: "white"
          },
          nodeId: node.nodeDefine.id
        };

        if (node.state === 6) {
          node.nodeDefine.fill = "#d3d3d3";
        } else if (node.state === 0 || node.state === 1 || node.state === 7) {
          node.nodeDefine.fill = "green";

          if (node.state === 0) {
            nodeInfo.text.text = "开始";
          }
          if (node.id === this.wfNodeId) {
            nodeInfo.text.text = "你在这里！";
          }

          that.wf.nodeInfos.push(nodeInfo);
        } else if (node.state === 2) {
          node.nodeDefine.fill = "#d39282";
          nodeInfo.text.text = node.userName + ":待处理！";
          if (node.id === this.wfNodeId) {
            node.nodeDefine.fill = "blue";
            nodeInfo.text.text = "你在这里！";
          }
          that.wf.nodeInfos.push(nodeInfo);
        } else if (node.state === 3) {
          node.nodeDefine.fill = "yellow";

          that.wf.nodeInfos.push(nodeInfo);
        } else if (node.state === 4) {
          node.nodeDefine.fill = "#239282";
        } else if (node.state === 5) {
          node.nodeDefine.fill = "red";
        } else if (node.state === 6) {
          node.nodeDefine.fill = "#339282";
        }

        if (node.nodeDefine.wfNodeType === "end") {
          nodeInfo.text.text = "结束";
          node.nodeDefine.fill = "darkblack";
          that.wf.nodeInfos.push(nodeInfo);
        }
      });
      this.initChecks();
    },
    initChecks() {
      var curNode = this.wf.nodes.find(p => p.id === this.wfNodeId);
      this.buildChecks(curNode.nodeDefine.id);
      console.log(this.wf.backChecks);
    },
    buildChecks(nodeId) {
      var that = this;
      //查找当前节点的前已连线
      var preLines = this.wf.lines.filter(
        line => line.lineDefine.eNodeId === nodeId
      );
      if (preLines !== null && preLines !== undefined) {
        preLines.forEach(ele => {
          var nodes = that.wf.nodes.filter(
            node => node.nodeDefine.id === ele.lineDefine.sNodeId
          );

          if (nodes !== null && nodes !== undefined) {
            //新增check点
            nodes.forEach(nd => {
              if (nd.nodeLogs.length > 0) {
                if (nd.nodeDefine.wfNodeType === "audit") {
                  if (
                    !that.wf.backChecks.some(p => p.nodeId === nd.nodeDefine.id)
                  ) {
                    that.wf.backChecks.push({
                      nodeId: nd.nodeDefine.id,

                      x: nd.nodeDefine.x,
                      y: nd.nodeDefine.y,
                      radius: 10,
                      fill: "lightgray",
                      draggable: false,
                      // strokeEnabled: false,
                      stroke: "#87CEFA",
                      strokeWidth: 4,

                      disableCount: 0,

                      id: uuid.v4(),

                      scaleX: 1,
                      scaleY: 1
                    });
                    that.buildChecks(nd.nodeDefine.id);
                  }
                }
              } else if (nd.nodeDefine.wfNodeType === "cond") {
                that.buildChecks(nd.nodeDefine.id);
              }
            });
          }
        });
      }
    },
    nodeMouseDown(e) {},
    nodeMouseOver(e) {},
    nodeMouseLeave(e) {}
  },
  mounted() {}
};
</script>