<!--
  - Licensed to the Apache Software Foundation (ASF) under one or more
  - contributor license agreements.  See the NOTICE file distributed with
  - this work for additional information regarding copyright ownership.
  - The ASF licenses this file to You under the Apache License, Version 2.0
  - (the "License"); you may not use this file except in compliance with
  - the License.  You may obtain a copy of the License at
  -
  -     http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<template>
  <v-container grid-list-xl fluid >
    <v-layout row wrap>
      <v-flex lg12>
        <breadcrumb title="serviceRelation" :items="breads"></breadcrumb>
      </v-flex>
    </v-layout>

    <v-flex lg12>
      <v-card>
          <div id="chartContent" style="width:100%;height:500%;"/>
      </v-card>
    </v-flex>

  </v-container>

</template>
<script>
  import Breadcrumb from '@/components/public/Breadcrumb'
  export default {
    components: {
      Breadcrumb
    },
    data: () => ({
      baseURL: '/api/dev',
      success: null,
      breads: [
        {
          text: 'serviceMetrics',
          href: ''
        },
        {
          text: 'serviceRelation',
          href: ''
        }
      ],
      responseData: null
    }),
    methods: {
      initData: function () {
        // eslint-disable-next-line no-undef
        this.chartContent = echarts.init(document.getElementById('chartContent'))
        this.chartContent.showLoading()
        this.$axios.get('/metrics/relation')
          .then(response => {
            if (response && response.status === 200) {
              this.success = true
              this.responseData = response.data
              this.responseData.type = 'force'
              this.initChart(this.responseData)
            }
          })
          .catch(error => {
            this.success = false
            this.responseData = error.response.data
          })
      },
      initChart: function (data) {
        this.chartContent.hideLoading()

        const option = {
          legend: {
            top: 'bottom',
            data: data.categories.map(i => i.name)
          },
          series: [{
            type: 'graph',
            layout: 'force',
            animation: false,
            label: {
              normal: {
                show: true,
                position: 'right'
              }
            },
            draggable: true,
            data: data.nodes.map(function (node, idx) {
              node.id = idx
              return node
            }),
            categories: this.responseData.categories,
            force: {
              edgeLength: 100,
              repulsion: 10
            },
            edges: data.links,
            edgeSymbol: ['', 'arrow'],
            edgeSymbolSize: 7
          }]
        }
        this.chartContent.setOption(option)
      }
    },
    mounted: function () {
      this.initData()
    }

  }
</script>