<template>
  <div>
    <b-row>
      <b-col>
        <b-row>
          <b-col cols="12">
            <b-tabs content-class="mt-3" v-model="tabIndex">
              
              <b-tab title-link-class="custom-title" title="Aguardando confirmação" @click="tabIndex = 0">
                <solicitations-waiting-approvation-list :active="tabIndex == 0"/>
              </b-tab>
              <b-tab title-link-class="custom-title" title="Aguardando análise" @click="tabIndex = 1">
                <solicitations-waiting-analyze-list :active="tabIndex == 1" />
              </b-tab>
              <b-tab title-link-class="custom-title" title="Cadastros pendentes" @click="tabIndex = 2">
                <solicitations-pending-list :active="tabIndex == 2" />
              </b-tab>
              <b-tab title-link-class="custom-title" title="Cadastros finalizados" @click="tabIndex = 3">
                <solicitations-approved-list :active="tabIndex == 3" />
              </b-tab>
              <b-tab title-link-class="custom-title" title="Todos os cadastros" @click="tabIndex = 4">
                <solicitations-all-list :active="tabIndex == 4" />  
              </b-tab>   
            </b-tabs>
          
          </b-col>
        </b-row>
      </b-col>
    </b-row>
   
  </div>
</template>

<script>
import SolicitationsVisitList from '@/components/solicitations/solicitations-list/visit/SolicitationsList.vue';
import SolicitationsWaitingApprovationList from '@/components/solicitations/solicitations-list/waiting-approvation/SolicitationsList.vue';
import SolicitationsWaitingAnalyzeList from '@/components/solicitations/solicitations-list/waiting-analyze/SolicitationsList.vue';
import SolicitationsPendingList from '@/components/solicitations/solicitations-list/pending/SolicitationsList.vue';
import SolicitationsApprovedList from '@/components/solicitations/solicitations-list/approved/SolicitationsList.vue';
import SolicitationsAllList from '@/components/solicitations/solicitations-list/all/SolicitationsList.vue';

export default {
  components: {
    SolicitationsVisitList,
    SolicitationsWaitingApprovationList,
    SolicitationsWaitingAnalyzeList,
    SolicitationsPendingList,
    SolicitationsApprovedList,
    SolicitationsAllList
  },
  data: () => {
      return {
        totalPages: 10,
        tabIndex: 0
      };
  }
};
</script>

<style lang="scss">
@import '../../assets/css/main.scss';

.custom-title{
  color: #FF9B64;
}
</style>
