<template>
<div id="graph"></div>
</template>

<script>
  import vis from 'vis'
  import swal from 'sweetalert'
  import axios from 'axios'
  /* eslint-disable */

  export default {
  data: () => ({
  shit: 'name',
  pasmo: {},
  nodes: new vis.DataSet([]),
  edges: new vis.DataSet([]),
  legends: [
  {
  name: 'Parent',
  image: require('@/assets/hex1.png'),
  },{
  name: 'Downlines',
  image: require('@/assets/yellow/0.png'),
  },{
  name: 'Downline`s downline',
  image: require('@/assets/blue/0.png'),
  }
  ],
  options: {
  nodes: {
  borderWidth:0,
  size:42,
  color: {
  border: '#222',
  background: 'transparent'
  },
  font: {
  color: '#111',
  face: 'Walter Turncoat',
  size: 16,
  strokeWidth: 1,
  strokeColor: '#222'
  }
  },
  edges: {
  color: {
  color: '#CCC',
  highlight: '#A22'
  },
  width: 3,
  length: 275,
  hoverWidth: .05
  }
  }
  }),
  methods: {
  get () {
  axios.get('http://localhost:8000/users/profiles/37/network-view/')
  .then((response) => {
  this.nodes.add(response.data.data.nodes)
  this.edges.add(response.data.data.edges)
  });
  }
  },
  created () {
  console.log('created')
  this.get()
  },
  mounted () {
  const container = document.querySelector('#graph')

  const data = {
     nodes: this.nodes,
     edges: this.edges
  }

  let network = new vis.Network(container, data, this.options)

  network.on("doubleClick", function(properties) {
  var ids = properties.nodes[0]
  var clickedNodes = nodes.get(ids)

  swal(clickedNodes.label, {
  icon: clickedNodes.image,
  button: false
  })
  })
  }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);

  #graph {
  width:900px;
  height:85vh;
  margin:auto;
  /*background:#EEE;
  border:2px solid #DDD;*/
  }

  ul {
  list-style-type: none;
  }

  .center {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;

  align-items: center;
  }
</style>