<template>
  <div class="lshs-content">
<!--      <div class="slot">-->
<!--          <div><span class="tip-title">范围属性变更：</span></div>-->
<!--          <div><span class="tip-title">宗地分割：</span></div>-->
<!--          <div><span class="tip-title">宗地合并：</span></div>-->
<!--      </div>-->
    <div id="mountNode" ref="containerWidth"></div>
    <div id="mountNodeRight"></div>
  </div>
</template>

<script>

  import G6 from '@antv/g6';
  import insertCss from 'insert-css';
  import { getLshs } from "./../../../../src/api/fwsxbg";

export default {
  name:"",
  components:{},
  props:{},
  data(){
    insertCss(`
    .g6-tooltip {
      border-radius: 6px;
      font-size: 12px;
      color: #fff;
      background-color: #000;
      padding: 2px 8px;
      text-align: center;
    }
  `);
    return {
      data : {}
    }
  },
  created(){

  },
  mounted(){
    this.getLshsData();
  },
  methods: {
    initG6() {
      const data = this.data;
      const eWidth = this.$refs.containerWidth.clientWidth
      console.log(eWidth+":width")
      G6.registerNode(
        'sql',
        {
          drawShape(cfg, group) {
            const rect = group.addShape('rect', {
              attrs: {
                x: -100,
                y: -25,
                width: 200,
                height: 50,
                radius: 10,
                stroke: '#5B8FF9',
                fill: '#C6E5FF',
                lineWidth: 1,
              },
              name: 'rect-shape',
            });
            if (cfg.name) {
              group.addShape('text', {
                attrs: {
                  text: cfg.name,
                  x: 0,
                  y: 0,
                  fill: '#00287E',
                  fontSize: 14,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  fontWeight: 'bold',
                },
                name: 'text-shape',
              });
            }
            return rect;
          },
        },
        'single-node',
      );
      G6.registerEdge(
        'polyline1',
        {
            afterDraw(cfg, group) {
                console.log(cfg.data+":cfg")
                console.log(group.toString()+"group")
            },
        },
        'polyline',
      );

      const tooltip = new G6.Tooltip({
        offsetX: 10,
        offsetY: 10,
        itemTypes: ['node', 'edge'],
        getContent: (e) => {
          const outDiv = document.createElement('div');
          outDiv.style.width = 'fit-content';
          outDiv.innerHTML = `
            <ul>
              <li> ${e.item.getModel().conf[0].label}:${e.item.getModel().conf[0].value}</li>
              <li> ${e.item.getModel().conf[1].label}:${e.item.getModel().conf[1].value}</li>
              <li> ${e.item.getModel().conf[2].label}:${e.item.getModel().conf[2].value}</li>
              <li> ${e.item.getModel().conf[3].label}:${e.item.getModel().conf[3].value}</li>
              <li> ${e.item.getModel().conf[4].label}:${e.item.getModel().conf[4].value}</li>
            </ul>`
          ;
          return outDiv;
        },
      });

      const container = document.getElementById('mountNode');
      console.log(container)
      const graph = new G6.Graph({
        container: 'mountNode',
        width:eWidth,
        height:1000,
        layout: {
          type: 'dagre',
          nodesepFunc: (d) => {
            return 100;
          },
          ranksep: 30,
          controlPoints: true,
        },
        defaultNode: {
          type: 'sql',
        },
        defaultEdge: {
          type: 'polyline1',
          style: {
            radius: 10,
            offset: 10,
            // endArrow: true,
            lineWidth: 2,
            stroke: 'rgba(78,142,230,0.45)',
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: '#d9d9d9',
            fill: '#5394ef',
          },
        },

        plugins: [tooltip],
        modes: {
          default: [
                  'drag-node',
                'drag-canvas',
                'zoom-canvas',
                'click-select',
          ],
        },

        fitView: true,
      });

      graph.data(data);
      graph.render();

      graph.on('node:mouseenter', e => {
        graph.setItemState(e.item, 'active', true)
      });
      graph.on('node:mouseleave', e => {
        graph.setItemState(e.item, 'active', false)
      });
      graph.on('edge:mouseenter', e => {
        graph.setItemState(e.item, 'active', true)
      });
      graph.on('edge:mouseleave', e => {
        graph.setItemState(e.item, 'active', false)
      });

      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

    },

    getLshsData(){
      let _this = this;
      const data = {
        "bsm": "d85a274a332ad2d35c922a3a95eb154f",
        "type": "zd"
      };
      getLshs(data).then((res)=>{
        if(res.code===200){
          _this.data=res.result;
          this.initG6();
        }
      })
    }
  },
  computed: {},
  watch: {},
}
</script>
<style scoped  lang="less">

    .lshs-content{
        width: 100%;
        height: 100%;
    }

    #mountNode{
        /*height: calc(100% - 68px);*/
        margin-top: -60px;
        width: 60%;
        float: left;
    }

    #mountNodeRight{
        width: 38%;
        float: right;
        height: 1000px;
        border: 0 solid #5ebbff;
    }

    .slot{
        margin-left: 50px;
        margin-top: 20px;
        width: 300px;
    }

    .tip-title{
        font-weight: 700;
    }
</style>