<template>
  <div id="app">
    <div>
      <input type="text" id="name">
      <input type="submit" value="查询" @click="search">
    </div>
    <div id="mynetwork">

    </div>

  </div>
</template>

<script>
  import vis from 'vis'

  export default {
    name: 'App',
    data() {
      return {
        nodes: new vis.DataSet([
          /*
          {id: 1, label: 'Node 1'},
          {id: 2, label: 'Node 2'},
          {id: 3, label: 'Node 3'},
          {id: 4, label: 'Node 4'},
          {id: 5, label: 'Node 5'}
          */
        ]),
        edges: new vis.DataSet([
          /*
          {from: 1, to: 3},
          {from: 1, to: 2},
          {from: 2, to: 4},
          {from: 2, to: 5}
           */
        ]),
        node: {
          id: 0,
          label: ''
        }
      }
    },
    methods: {
      format(r) {
        var nodeList = r.data.nodes
        var nodes = new Array(nodeList.length)
        for (var i = 0; i < nodeList.length; i++) {
          nodes[i] = {'id': nodeList[i].id, 'label': nodeList[i].name}
        }
        this.nodes = new vis.DataSet(nodes)

        var edgeList = r.data.edges
        var edges = new Array(edgeList.length)
        for (var i = 0; i < edgeList.length; i++) {
          edges[i] = {'from': edgeList[i].start.id, 'to': edgeList[i].end.id, 'label': edgeList[i].relation}
        }
        this.edges = edges
        var data = {
          nodes: this.nodes,
          edges: this.edges
        }
        var options = {
          configure: {
            enabled: false,
            filter: 'nodes,edges',
            container: undefined,
            showButton: false
          },
          edges: {
            arrows: {
              to: {
                enabled: true,
                imageHeight: undefined,
                imageWidth: undefined,
                scaleFactor: 0.5,
                src: "https://visjs.org/images/visjs_logo.png",
                type: "arrow"
              },
              from: {
                enabled: false,
                imageHeight: undefined,
                imageWidth: undefined,
                scaleFactor: 1,
                src: undefined,
                type: "arrow"
              },
              color: {
                color: '#848484',
                highlight: '#848484',
                hover: '#848484',
                inherit: 'from',
                opacity: 1.0
              },
            }
          }
        }
        var container = document.getElementById('mynetwork')
        var network = new vis.Network(container, data, options);
      },
      search() {
        var name = document.getElementById("name").value
        this.$http.get("/star/byName/" + name).then(r => {
          this.format(r)
        })
      }
    },
    mounted() {
      this.$http.get("star/all").then(r => {
        this.format(r)
      })
    }

  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  #mynetwork {
    width: 600px;
    height: 400px;
    border: 1px solid lightgray;
  }
</style>