<template>
  <q-page class="column">
    <div class="bg-red col col-shrink" style="">
      <q-tabs
        v-model="tab"
        class="bg-grey-2"
        inline-label
        align="justify"
        active-bg-color="bg-grey-1"
        active-color="cyan-14"
        indicator-color="cyan-14"
        switch-indicator
      >
        <q-tab name="solo" label="Solo-Cacher" icon="person"/>
        <q-tab name="team" label="Cacher-Team" icon="group"/>
      </q-tabs>
      <q-separator color="grey-4"/>
    </div>

    <div class="col flex column">
      <q-tab-panels v-model="tab" animated swipeable class="col">
        <q-tab-panel name="solo" class="q-pa-md fit">
          <q-list>
            <q-card class="q-mb-md" v-for="(user,index) in rankinglist" :key="user.id">
              <q-item class="q-pr-sm ">
                <q-item-section>
                  <q-item-label><a class="text-black" style="text-decoration: none"><span>{{index+1}}. {{user.username}}</span></a></q-item-label>
                </q-item-section>
                <q-item-section side>
                  <span class="text-grey">{{user.rankingPointsSum}} Punkte </span>
                </q-item-section>
              </q-item>
            </q-card>
          </q-list>
        </q-tab-panel>

        <q-tab-panel name="team" class=" fit">
          <q-list>
            <q-card class="q-mb-md">
              <q-item class="q-pr-sm ">
                <q-item-section>
                  <q-item-label>Single line item</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <span class="text-grey"> Punkte </span>
                </q-item-section>
              </q-item>
            </q-card>
          </q-list>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>

</template>

<style>
/*
  .my-list-card-item
    padding-left: 8px
*/
</style>
<script>
  import {dom} from 'quasar'

  const {height, width} = dom
  export default {
    data() {
      return {
        tab: 'solo',
        rankinglist: []
      }
    },
    created: function() {
      console.log("created(): " + this.rankinglist);
      this.fetchRankinglist();
    },
    methods: {
      fetchRankinglist() {
        this.$axios.get('/api/getRankingList')
          .then((response) => {
            console.log("Rankinglist: ");
            console.log(response.data);
            this.rankinglist = response.data;
          }).catch((error) => {
          // Error
          let msg;
          let title;
          if (error.response) {
            // The request was made and the server responded with a status code
            title = "Problem with response!";
            msg = error.response;
          } else if (error.request) {
            // The request was made but no response was received
            title = "Problem with request!";
            msg = "Error occured due to wrong server request!"
            console.log(error.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            title = "Error";
            msg = error.message;
            console.log('Error', error.message);
          }
          console.log(error.config);
          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, });
        })
      }
    }
}
</script>
