<template>

    <b-carousel
      id="carousel-1"
     
      :interval="4000"
      class="top-banner banner-background akkurat-bold" 
      controls
      indicators
      background="#ababab"
      
      :img-height="height"
      style="text-shadow: 1px 1px 2px #333;"
    >
      <b-carousel-slide :img-src="image.image_url" :key="image.image_url" v-for="(image,index) in images"></b-carousel-slide>

    </b-carousel>
  
</template>

<script>

import BannerService from '@/services/resources/BannerService';

const service = BannerService.build();

export default {
  name: 'home-top-banner',
  props: {
    title: {
      type: String,
    },
     height:{
      default: () =>{
        return 480;
      }
    }
  },
  data: () => {
    return {
      images: []
    }
  },
  methods:{
    listBanners(){
      var vm = this;
      
      service.search({types: "LARGER",campaign: 'current', order_by: 'priority', order: 'DESC'})
      .then(resp => {
        vm.images = resp;
      })
      .catch( err => {
        console.log(err);
      });
    }
  },
  created(){
    this.listBanners();
  }
};
</script>

<style scoped>
  .top-banner {
    border-radius: 10px;
    box-shadow: 0px 0px 6px #00000029;
    
    overflow-y: hidden;
  }
</style>
