<template>
  <b-row>
    <b-col md="12">
      <b-tabs content-class="mt-3" v-model="tabIndex">
        <b-tab title-link-class="custom-title" :title="'Completos'+titleCompleto" active @click="tabIndex = 0">
          <table-selfsignup @changeTotal="changeTotal" tab="COMPLETE" v-if="tabIndex == 0"></table-selfsignup>
        </b-tab>
        <b-tab title-link-class="custom-title" :title="'Aprovados'+titleAprovados" @click="tabIndex = 1">
          <table-selfsignup @changeTotal="changeTotal" tab="APPROVED" v-if="tabIndex == 1"></table-selfsignup>
        </b-tab>

        <b-tab title-link-class="custom-title" :title="'Incompletos'+titleIncompletos" @click="tabIndex = 2">
          <table-selfsignup @changeTotal="changeTotal" tab="INCOMPLETE" v-if="tabIndex == 2"></table-selfsignup>
        </b-tab>

<b-tab title-link-class="custom-title" :title="'Negados'+titleNegados" @click="tabIndex = 3">
          <table-selfsignup @changeTotal="changeTotal" tab="DISAPPROVED" v-if="tabIndex == 3"></table-selfsignup>
        </b-tab>

        <b-tab title-link-class="custom-title" :title="'Todos'+titleTodos" @click="tabIndex = 4">
          <table-selfsignup @changeTotal="changeTotal" tab="ALL" v-if="tabIndex == 4"></table-selfsignup>
        </b-tab>
      </b-tabs>
    </b-col>
  </b-row>
</template>

<script>
import tableSelfsignup from "./List/table-list";
export default {
  components: {
    tableSelfsignup
  },
  data() {
    return {
      tabIndex: 1,
      total: 0
    };
  },
  computed:{
    titleCompleto(){
       if(this.tabIndex === 0){
        return ' ('+this.total+') ';
      }
        return "";
    },
     titleAprovados(){
       if(this.tabIndex === 1){
        return ' ('+this.total+') ';
      }
        return "";
    },
     titleIncompletos(){
       if(this.tabIndex === 2){
        return ' ('+this.total+') ';
      }
        return "";
    },
     titleNegados(){
       if(this.tabIndex === 3){
        return ' ('+this.total+') ';
      }
        return "";
    },
     titleTodos(){
       if(this.tabIndex === 4){
        return ' ('+this.total+') ';
      }
        return "";
    }
  },
  methods:{
    changeTotal(total){
      this.total = total;
    }
  }
};
</script>
