<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
import request from '@/utils/request';
import {config} from '@/components/graph/config';
import G6 from '@antv/g6';

var graphObj = {};

/**
 * 格式约定
 * node{
 *   id,
 *   name,
 *   label,
 * }
 * edge{
 *   source,
 *   target,
 *   name,
 *   label,
 * }
 */
export default {
  data() {
    return {
      id: "graph" + Math.round(Math.random() * 10000000).toString(),// 随机ID的目的是为了一个页面同时存在多个画布
      graph: null,
      graphData: null
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initGraph: function (cmd, flag, clickFun, ifNotDestroy) {
      let graph = graphObj[this.id];
      this.$nextTick(() => {
        if (!ifNotDestroy) {
          this.destroyGraph();
        }

        let _width = document.getElementById(this.id).clientWidth;
        let _height = document.getElementById(this.id).clientHeight;
        // 创建 G6 图实例
        if (graph == undefined || graph == null) {
          graph = new G6.Graph(config({width: _width, height: _height, id: this.id}));
          
          graph.on('node:click', (e) => {
            let node = e.item._cfg.model;
            if (clickFun) {
              clickFun(node);
            }
          });

          graphObj[this.id] = graph;

        }
        if (flag) {
          this.importData(cmd);
        } else {
          this.queryData(cmd);
        }
      });
    },
    importData({nodes, edges}) { // 查询图空间内节点关系
      let graph = graphObj[this.id];
      this.graphData = {
        nodes: nodes,
        edges: edges
      };
      // 读取数据
      graph.data(this.graphData);
      // 渲染图
      graph.render();
    },
    queryData({path, qo}) { // 查询图空间内节点关系
      let graph = graphObj[this.id];
      request({
        url: path,
        method: 'post',
        data: qo
      }).then(res => {
        // 处理节点的属性，要适应组件的要求
        res.data.nodes.forEach(node => {
          node.id = node.vid;
          node.label = node.properties.labelName;
          node.name = node.properties.name;
        });
        res.data.relations.forEach(edge => {
          edge.source = edge.srcId;
          edge.target = edge.dstId;
          edge.name = edge.properties.name;
          edge.label = edge.properties.labelName;
          if (edge.srcId == edge.dstId) {
            edge.type = 'loop';
          }
        });
        this.graphData = {
          nodes: res.data.nodes,
          edges: res.data.relations
        };
        // 读取数据
        graph.data(this.graphData);
        // 渲染图
        graph.render();
      });
    },
    destroyGraph() {
      let graph = graphObj[this.id];
      try {
        if (graph != undefined && graph != null) {
          graph.clear();
          graph = null;
          document.getElementById(this.id).innerHTML = "";
        }
      } catch (err) {
        console.log(err);
      }
    },
  }
}

function refreshDragedNodePosition(e) {
  const model = e.item.get('model');
  model.fx = e.x;
  model.fy = e.y;
}
</script>

<style>
.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174 174 174) 0px 0px 10px;
}

</style>
