<template>
  <div style="padding:0 20px;margin-top: -15px;padding-bottom:20px;background-color: #EFF2F9;">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="安全生产标准化" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
        </slot>
      </lx-header>
    </div>
    <div class="menuwrap">
      <div :id="'graphRef'" v-loading="g_loading">
        <RelationGraph ref="graphRef0" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
      <div :id="'graphRef'" v-loading="g_loading">
        <RelationGraph ref="graphRef1" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
      <div :id="'graphRef'" v-loading="g_loading">
        <RelationGraph ref="graphRef2" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
      <div :id="'graphRef'" v-loading="g_loading">
        <RelationGraph ref="graphRef3" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
      <div :id="'graphRef5'" v-loading="g_loading">
        <RelationGraph ref="graphRef4" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
      <div :id="'graphRef'" v-loading="g_loading">
        <RelationGraph ref="graphRef5" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
      <div :id="'graphRef'" v-loading="g_loading">
        <RelationGraph ref="graphRef6" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
      <div :id="'graphRef7'" v-loading="g_loading">
        <RelationGraph ref="graphRef7" :options="graphOptions" :on-node-click="onNodeClick">
        </RelationGraph>
      </div>
    <!--  <div :id="'graphRef'" v-loading="g_loading">

      </div> -->
    </div>


  </div>

</template>

<script>
  import {
    getAuthMenu
  } from '@/api/user.js'
  // 如果您没有在main.js文件中使用Vue.use(RelationGraph); 就需要使用下面这一行代码来引入relation-graph
  import RelationGraph from 'relation-graph';
  import mixins from '@/views/task/list/mixins/mixins.js'
  export default {
    name: 'RelationGraphDemo',
    mixins:[mixins],
    components: {},
    data() {
      return {
        permission_routes: [],
        g_loading: false,
        graphOptions: {
          debug: false,
          'layout': {
            'label': '树',
            'layoutName': 'tree',
            'layoutClassName': 'seeks-layout-center',
            // 'from': 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            'defaultNodeShape': 0,
            'defaultLineShape': 1,
            'min_per_width': 200,
            'max_per_width': 200,
            'min_per_height': 255
            // 'min_per_width': undefined,
            // 'max_per_width': 600,
            // 'min_per_height': 80,
            // 'max_per_height': undefined,
            // 'levelDistance': '' // 如果此选项有值，则优先级高于上面那4个选项
          },
          'defaultExpandHolderPosition': 'right',
          'defaultNodeShape': 1,
          'defaultNodeWidth': 180,
          'defaultNodeHeight': 85,
          'defaultLineShape': 4,
          'defaultNodeBorderWidth': 0,
          'defaultLineColor': '#0077cc',
          'defaultNodeColor': '#0077cc',
          'disableDragNode':true,
          "disableZoom":true,
          "allowShowMiniToolBar":false,
          "disableNodeClickEffect":true,
          // #0077cc
        }
      };
    },
    created() {},
    mounted() {
      this.getPer()
    },
    methods: {
      async getPer() {
        let that = this
        await getAuthMenu().then(res => {
          for (var k of res) {
            let nodes = []
            let lines = []
            let __graph_json_data = {}
            if (k.visible === 0) {
              __graph_json_data.rootId = k.id + ''
              nodes.push({
                id: k.id + '',
                text: k.name + '',
                styleClass:'first',
                color:'#fff',
                fontColor:'#333',
                borderColor:'#0077cc',
                borderWidth:1,
                width:255,
                height:60
                // width:200
              })
              if (k.children.length > 0) {
                for (var c of k.children) {

                  if(c.children.length > 0){
                    nodes.push({
                      id: c.id + '',
                      text: c.name + '',
                      data:c,
                      styleClass:'second',
                      color:'#fff',
                      fontColor:'#333',
                      borderColor:'#0077cc',
                      borderWidth:1,
                      offset_y:-80
                    })
                    lines.push({
                      from: k.id + '',
                      to: c.id + ''
                    })
                    for (var m of c.children) {

                      nodes.push({
                        id: m.id + '',
                        text: m.name + '',
                        data:m,
                        styleClass:'third',
                        offset_y:-175
                      })
                      lines.push({
                        from: c.id + '',
                        to: m.id + ''
                      })
                    }
                  }else{
                    nodes.push({
                      id: c.id + '',
                      text: c.name + '',
                      data:c,
                      styleClass:'second',
                      offset_y:80
                    })
                    lines.push({
                      from: k.id + '',
                      to: c.id + ''
                    })
                  }
                }
              }
              __graph_json_data.nodes = nodes
              __graph_json_data.lines = lines
              that.permission_routes.push({
                rootId: __graph_json_data.rootId,
                nodes: __graph_json_data.nodes,
                lines: __graph_json_data.lines
              })
            }


          }
          this.permission_routes.map((item, index) => {
            // this.g_loading = false
            // if(index==7){
            //   return
            // }
            this.$refs["graphRef" + index].setJsonData({
              'rootId': item.rootId,
              'nodes': item.nodes,
              'lines': item.lines
            }, (graphInstance) => {
              // 这些写上当图谱初始化完成后需要执行的代码
            });
          })

        })

      },
       onNodeClick(nodeObject, $event) {
         if(JSON.stringify(nodeObject.data) == "{}"){
           return
         }
         let data = nodeObject.data
         // let url = '/admin/#'
         let url = ''
         if(data.path=="##"){
           return
         }else{
           url+=data.path
         }
         this.$router.push({ path: url })
        console.log("url",url)
         console.log('onNodeClick:', nodeObject)
       },
      // onNodeExpand(node, e,type) {
      //   // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
      //   console.log('onNodeExpand:', node,e,type);
      //   // this.$refs[type].refresh();
      // },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .menuwrap{
    display: flex;
    flex-wrap:wrap;
    background: #fff;
    border: 3px solid #dcf3ff;
    border-left:none;
    border-bottom:none;
    /* padding-bottom:20px */
  }
  .menuwrap>div{
    flex-basis: 50%;
    height:400px;
    border-bottom: 3px solid #dcf3ff;
    border-left: 3px solid #dcf3ff;
  }
/*   #graphRef7{
     flex-basis: 50%;
   } */
  /deep/ .relation-graph .rel-node-peel{
    cursor: pointer;
  }
  /deep/ .relation-graph .rel-node-shape-1 .c-node-text{
    font-size: 28px!important;
  }
  /deep/ .relation-graph .c-expand-positon-right span{
    background-color: #0077cc!important;
  }
  /deep/ #graphRef7 .first .c-node-text,
  /deep/ #graphRef7 .second .c-node-text,
  /deep/ #graphRef7 .third .c-node-text{
    font-size: 34px!important;
  }
  /deep/ #graphRef5 .rel-node-shape-1{
        width: 170px!important;
        height: 60px!important;
  }
  /deep/  #graphRef5 .rel-node-shape-1 .c-node-text{
    font-size: 22px!important;
  }
/*  /deep/ #graphRef7 .first,
  /deep/ #graphRef7 .second,
    {
      width:255px!important;
  }
  /deep/ #graphRef .third{
    width:160px!important
  } */
 /* .c-my-panel {
    width: 600px;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 10px;
    z-index: 800;
    background-color: #efefef;
    border: #eeeeee solid 1px;
    padding: 10px;

    .c-option-name {
      color: #666666;
      font-size: 14px;
      line-height: 30px;
    }

    .c-simple-configs {
      padding-left: 70px;
      padding-right: 70px;

      &>div {
        line-height: 30px;
        color: #5b05f1;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 5px;
        text-align: center;

        &:hover {
          background-color: #5b05f1;
          color: #ffffff;
        }
      }
    }
  } */
</style>
