<template>
  <div class="workflows-view">
    <super-flow
      ref="superFlow"
      :node-list="nodeList"
      :link-list="linkList"
      :origin="[681, 465]"
      line-color="#c4d8f8"
      on-line-color="#94a8c8"
      :draggable="false"
      :linkAddable="false"
    >
      <template v-slot:node="{ meta }">
        <div
          v-if="meta.type === 1 || meta.type === 2"
          :class="`flow-node flow-node-${meta.type}`"
        >
          <span v-text="meta.name"></span>
        </div>
        <el-tooltip v-else effect="dark" placement="right-start">
          <div class="node-detail" slot="content">
            <p>当前实例数：{{ meta.running_nodes || 0 }}</p>
            <p>当前超时比率：{{ (meta.cur_timeout_rate || 0) / 100 }}%</p>
            <p>总超时比率：{{ (meta.total_timeout_rate || 0) / 100 }}%</p>
            <p>节点平均耗时：{{ meta.avg_elapsed_time || 0 }}分钟</p>
            <p>节点最大耗时：{{ meta.max_elapsed_time || 0 }}分钟</p>
            <p>节点插件：</p>
            <div class="plug-in-list">
              <span v-for="(plugin, index) in meta.plugins" :key="index">
                {{
                  ["-", "接口插件", "流程插件", "超时插件"][
                    plugin.plugin_type || 0
                  ]
                }}
              </span>
            </div>
          </div>
          <div :class="`flow-node`">
            <span v-text="meta.name"></span>
            <span class="example-count" v-text="meta.running_nodes || 0"></span>
          </div>
        </el-tooltip>
      </template>
    </super-flow>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      nodeList: [],
      linkList: [],
    };
  },
  methods: {
    init() {
      Promise.all([
        this.$http.get("/apaas/serviceapp/v3/workflows/detail", {
          params: {
            id: this.id,
          },
        }),
        this.$http.get(
          "/apaas/serviceapp/v3/workflows/detail/nodeInstanceStat",
          {
            params: {
              id: this.id,
            },
          }
        ),
      ])
        .then((response) => {
          let data = response[0].data.data;
          let nodeList = data.nodeList;
          let linkList = data.linkList;
          let nodes = response[1].data.data;

          nodes.forEach((node) => {
            let targetNode = nodeList.find((v) => v.node_id === node.id);

            if (targetNode) {
              targetNode.meta = {
                ...targetNode.meta,
                ...node,
              };
            }
          });

          this.nodeList = nodeList;
          this.linkList = linkList;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>
.workflows-view .super-flow__node {
  background-color: transparent;
  border: none;
  box-shadow: unset;
}
</style>

<style scoped>
.workflows-view {
  width: 100%;
  height: 830px;
  background-color: #fbfcfe;
  border-radius: 10px;
  margin-top: 10px;
}
.flow-node {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 3px #b4c6f5;
  background-color: #fff;
  border-radius: 8px;
  padding: 5px;
  font-size: 16px;
  color: #0f2683;
}
.flow-node-1 {
  border-color: #109e93;
  background-color: #25bdb1;
  color: #fff;
}
.flow-node-2 {
  border-color: #e86262;
  background-color: #f78181;
  color: #fff;
}
.example-count {
  position: absolute;
  right: -14px;
  bottom: -14px;
  height: 28px;
  padding: 0 14px;
  border-radius: 14px;
  background-color: #f5ab4c;
  line-height: 28px;
  color: #fff;
}
.node-detail {
  font-size: 12px;
  line-height: 20px;
}
.plug-in-list {
  margin-top: 5px;
  width: 150px;
}
.plug-in-list > span {
  display: inline-block;
  vertical-align: middle;
  min-width: calc(50% - 15px);
  padding: 0 9px;
  border: 1px solid #617ef0;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: #274fee;
  margin: 0 10px 10px 0;
  line-height: 18px;
  text-align: center;
}
</style>
