<template>
  <modal
    name="promotion-progressive-discount-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">Desconto Progressivo</div>
          <div class="akkurat-bold max-header-text title">{{(record.name !=null)? record.name : ""}}</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">
        <text-input title="Nome" v-model="record.name" />
        <p class="text-danger" v-if="submit && record.name.length < 4">Nome obrigatório</p>
      </b-col>

      <b-col md="12">
        <search-campaign v-model="campaign" @change="changeCampaign" />
      </b-col>
<hr width="70">

<h4 class="col-md-12">Produtos:</h4>
      <b-col v-for=" (productPerCampaign, index) in record.products_per_campaigns" :key='index'  md="12">
<b-row>

        <search-product
        class="col-md-10"
          ref="searchProduct"
          v-model="record.products_per_campaigns[index]"
          :campaignId="campaignId"
          :disabled="campaign == null"
          
        />

  <b-col md="1">
            <label for>&nbsp;</label>
            <a @click.prevent="removeProduct(index)" class="btn btn-dark">
              <font-awesome-icon class="text-light" icon="trash" />
            </a>
          </b-col>
</b-row>

        <p class="text-danger" v-if="submit && productPerCampaign == null ">Escolha o produto</p>

        <p v-if="productPerCampaign != null">
          <br />Valor do Produto:
          <strong>R$ {{ parseFloat(productPerCampaign.catalog_value) | formatCoin}}</strong>
        </p>
      </b-col>

 <div class="col-md-12 text-right">
          <p>
            <br />
            <a @click.prevent="addProduct" class="btn btn-dark">
              <font-awesome-icon class="text-light" icon="plus" />
            </a>
          </p>
        </div>

      

      <hr width="70%" />
      
<h4 class="col-md-12">Faixas:</h4>
      <div>
        <b-row v-for="(range,index) in record.range" :key="range.name" class="text-center">
          
          <b-col md="3" style=" margin-left: 16px;">
          
            <label class="label-qty" for="product-qty">Quantidade:</label>
            <input-quantity :small="true" v-model="range.quantity" />
          
          </b-col>
          <b-col md="4">
            <select-input
              :options="[
  {text: 'Porcentagem (%)', value: 'PERCENT'},
  {text: 'Reais (R$)', value: 'CURRENCY_VALUE'}
  ]"
              v-model="range.discount_type"
            />
          </b-col>
          <b-col md="3">
            <label :for="`${index}-value-discount`" style="
    margin-bottom: 0px;
">Valor do Disc.</label>

            <b-form-input
              :id="`${index}-value-discount`"
              class="radius-theme"
              type="text"
              v-mask=" ['#,##','##,##','###,##']"
              v-model="range.discount"
              placeholder="01,00"
            ></b-form-input>
          </b-col>

          <b-col md="1">
            <label for>&nbsp;</label>
            <a @click.prevent="removeRange(index)" class="btn btn-dark">
              <font-awesome-icon class="text-light" icon="trash" />
            </a>
          </b-col>
         

          <hr width="70%" />
        </b-row>
        <p class="text-danger text-center col-md-12" v-if="submit && rangeWithError">
          Verifique as regras de desconto, lembrando que nenhum valor final pode ser menor que zero.
        </p>
        <div class="col-md-12 text-right">
          <p>
            <br />
            <a @click.prevent="addRange" class="btn btn-dark">
              <font-awesome-icon class="text-light" icon="plus" />
            </a>
          </p>
        </div>
      </div>
      <hr />
      <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="./PromotionProgressiveDiscountDetail.js" lang="js" />
<style scoped lang="scss" src="./PromotionProgressiveDiscountDetail.scss" />
