<template>
  <div>
    <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-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 {
      wfNodeId: "",
      bill: {},
      wf: {
        stageSize: {
          width: width,
          height: height,
          draggable: true
        },
        curSelectedNode: null,
        lines: [],
        nodes: [],
        nodeInfos: [],
        MousePoint: {
          x: 0,
          y: 0
        }
      }
    };
  },
  methods: {
    initWF(wfId, nodeId, bill) {
      this.wfNodeId = nodeId;
      this.bill = bill;
      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);
        });
    },
    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 = "你在这里！";
          }

          if (
            node.state === 7 &&
            node.nodeDefine.wfNodeType === "audit" &&
            node.nodeLogs.length === 0
          ) {
            node.nodeDefine.fill = "gray";
          }

          if (
            (node.nodeLogs.length === 0 && node.state === 7) ||
            node.nodeDefine.wfNodeType === "start"
          ) {
            return;
          }
          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 = "#008B8B";

          that.wf.nodeInfos.push(nodeInfo);
        } else if (node.state === 4) {
          node.nodeDefine.fill = "#CDCD00";
        } else if (node.state === 5) {
          node.nodeDefine.fill = "red";
          nodeInfo.text.text = node.userName + ":待处理！";
          if (node.id === this.wfNodeId) {
            nodeInfo.text.text = "你在这里！";
          }
          that.wf.nodeInfos.push(nodeInfo);
        } 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);
        }
      });
    },
    nodeMouseDown(e) {},
    nodeMouseOver(e) {},
    nodeMouseLeave(e) {}
  },
  mounted() {}
};
</script>