<template>
  <div>
    <el-table :data="wfs" style="width: 100%">
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.desc }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleWFEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleWFDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <wf-designer :workflow="wf" ref="wfDesigner" />
    <el-button @click="saveWF">保存</el-button>
  </div>
</template>

<script>
import WFDesigner from "../components/WFDesigner.vue";
import https from "../https";
import { uuid } from "vue-uuid";

export default {
  components: {
    "wf-designer": WFDesigner
  },
  data() {
    return {
      wfs: [],
      wf: {
        WFNodes: [],
        lines: [],
        toolTips: [],
        id: "",
        name: "",
        desc: "",
        createUserId: "",
        updateUserId: "",
        createUserName: "",
        updateUserName: "",
        createTime: "",
        updateTime: "",
        version: "",
        nodeInfos: []
      }
    };
  },
  mounted() {
    var that = this;

    https
      .fetchGet("api/WorkFlowTemplate")
      .then(data => {
        console.log(data);
        this.wfs = data.data;
      })
      .catch(err => {
        console.log(err);
      });

    this.wf.WFNodes = [];
    this.wf.lines = [];
    this.wf.toolTips = [];
    this.wf.id = "";
    this.wf.name = "";
    this.wf.desc = "";
    this.wf.createUserId = "";
    this.wf.updateUserId = "";
    this.wf.createUserName = "";
    this.wf.updateUserName = "";
    this.wf.createTime = "";
    this.wf.updateTime = "";
    this.wf.version = "";
    this.wf.nodeInfos = [];
  },
  methods: {
    handleWFEdit(index, row) {
      console.log(row);
      this.wf.WFNodes = row.nodes.map(item => item.nodeDefine);
      this.wf.lines = row.lines.map(item => item.lineDefine);
      this.wf.toolTips = row.toolTips.map(item => JSON.parse(item.tipDef));
      this.wf.id = row.id;
      this.wf.name = row.name;
      this.wf.desc = row.desc;
      this.wf.createUserId = row.createUserId;
      this.wf.updateUserId = row.updateUserId;
      this.wf.createUserName = row.createUserName;
      this.wf.updateUserName = row.updateUserName;
      this.wf.createTime = row.createTime;
      this.wf.updateTime = row.updateTime;
      this.wf.version = row.version;
      this.wf.nodeInfos = row.nodes.map(item => {
        var nodeInfo = {
          id: uuid.v4(),
          x: item.nodeDefine.x,
          y: item.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: item.nodeDefine.config.userName,
            fontFamily: "Calibri",
            fontSize: 18,
            padding: 5,
            fill: "white"
          },
          nodeId: item.nodeDefine.id
        };
        if (
          item.nodeDefine.wfNodeType === "audit" ||
          item.nodeDefine.wfNodeType === "start"
        ) {
          return nodeInfo;
        } else {
          return {};
        }
      });
    },
    handleWFDelete(index, row) {
      console.log(row);
    },
    saveWF(e) {
      console.log(this.$refs.wfDesigner.getWorkflow());
      console.log("aaaa");
      console.log(this.wf);
    }
  }
};
</script>