<template>
  <div>
    <ul id="arborescence" class="menuNonFinal">
      <li class="element" v-on:click="naviguer"><span class="niveau"></span>Informatique</li>
      <ul class="cache menuNonFinal">
        <!-- Sous réserve d'en avoir le temps, insérer du v-for fera clairement pas tache ici (en attendant de mettre les vrais tags banque) -->
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Informatique_1</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Informatique_1_1</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_1_2</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_1_3</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_1_4</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_1_5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Informatique_2</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Informatique_2_1</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_2_2</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_2_3</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_2_4</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_2_5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Informatique_3</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Informatique_3_1</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_3_2</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_3_3</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_3_4</li>
          <li class="element" v-on:click="nouveauFiltre">Informatique_3_5</li>
        </ul>
      </ul>
      <li class="element" v-on:click="naviguer"><span class="niveau"></span>Genie_Civil</li>
      <ul class="cache menuNonFinal">
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Genie_Civil_1</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_1_1</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_1_2</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_1_3</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_1_4</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_1_5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Genie_Civil_2</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_2_1</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_2_2</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_2_3</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_2_4</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_2_5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Genie_Civil_3</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_3_1</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_3_2</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_3_3</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_3_4</li>
          <li class="element" v-on:click="nouveauFiltre">Genie_Civil_3_5</li>
        </ul>
      </ul>
      <li class="element" v-on:click="naviguer"><span class="niveau"></span>Systemes_Electriques</li>
      <ul class="cache menuNonFinal">
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Systemes_Electriques_1</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_1_1</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_1_2</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_1_3</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_1_4</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_1_5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Systemes_Electriques_2</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_2_1</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_2_2</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_2_3</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_2_4</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_2_5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Systemes_Electriques_3</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_3_1</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_3_2</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_3_3</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_3_4</li>
          <li class="element" v-on:click="nouveauFiltre">Systemes_Electriques_3_5</li>
        </ul>
      </ul>
    </ul>

  </div>
</template>

<script>
//import $ from 'jquery'

export default {
  name: "Filtre_Tag",

  methods: {
    /**
     * @vuese
     * activation / desactivation  de l'arborescence
     */

    naviguer: function (e) {
      if (e.offsetX > e.target.offsetLeft) {
        this.$emit("creer_filtre", {filtre: e.target.innerText, type: "tags officiels"})
        alert("this.filtreChoisi : " + this.filtreChoisi)

      }
      else{
        e.target.classList.toggle("niveau-down")
        e.target.parentNode.nextElementSibling.classList.toggle('affiche')
      }
    },
    /**
     * @vuese
     * récupération d'un click sur un des échelon
     */

    nouveauFiltre: function (e) {
      this.$emit("creer_filtre", {filtre: e.target.innerText, type: "tags officiels"})
      alert("this.filtreChoisi : " + this.filtreChoisi)

    }
  }
}
</script>

<style scoped>

.menuNonFinal {
  list-style-type: none;
}

#arborescence {
  padding: 4px;
  text-align: left;
  margin: 0 0 0 10px;
}

.niveau {
  user-select: text;
}

body {
  cursor: pointer;
}

.niveau::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}

.niveau-down::before {
  transform: rotate(90deg);
}

.cache {
  display: none;
}

.affiche {
  display: block;
}

.element{
  display: flex;
}
</style>