<template>
  <modal
    name="last-time-offers-detail"
    :scrollable="true"
    height="auto"
    :no-close-on-backdrop="true"
    :header-bg-variant="null"
    @closed="$emit('closed')"
    @before-open="beforeOpenModal"
  >
    <b-row class="d-flex justify-content-between mb-2 mt-1">
      <b-col class="d-flex modal-text-color ml-2" cols="8">
        <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
          <font-awesome-icon icon="image" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Oferta</div>
          <div class="akkurat-bold max-header-text title">{{(product_per_campaign !=null)? product_per_campaign.product.name.substr(0,40)+"." : ""}}</div>
        </div>
      </b-col>
      <b-col class="d-flex justify-content-end mr-2 mt-1">
        <span class="close-icon" @click="closeModal">
          <font-awesome-icon icon="times" class="align-self-center" />
        </span>
      </b-col>
    </b-row>

    <b-form @submit.prevent="save" @reset.prevent="reset">

<b-col md='12'>

<search-campaign v-model="campaign" @change="changeCampaign" />
</b-col>

<b-col md='12'>

<search-product  
        ref="searchProduct"
        v-model="product_per_campaign"
              :campaignId="campaignId"
              :disabled="campaign == null"
              @change="changeProduct"
              />
</b-col>

      <b-row class="m-2">
       

        <b-col cols="12" class="mb-2">
          <upload-image v-if="loadedImage" label="Banner da Oferta" v-model='record.banner_url' :fileInit="record.banner_url" @change="onImageChange" />
        </b-col>
      </b-row>
      <b-row class="justify-content-end">
        <b-col cols="3">
          <b-button variant="primary" type="submit">Salvar</b-button>
        </b-col>
        <b-col cols="3" class="mr-4 mb-3">
          <b-button type="reset">Cancelar</b-button>
        </b-col>
      </b-row>
    </b-form>
  </modal>
</template>
<script src="./last-time-offers-detail.js" lang="js" />
<style scoped lang="scss" src="./last-time-offers-detail.scss" />
