<template>
  <div class="node-box">
    <transition name="el-zoom-in-center">
      <div v-show="infoVisible" class="graph-info-box">
        <div class="form-title"></div>
        <el-form ref="relationForm" label-width="80px">
          <el-form-item label="*关系名称">
            <el-input v-model="relationCmd.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </transition>
    <i :class="infoVisible ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
       @click="infoVisible = !infoVisible"></i>
    <!-- 为图谱准备一个具备大小（宽高）的Dom -->
    <div class="tree-container">
      <div class="icon icon-add" @click="showAddNodeDialog">
        <i title="新增节点"></i>
      </div>
      <div class="icon icon-remove">
        <i title="删除"></i>
      </div>
      <div class="icon icon-save">
        <i title="保存"></i>
      </div>
      <div id="mountNode" style="width: 100%; height: 1000px"></div>
    </div>
    <el-dialog
        title="新增节点"
        :visible.sync="addNodeDialogVisible"
        width="40%">
      <el-form ref="addNodeForm" label-width="80px">
        <el-form-item label="节点名称">
          <el-input v-model="addNodeCmd.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addNodeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddNode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request';
import { Graph } from '@antv/x6';

var vm;
var graph;
export default {
  data() {
    return {
      nodeNum: 0,
      linkNum: 0,
      infoVisible: false,
      clickNode: {id: '', name: ''},
      addNodeDialogVisible: false,
      addNodeCmd: {
        name: ''
      },
      relationCmd: {
        name: '',
        table: '',
        sourceId: '',
        targetId: '',
        edgeId: ''
      },
      nodeAttributes: [] // 节点属性
    }
  },
  created() {
    vm = this;
  },
  mounted() {
    const data = {
      // 节点
      nodes: [
        {
          id: 'node1', // String，可选，节点的唯一标识
          x: 40,       // Number，必选，节点位置的 x 值
          y: 40,       // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'hello', // String，节点标签
        },
        {
          id: 'node2', // String，节点的唯一标识
          x: 160,      // Number，必选，节点位置的 x 值
          y: 180,      // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'world', // String，节点标签
        },
      ],
      // 边
      edges: [
        {
          source: 'node1', // String，必须，起始节点 id
          target: 'node2', // String，必须，目标节点 id
        },
      ],
    };
    vm.initGraph(data);
  },
  methods: {
    initGraph: function (_data) {
      this.destroyGraph();
      let _width = document.getElementById("mountNode").clientWidth;
      let _height = document.getElementById("mountNode").clientHeight;
      graph = new Graph({
        container: document.getElementById('mountNode'),
        width: _width,
        height: _height,
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: false,
          pageBreak: false,
        },
        // mousewheel: {
        //   enabled: true,
        //   modifiers: ['ctrl', 'meta'],
        // },
        modes: {
          // Defualt mode
          default: ['drag-node',
            {
              type: 'drag-canvas',
              enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
            },
            {
              type: 'zoom-canvas',
              enableOptimize: true, // enable the optimize to hide the shapes beside nodes' keyShape
            },
            {
              type: 'create-edge',
              key: 'shift', // undefined by default, options: 'shift', 'control', 'ctrl', 'meta', 'alt'
            },
          ]
        },
      });
      graph.fromJSON(_data);

    },
    destroyGraph() {
      try {
        if(graph != undefined && graph != null) {
          graph.clear();
          graph = null;
          document.getElementById("mountNode").innerHTML = "";
        }
      } catch (err) {
        console.log(err);
      }
    },
    clearStates() { // 清空选中状态
      graph.getNodes().forEach((node) => {
        graph.clearItemStates(node);
      });
      graph.getEdges().forEach((edge) => {
        graph.clearItemStates(edge);
      });
    },
    showAddNodeDialog() {
      vm.addNodeCmd = {
        name: ''
      };
      vm.addNodeDialogVisible = true;
    },
    submitAddNode() {
      graph.addNode({
        id: Math.ceil(Math.random()*10000).toString(),
        label: vm.addNodeCmd.name
      });
      vm.$message.success("新增节点成功");
      vm.addNodeDialogVisible = false;
    },
  }
}

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

<style>
.graph-info-box {
  position: absolute;
  left: 290px;
  width: 500px;
  top: 60px;
  bottom: 0;
  background-color: #fff;
  padding: 15px 15px;
  z-index: 999;
  border-right: 1px solid rgba(52, 100, 224, 0.15);
  box-shadow: 0px 2px 21px 0px rgba(52, 100, 224, 0.15);
}

.el-icon-d-arrow-left, .el-icon-d-arrow-right {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 1000;
}

.el-icon-d-arrow-left {
  left: 780px;
}

.el-icon-d-arrow-right {
  left: 300px;
}

.info-line-item {
  margin-bottom: 35px;
}

.info-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.info-content > div {
  margin-bottom: 5px;
  line-height: 20px;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu {
  /*这个样式不写，右键弹框会一直显示在画布的左下角*/
  position: absolute;
  background: white;
  border-radius: 5px;
  border: 1px solid #f2f4f7;
  left: -99999px;
  top: -999999px;
}

.menu div {
  list-style: none;
  padding: 5px 10px;
  color: black;
  border-bottom: 1px dashed #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.menu div:hover {
  color: #659bc5;
  background: #f3f6fa;
}

.menu div:last-child {
  border-bottom: none;
}

ul#menuBox li {
  cursor: pointer;
  margin: 5px 0;
}

ul#menuBox li:hover {
  color: #1c63e0;
}

.tree-container {
  position: relative;
}

div.icon {
  display: inline-block;
  cursor: pointer;
  padding: 15px;
  background-color: #fff;
  border-radius: 40px;

  position: absolute;
  top: 25px;
  z-index: 9999;
}

div.icon i {
  width: 25px;
  height: 25px;
  margin: auto;
  display: inline-block;

}

div.icon-add {
  right: 75px;
}

div.icon-add i {
  background: url("../../assets/image/icon/bg-add.png") no-repeat center/contain;
}

div.icon-remove {
  right: 145px;
}

div.icon-remove i {
  background: url("../../assets/image/icon/changyonggoupiaorenshanchu.png") no-repeat center/contain;
}

div.icon-save {
  right: 215px;
}

div.icon-save i {
  background: url("../../assets/image/icon/baocun.png") no-repeat center/contain;
}


</style>
