<template>
  <div>
    <b-row class="mb-3">
      <b-col>
       <home-top-banner :height="bannerHeight"/>
      </b-col>
    </b-row>

<div v-if="isManagerSalesConsultant || isManagerComercial || isSAC">

    <b-row class="mb-3">
        <home-news />
    </b-row>

    <b-row class="mb-4"  v-if="currentCampaign != null">
      <b-col cols="6" v-if="currentCampaign.catalog_card != null">
        <bottom-banner :imgSource="currentCampaign.catalog_card_url" />
        
      </b-col>
      <b-col cols="3" v-if="currentCampaign.catalog_cover != null">
        <a :href="currentCampaign.catalog_link" target="_blank">

        <bottom-banner :imgSource="currentCampaign.catalog_cover_url" :title="'Campanha ' + currentCampaign.name"/>
        </a>
      </b-col>
      <b-col cols="3" v-if='next_campaign !=null'>
            <a :href="next_campaign.catalog_link" target="_blank">
        <bottom-banner :imgSource="next_campaign.catalog_cover_url" :title="'Campanha ' + next_campaign.name "/>
            </a>
      </b-col>
    </b-row>
</div>


<b-row class="footer-buttons" v-else>

<b-col v-for="buttom in salesConsultanMenu" :key="buttom.title">

<b-button
    block
    class="
      d-flex
      btn shadow-none
      align-items-center
      border-0
      btn-hover
      btn-nav"
   
  >
    <div class="d-flex flex-fill  align-items-center">
     
      <div class="akkurat-bold btn-text" v-if="buttom.title == 'Catalogo virtual'" @click="goToCatalog">{{buttom.title}}</div>
      <div class="akkurat-bold btn-text" v-else-if="buttom.title == 'Materiais extras'" @click="$router.push({name:'Materiais Extras'})">{{buttom.title}}</div>
      <div class="akkurat-bold btn-text" v-else-if="buttom.title == 'Treinamento'" @click="$router.push({name:'Treinamento'})">{{buttom.title}}</div>
      <div class="akkurat-bold btn-text" v-else-if="buttom.title == 'Mais vendidos'" @click="$router.push({name:'Produtos Mais Vendidos'})">{{buttom.title}}</div>
      <div class="akkurat-bold btn-text" v-else-if="buttom.title == 'Promoções'" @click="goToPromotions">{{buttom.title}}</div>
      

      <div class="akkurat-bold btn-text" v-else>{{buttom.title}}</div>
    </div>
  </b-button>

</b-col>


</b-row>

  </div>
</template>

<script>
import BottomBanner from '@/components/shared-components/BottomBanner.vue';
import HomeTopBanner from '@/components/home/HomeTopBanner.vue';
import HomeNews from '@/components/home/HomeNews.vue';
import HomeService from "@/services/resources/HomeService";
import CampaignService from "@/services/resources/CampaignService";
import { mapState, mapGetters } from 'vuex'
import moment from "moment";

const salesConsultantMenu = [
  {
    title: "Promoções",
    icon: "home",
    routeName: ""
  },
   {
    title: "Catalogo virtual",
    icon: "home",
    routeName: "Materiais extras"
  },
   {
    title: "Materiais extras",
    icon: "home",
    routeName: ""
  },
   {
    title: "Mais vendidos",
    icon: "home",
    routeName: ""
  },
   {
    title: "Treinamento",
    icon: "home",
    routeName: ""
  }
];


const service = HomeService.build();
const campaignService = CampaignService.build();

export default {
  components: {
    BottomBanner,
    HomeTopBanner,
    HomeNews,
  },
  data: () => ({
    salesConsultanMenu: salesConsultantMenu,
   next_campaign:  null
  }),
  
  computed:{
   
    ...mapGetters([
     'isManagerSalesConsultant','isSAC', 'isManagerComercial'
    ]),
    bannerHeight(){
      if(this.$store.getters.isManagerSalesConsultant){
        return 250;
      }
      return 320;
    },
    currentCampaign(){
       return this.$store.state.campaign.current;
    },
    
  },
  methods:{
   loadNextCampaign(){
     var vm = this;
     campaignService.search({next:true})
     .then(resp => {
       if(resp.length > 0){
         vm.next_campaign = resp[0];
       }
     });
   },
    goToCatalog(){
     window.open(this.currentCampaign.catalog_link,'_blank');
   },
   goToPromotions(){
     window.open(this.currentCampaign.promotion_catalog_link,'_blank');
   }
  },
  mounted(){
    if(this.$store.getters.isManagerSalesConsultant){

      this.loadNextCampaign();
    }
  }
};
</script>

<style lang='scss' scoped>

@import "@/assets/css/main.scss";

.btn-hover:hover {
  background: #ED8626;
}

.btn-nav {
  border-radius: 20px;
  background: #ED8626;

  &:hover, &:active, &:focus{
    background-color: #ffcdb2;
  }
}

.btn-text{
  text-align: center;
    display: block;
    width: 100%;
}

.footer-buttons{
  margin: 20px 0px;
}
</style>
