<template>
  <div class="d-flex justify-content-start text-color align-items-center">
    <div class="d-flex align-items-center">
        <a :href="link" target="_blank" rel="noopener noreferrer">
      <div class="d-flex align-self-center campaign-style" v-if='image==null'>
        <font-awesome-icon icon="eye" class="align-self-center ml-3 mb-1" />
      </div>
      <div class="d-flex align-self-center campaign-style" v-else :style="{ 'background-image': 'url('+image+')' }">
        <font-awesome-icon icon="eye" class="align-self-center ml-3 mb-1" />
      </div>
        </a>
    </div>
    <div>
      <div class="main-text-white akkurat-bold nav-user-info">{{ currentCampaign }}</div>
      <div
        class="min-text-white text-left akkurat-light-regular nav-user-sub-info"
      >{{ code }} - {{ date }}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: "campaign",
  data: () => ({
    currentCampaign: "Campanha vigente",
    code: "****",
    date: "de **/** à **/**",
    link: "",
    image: null,
    loading: false
  }),
  methods: {
    
    setData(campaign){
      let start =  campaign.start.substring(8,10) + "/" + campaign.start.substring(5,7);
      let end = campaign.end.substring(8,10) + "/" + campaign.end.substring(5,7);
      this.code = campaign.code;
      this.link = campaign.catalog_link;
      this.date = "de " + start + " à " + end;
      this.image = campaign.catalog_cover_url;
    }
  },
  mounted(){
    var vm = this;
    this.$store.dispatch('loadCurrentCampaign')
    .then(resp => {
      vm.setData(resp);
    });
  }
};
</script>

<style scoped>
.campaign-style {
  background-image: url("../../assets/campaign.png");
  background-size:cover;
  background-repeat: no-repeat !important;
  background-position: center;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  color: white;
  margin-right: 10px;
}
</style>
