<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>
</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: -75,
                y: -25,
                width: 150,
                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(
        'circle-running',
        {
          afterDraw(cfg, group) {
            const shape = group.get('children')[0];
            const startPoint = shape.getPoint(0);

            const circle = group.addShape('circle', {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: '#1890ff',
                r: 3,
              },
              name: 'circle-shape',
            });

            circle.animate(
                    (ratio) => {
                      const tmpPoint = shape.getPoint(ratio);
                      return {
                        x: tmpPoint.x,
                        y: tmpPoint.y,
                      };
                    },
                    {
                      repeat: true,
                      duration: 3000,
                    },
            );
          },
        },
        'line',
      );

      const tooltip = new G6.Tooltip({
        offsetX: 10 + 10,
        offsetY: 10 + 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:1000,
        height:1000,
        layout: {
          type: 'dagre',
          nodesepFunc: (d) => {
            if (d.id === '3') {
              return 500;
            }
            return 50;
          },
          ranksep: 70,
          controlPoints: true,
        },
        defaultNode: {
          type: 'sql',
        },
        defaultEdge: {
          type: 'polyline',
          style: {
            radius: 20,
            offset: 45,
            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',
          ],
        },

        // modes: {
        //   default: [
        //     'drag-canvas',
        //     'zoom-canvas',
        //     'click-select',
        //     {
        //       type: 'tooltip',
        //       formatText(model) {
        //         const cfg = model.conf;
        //         const text = [];
        //         cfg.forEach((row) => {
        //           text.push(row.label + ':' + row.value + '<br>');
        //         });
        //         return text.join('\n');
        //       },
        //       offset: -30,
        //     },
        //   ],
        // },
        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": "c0818d9e4286b35b8ee9b96d90b522aa",
        "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%;
    }

    #mountNode{
       width: 100%;
    }

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

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