Vue.component('Accordeon', {
  template : `
  <section v-bind:id="this.list.id">
    <a v-bind:href="this.href">
      <span
      v-on:click="toggleActive()"
      class="listname"
      :class="{ active: isActive }">

        <h3 class="b9h-lang-fr">{{ this.list.nameFR }}</h3>
        <h3 class="b9h-lang-en">{{ this.list.nameEN }}</h3>
        <h3 class="b9h-lang-it">{{ this.list.nameIT }}</h3>
        <span class="byl-icon-chevron-down listicon">

      </span>
    </a>
    <section class="listchild" :class="{ active: isActive }">
      <h3 v-for="i in this.list.sub"> {{ i.nameFR }} </h3>
    </section>
  </section>
  `,
  props : {
    list : Object
  },
  data () {
    return {
      isActive : false
    }
  },
  computed: {
    href: function () {
      return "#" + this.list.id;
    }
  },
  methods : {
    donothing () {
    },
    toggleActive () {
      this.isActive = !this.isActive
    }
  }
})


const jsonurl = "asset/db.json"
let db2 = fetch(jsonurl)

let vm = new Vue({
  el: '#root',
  data: {
    currentLang: 'fr',
    db : {
      restaurants : {
        id : "resto",
        nameFR : "Restaurant",
        nameEN : "Restaurant",
        nameIT : "Ristoranti",
        sub : {
          italiens : {
            id: "restoital",
            nameFR : "Italien",
            nameEN : "Italian",
            nameIT : "Italiano",
            SanTelmo : {
              name: "San Telmo"
            },
            Salsamenteria : {
              name: "Salsamenteria di Parma"
            }
          },
          vege : {
            id : "restovege",
            nameFR : "Végétarien",
            nameEN : "Vegan",
            nameIT : "Vegetariano",
            SanTelmo : {
              name: "San Telmo"
            }
          }
        }
      }
    }
  },
  methods: {
    hidelang: function(lang) {
      langClass = "b9h-lang-" + lang;
      langElms = document.getElementsByClassName(langClass);
      for (i = 0; i < langElms.length; i++) {
        langElms[i].style.display = 'none';
      }
    },
    hidelangs: function() {
      this.hidelang('fr');
      this.hidelang('en');
      this.hidelang('it');
    },
    showlang: function(lang) {
      this.hidelangs();
      langClass = "b9h-lang-" + lang;
      langElms = document.getElementsByClassName(langClass);
      for (i = 0; i < langElms.length; i++) {
        langElms[i].style.display = 'revert';
      }
    },
     setlang: function (lang) {
      target = document.querySelector("#"+"tab-"+lang);
      marker = document.querySelector("#lang-marker");
      marker.style.left = target.offsetLeft + "px";
      marker.style.width = target.offsetWidth + "px";
      this.showlang(lang);
    },
  },
  mounted: function() {
    console.log("mounting");
    this.setlang('fr');
    console.log("mounted");
  }

})