<template>
  <b-container>
    <div v-if="loading == true" class="text-center">
      <b-spinner variant="primary" label="Chargement...."></b-spinner>
    </div>
    <div v-if="selected == 0">
      <h1>Partitions</h1>
      <br/>
      <b-table selectable select-mode="single" striped hover 
             :fields="fields" :items="items"
             @row-selected="onRowSelected">
      </b-table>
    </div>
    <div v-if="selected > 0">
      <br/>
      <b-button variant="info" @click="clickBack" >Retour</b-button>
      <br/>
      <br/>
      <h4 class="text-center"> {{selectedItem.compositor}} - {{selectedItem.name}}</h4>
      <br/>
      <b-card-group deck v-for="(instrument) in selectedItem.instruments" :key="instrument.id">
        <b-card :header="instrument.title">
          <div v-for="(number) in instrument.number" :key="number.id" > 
            <p>Partie: {{number.id}}</p>
            <p> Page:</p>
            <b-list-group>
              <b-list-group-item v-for="(page) in number.pages" :key="page.name">
                <b-container class="bv-example-row">
                  <b-row>
                    <b-col>{{page.name}}</b-col>
                    <b-col></b-col>
                    <b-col><b-button class="btn" style="width:100%" :href="page.uri" target="_blank"><b-icon icon="download"></b-icon></b-button></b-col>
                  </b-row>
                </b-container>
              </b-list-group-item>
            </b-list-group>
          </div>
          <br/>  
        </b-card>
      </b-card-group>
      <br/>
    </div>
  </b-container>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      loading: true,
      selected: '0',
      fields: [
          { key: 'id', label: 'Numéro' },
          { key: 'name', label: 'Nom' },
          { key: 'compositor', label: 'Compositeur' },
      ],
      items: [],
      selectedItem: {}
    };
  },
  methods: {
    async fetchList () {
      try{
        let response = await axios.get('http://ohmj2.free.fr/legacy/api/score/read.php')
        this.items = response.data.scores;
        this.loading = false
      }catch(error) {
        console.log(error);
      }
    },
    async fetchScore (id) {
      try{
        let response = await axios.get('http://ohmj2.free.fr/legacy/api/score/read.php?id='+id)
        this.selectedItem = response.data;
        this.loading = false
        console.log('item: ', this.selectedItem)
      }catch(error) {
        console.log(error);
      }
    },
    async onRowSelected(items) {
      this.loading = true
      this.selected = items[0].id
      window.scrollTo(0,0);
      await this.fetchScore(this.selected)
    },
    clickBack(){
      this.selected = 0;
    }
  },
  async mounted() {
    let uri = window.location.search.substring(1)
    let params = new URLSearchParams(uri)
    console.log(params.get("id"))
    let id = params.get("id")
    if (id === null) {
    await this.fetchList()
    } else {
      this.selected = id
      window.scrollTo(0,0);
      await this.fetchScore(this.selected)
    }
  },
};
</script>

<style>
</style>
