<template>
  <k-accordion>
    <k-accordion-item title="Best Paths">
        <div>
          <k-property-panel v-for="(path, index) in content">
            <k-accordion-item :title=format_title(index,path['cost'])>
              <k-property-panel-item v-for="(cur_path, path_index) in path['hops']"
                                     v-if="content" :name="String(path_index)" :value="pathList(cur_path)"
                                     :key="path_index">
              </k-property-panel-item>
            </k-accordion-item>
          </k-property-panel>
        </div>
      </k-accordion-item>
  </k-accordion>
</template>
<script>

 module.exports = {
   props: ["content"],
   methods: {
    format_title(index, cost){
      return "Path " + index + ", cost: " + cost + ", hops: ";
    },
    
    pathList(value) {
      if (!value) return '';
      var   str       = String(value);
      const splitStr  = str.split(":");
      var   toReturn  = "";
      var   count     = 0;

      //console.log(str);
      for (var i = 0; i < str.length; i++) {
        if (str.charAt(i) == ':') {
          count = count + 1;
        }

        if (count == 7) {
          toReturn = "Switch " + splitStr[splitStr.length - 2] + ":" + splitStr[splitStr.length - 1];
        } else if (count == 8) {
          toReturn = "Interface " + splitStr[splitStr.length - 2] + ":" + splitStr[splitStr.length - 1];
        } else {
          toReturn = "No id";
        }
      }
      return toReturn;
    },

    async fetch_dpids(x) {
      var a = [];
      var result = "";
      try {
          const response  = await fetch('/api/kytos/topology/v3/interfaces');
          const data      = await response.json();
          const dpids     = await Object.entries(data.interfaces).map(([key, value]) => {
            let item = key;

            if (item == x) {
              item = `${value.name} - ${item} - ${value.mac}`;
              result = item;
              //console.log(item);
            }
            return item;
          });
          //console.log(dpids);
          this.dpids = dpids;
          result = "fixed " + data;
          console.log("result: ", data);
          return dpids;


      } catch (error) {
          console.error(error);
          return "error!";
      }
    },
  }, // end of method block here
    
   data () {
     return {
       display: false,
       paths: [],
       headers: ["dpid"],
       rows: [this.content]
     }
   }
   
 }


</script>