<template>
  <div>
    <ul id="arborescence" class="menuNonFinal">
      <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag1</li>
      <ul class="cache menuNonFinal">
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag1.1</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag1.1.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.1.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.1.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.1.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.1.5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag1.2</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag1.2.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.2.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.2.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.2.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.2.5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag1.3</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag1.3.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.3.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.3.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.3.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag1.3.5</li>
        </ul>
      </ul>
      <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag2</li>
      <ul class="cache menuNonFinal">
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag2.1</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag2.1.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.1.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.1.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.1.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.1.5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag2.2</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag2.2.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.2.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.2.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.2.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.2.5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag2.3</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag2.3.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.3.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.3.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.3.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag2.3.5</li>
        </ul>
      </ul>
      <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag3</li>
      <ul class="cache menuNonFinal">
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag3.1</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag3.2</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.5</li>
        </ul>
        <li class="element" v-on:click="naviguer"><span class="niveau"></span>Tag3.3</li>
        <ul class="cache">
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.1</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.2</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.3</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.4</li>
          <li class="element" v-on:click="nouveauFiltre">Tag3.1.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: 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: 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>