<template>
  <div class="demo-topology">
    <topology
      ref="topology"
      :graph-data="graphData"
      :node-app-config="nodeAppConfig"
      :edge-app-config="edgeAppConfig"
      @doAutoRefresh="doAutoRefresh"
      @doManualRefresh="doManualRefresh"
      @doChangeMode="doChangeMode"
      @doSaveData="doSaveData"
    >
    </topology>
  </div>
</template>

<script>
/* 局部注册 */
import Topology from './packages/topology/src/topology'
import { deepClone } from './utils/index'

export default {
  name: 'DemoTopology',
  components: {
    'topology': Topology
  },
  data() {
    return {
      graphData: {"nodes":[{"id":"305bfbdd-31cc-4028-b2b1-2f504968356d","x":304.8223042174235,"y":131.0267312661499,"label":"客户端","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":0},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":0},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"depth":0},{"id":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","x":-94.51187075489108,"y":127.35469287559994,"label":"防火墙","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":0},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":0},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"startIndex":0,"startX":0,"depth":0}],"edges":[{"id":"8bc0249e-ee5d-4dd7-84e0-e4e32c217f2a","source":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","sourceAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"sourceAnchor":1,"target":"305bfbdd-31cc-4028-b2b1-2f504968356d","type":"top-cubic","style":{"active":{"stroke":"rgb(95, 149, 255)","lineWidth":1},"selected":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"shadowColor":"rgb(95, 149, 255)","shadowBlur":10,"text-shape":{"fontWeight":500}},"highlight":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"text-shape":{"fontWeight":500}},"inactive":{"stroke":"rgb(234, 234, 234)","lineWidth":1},"disable":{"stroke":"rgb(245, 245, 245)","lineWidth":1},"edgeStyle":{"default":{"stroke":"#e2e2e2","lineWidth":3,"lineAppendWidth":10},"selected":{"shadowColor":"#626262","shadowBlur":3}},"stroke":"#A3B1BF","lineWidth":2,"strokeOpacity":0.92,"lineAppendWidth":10},"labelCfg":{"position":"center","autoRotate":false},"startPoint":{"x":155.98812924510892,"y":285.35469287559994,"anchorIndex":1},"endPoint":{"x":304.3223042174235,"y":289.0267312661499,"anchorIndex":3},"curveOffset":[-20,20],"curvePosition":[0.5,0.5],"targetAnchor":3,"targetAttrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"depth":0}],"combos":[]},
      nodeTypeList: [
        // { guid: "blue", label: "蓝色", imgSrc: require("../../assets/images/blue.svg") },
        // { guid: "green", label: "绿色", imgSrc: require("@/assets/images/green.svg") },
        // { guid: "purple", label: "紫色", imgSrc: require("@/assets/images/purple.svg") }
      ],
      // 节点配置
      nodeAppConfig: {
        // ip: '节点IP',
        // port: '节点端口',
        // sysName: '设备名称'
      },
      edgeAppConfig: {
        associated: '查询方式',
        tableComment: '主表字段',
        relComment: '关联字段'
      },
      autoRefreshTimer: null
    }
  },
  mounted() {
    let graphData = deepClone(this.graphData)
    this.$refs.topology.initTopo(graphData)
    this.randomChange()
  },
  methods: {
    doAutoRefresh(interval) {
      if (interval === -1) {
        clearInterval(this.autoRefreshTimer)
      } else {
        clearInterval(this.autoRefreshTimer)
        this.autoRefreshTimer = setInterval(() => {
          this.randomChange()
        }, interval)
        this.$once('hook:beforeDestroy', () => {
          clearInterval(this.autoRefreshTimer)
        })
      }
    },
    doChangeMode(graphMode) {
      clearInterval(this.autoRefreshTimer)
      let graphData = deepClone(this.graphData)
      this.$refs.topology.changeGraphMode(graphData, graphMode)
    },
    doManualRefresh() {
      this.randomChange()
    },
    doSaveData(graphData) {
      console.log(JSON.stringify(graphData))
    },
    randomChange() {
      let graphData = deepClone(this.$refs.topology.getGraphData())
      let { nodes } = graphData
      this.$refs.topology.changeGraphData(graphData)
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-topology {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
html {
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>
