<template>
  <div class="page-body" style="width: calc(100% - 10px);height:calc(100vh - 50px);">
    <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick"
      :on-line-click="onLineClick" />
  </div>
</template>

<script>
  import {
    getOrganizationChart,
  } from '../../api/system/dept'
  import RelationGraph from 'relation-graph'
  export default {
    name: 'Demo',
    components: {
      RelationGraph
    },
    data() {
      return {
        graphOptions: {
          'backgrounImageNoRepeat': true,
          'layouts': [{
            'label': '中心',
            'layoutName': 'tree',
            'layoutClassName': 'seeks-layout-center',
            'defaultJunctionPoint': 'border',
            'defaultNodeShape': 0,
            'defaultLineShape': 1,
            'min_per_width': 0,
            'max_per_width': 60,
            'min_per_height': 200,
            'centerOffset_x': -180,
            'centerOffset_y': -180,
          }],
          'defaultLineMarker': {
            'markerWidth': 12,
            'markerHeight': 12,
            'refX': 6,
            'refY': 6,
            'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
          },
          'defaultNodeShape': 1,
          'defaultNodeWidth': '30',
          'defaultLineShape': 2,
          'defaultJunctionPoint': 'tb',
          'defaultNodeBorderWidth': 0,
          'defaultLineColor': 'rgba(0, 186, 189, 1)',
          'defaultNodeColor': 'rgba(0, 206, 209, 1)',
          'defaultNodeHeight': '100'
        }
      }
    },
    mounted() {
      this.queryDeptTree();
    },
    methods: {
      //获取部门结构树
      queryDeptTree() {
        getOrganizationChart({}).then(res => {
          if (res.Code == 1) {
            this.DeptList = res.Data;
            if (this.DeptList && this.DeptList.nodes && this.DeptList.nodes.length > 0) {
              this.DeptList.nodes.forEach(item => {
                //判断是否是根节点
                if (item.id == this.DeptList.rootId) {
                  item.width = 120;
                  item.height = 200;
                }
              });
            }
            this.$refs.seeksRelationGraph.setJsonData(this.DeptList, (seeksRGGraph) => {})
          }
        })
      },
      onNodeClick(nodeObject, $event) {

      },
      onLineClick(lineObject, $event) {

      }
    }
  }

</script>
