<template>
  <div class="">历史回溯
    <div id="mountNode"></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;
      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',
      );

      const container = document.getElementById('mountNode');

      const graph = new G6.Graph({
        container: 'mountNode',
        width:1000,
        height:800,
        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: '#C2C8D5',
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: '#d9d9d9',
            fill: '#5394ef',
          },
        },

        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();

      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">

</style>