<template>

  <div id="container"/>
</template>

<script>
import {renderMap} from "@/views/create";
import G6 from "@antv/g6";
//注册监听事件,线条,已经节点
import Behavior from './behavior'
import Edge from './edge'
import Node from './node'
Behavior.register(G6)
Edge.register(G6)
Node.register(G6)
// import initGraph from "@/views/graph";
export default {
  name: "Index",
  data(){
    return{
      graphConfig:{
        container: 'container',
        defaultNode: {
          size: [300, 400],
          type: 'dice-er-box',
          color: '#5B8FF9',
          style: {
            fill: '#9EC9FF',
            lineWidth: 3,
          },
          labelCfg: {
            style: {
              fill: 'black',
              fontSize: 20,
            },
          },
        },
        //设置edge默认属性
        defaultEdge: {
          type: 'dice-er-edge',
          style: {
            stroke: '#e2e2e2',
            lineWidth: 4,
            endArrow: true,
          },
        },
        modes: {
          default: ['dice-er-scroll', 'drag-node', 'drag-canvas'],
        },
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          align: 'UL',
          controlPoints: true,
          nodesepFunc: () => 0.2,
          ranksepFunc: () => 0.5,
        },
        animate: true,
      },
      graphData: {
        nodes: [
          {
            id: "info",
            label: "Employee",
            attrs: [
              {
                key: "id",
                type: "number(6)"
              },
              {
                key: "key",
                type: "varchar(255)"
              },
              {
                key: "gender",
                type: "enum(M, F)"
              },
              {
                key: "birthday",
                type: "date"
              },
              {
                key: "hometown",
                type: "varchar(255)"
              },
              {
                key: "country",
                type: "varchar(255)"
              },
              {
                key: "nation",
                type: "varchar(255)"
              },
              {
                key: "jobId",
                type: "number(3)",
                relation: [
                  {
                    key: "id",
                    nodeId: "job"
                  }
                ]
              },
              {
                key: "phone",
                type: "varchar(255)"
              },
              {
                key: "deptId",
                type: "number(6)",
                relation: [
                  {
                    key: "id",
                    nodeId: "dept"
                  }
                ]
              },
              {
                key: "startTime",
                type: "date"
              },
              {
                key: "leaveTime",
                type: "date"
              }
            ]
          },
          {
            id: "job",
            label: "Job",
            attrs: [
              {
                key: "id",
                type: "number(3)"
              },
              {
                key: "title",
                type: "varchar(255)"
              },
              {
                key: "level",
                type: "number(3)"
              }
            ]
          },
          {
            id: "dept",
            label: "Department",
            attrs: [
              {
                key: "id",
                type: "number(6)"
              },
              {
                key: "title",
                type: "varchar(255)"
              },
              {
                key: "desc",
                type: "text"
              },
              {
                key: "parent",
                type: "number(6)",
                relation: [
                  {
                    key: "id",
                    nodeId: "dept"
                  }
                ]
              },
              {
                key: "manager",
                type: "number(6)"
              }
            ]
          }
        ],
        edges: [
          {
            source: "info",
            target: "job",
            sourceKey: "jobId",
            targetKey: "id"
          },
          {
            source: "info",
            target: "dept",
            sourceKey: "deptId",
            targetKey: "id"
          },
          {
            source: "dept",
            target: "dept",
            sourceKey: "parent",
            targetKey: "id"
          }
        ]
      }
    }
  },
  mounted() {
    this.initTopo()
  },
  methods:{
    initTopo(){
      const container = document.getElementById('container');

      const width = container.scrollWidth;
      const height = (container.scrollHeight || 800) - 20;
      const graph = new G6.Graph({
        ...this.graphConfig,
        width,
        height,
      })
      renderMap(graph,this.graphData)
    }
  }

}
</script>

<style scoped>

</style>
