<template>
  <section class="container mt-5">
    <b-tabs  :destroy-on-hide="true" v-model="tab" expanded>
      <b-tab-item label="Premiaciones" icon="medal" value="0">
        <Premiaciones :updateIsLoading="updateIsLoading"/>
      </b-tab-item>

      <b-tab-item label="Operadores" icon="account" value="1">
        <Operadores :updateIsLoading="updateIsLoading"/>
      </b-tab-item>

      <b-tab-item label="Reportes" icon="chart-bar" value="2">
        <Reportes />
      </b-tab-item>
    </b-tabs>
    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
  </section>
</template>

<script>
import Operadores from '@/components/admin/Operadores'
import Reportes from '@/components/admin/Reportes'
import Premiaciones from '@/components/admin/Premiaciones'

export default {
  components: {
    Operadores,
    Reportes,
    Premiaciones
  },
  data(){
    return {
      tab: '0',
      isLoading: false
    }
  },
  methods: {
    updateIsLoading(booleanValue) {
      this.isLoading = booleanValue
    },
  }
}
</script>

<style scoped>
.full-h {
  min-height: 75vh;
}
@media (max-width: 768px) {
  .container {
    margin: 0 15px !important;
  }
  .full-h {
    height: 80vh;
  }
}
</style>
