<template>
  <div>
    <div class="annee">
      <div class="select w3-center">
        <label for="categorie">
          <p class="description_page"> Catégorie : </p>
        </label><br>
        <select style="width: 125px" class="custom-select" name="cat" id="categorie" v-model="cat">
          <option value="1">Films</option>
          <option value="2">Séries</option>
          <option value="3">Groupes</option>
          <option value="4">Jeux Vidéos</option>
          <option value="5">Livres</option>
        </select>
      </div>
    </div>
    <div class="annee">
      <div  class="select w3-center">
        <label for="anneeMin">
          <p class="description_page"> Année Minimale : </p>
        </label><br>
        <input style="width: 125px; background-color: white; color: black" type="number" id="anneeMin" v-model="anneeMin">
      </div>
      <div class="select w3-center">
        <label for="anneeMax">
          <p class="description_page"> Année Maximale : </p>
        </label><br>
        <input style="width: 125px; background-color: white; color: black" type="number" id="anneeMax" v-model="anneeMax">
      </div>
    </div>
    <div class="page_oeuvre">
      {{user}}
      {{ getOeuvres() }} <br>
<!--      <div v-for="(oeuvre,index) in getOeuvres()" :key="index" class="w3-third w3-margin-bottom div_oeuvre">-->
<!--&lt;!&ndash;        <img v-bind:src="require('../assets/' + oeuvre.image)" alt="" style="width:100%" class="w3-hover-opacity">&ndash;&gt;-->
<!--&lt;!&ndash;        <p> {{ index }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;        <une-oeuvre  :oeuvre="oeuvre"></une-oeuvre>&ndash;&gt;-->
<!--            <p> {{ oeuvre }} </p>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
  // import uneOeuvre from "./uneOeuvre";
  import Axios from "axios";
export default {
  name: 'lesOeuvres',
  data() {
    return {
      iduser: this.$route.params.iduser,
      user: [],
      cat: 1,
      anneeMin: null,
      anneeMax: null,
      url: this.$store.state.urlAPI,
      // getOeuvres: [],

      getOeuvres: async () => {
        let data;
        let mesoeuvres = [];
        console.log("Data : " + data);
        data = await this.user;
        console.log(data.data.oeuvres);
        for (var i = 0 ; i < data.data.oeuvres.length ; i++)
        {
          console.log(data.data.oeuvres[i]);
          await Axios.get(this.$store.state.urlAPI + data.data.oeuvres[i]).then(response => mesoeuvres.push(response.data));
          console.log(mesoeuvres[i]);
        }
        console.log(mesoeuvres);
        return mesoeuvres;
      },
    }
  },
  components: {
    // uneOeuvre,
  },

  methods: {
    action(index, appuser) {
      this.$router.push({ name: 'PresentationOeuvre', params: { id: index, appuser: appuser}})
    },
  },
  created() {
    Axios.defaults.headers.common['Authorization'] = 'Bearer ' + sessionStorage.getItem('token');
    Axios.get(this.$store.state.urlAPI + '/api/users')
            .then(response => this.appuser = response.data.filter(user => user.email == sessionStorage.getItem("email"))[0].id)
            .catch(error => console.log(error));
    this.user = Axios.get(this.$store.state.urlAPI + '/api/users/' + this.iduser)

  },
}
</script>