<template>
  <modal
    name="promotion-detail"
    :scrollable="true"
    height="auto"
    width="90%"
    :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">Promoções</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">
        <b-row>
          <b-col md="6">
            <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="6">
            <search-campaign v-model="campaign" @change="changeCampaign" />
          </b-col>
        </b-row>
      </b-col>
      <p>&nbsp;</p>
      <b-col md="12">
        <b-row>
          <b-col md="4">
            <select-input
              title="Para ativar a promoção compre "
              :options="[
  {text: 'Todos os produtos da lista Compre', value: 'AND'},
  {text: 'Qualquer um dos produtos da lista compre', value: 'OR'}
  ]"
              v-model="record.buy_type"
            />
          </b-col>

          <b-col md="4">
            <select-input
              title="e leve "
              :options="[
  {text: 'Todos da lista leve com desconto', value: 'AND'},
  {text: 'Um da lista leve com desconto', value: 'OR'}
  ]"
              v-model="record.take_type"
            />
          </b-col>

          <b-col md="4">
            <select-input
              title="Calcular desconto em"
              :options="[
  {text: 'Porcentagem (%)', value: 'PERCENT'},
  {text: 'Reais (R$)', value: 'CURRENCY_VALUE'}
  ]"
              v-model="record.discount_type"
            />
          </b-col>
        </b-row>
      </b-col>
      <b-col md="12">
        <b-row>
          <hr width="70%" />
          <p class="col-md-12">&nbsp;</p>

          <b-col md="6" style="
    border-right: solid 1px #CCC;
">
            <h4>Compre</h4>
            <p
              v-if="submit && record.promotion_has_buy_product_per_campaign.length == 0"
              class="text-center text-danger"
            >É necessário um produto para ativar a promoção.</p>
            <b-row
              v-for="(take,index) in record.promotion_has_buy_product_per_campaign"
              :key="index"
            >
              <b-col md="3" style="
    margin-left: 16px;
">
                <label class="label-qty" for="product-qty">Quantidade:</label>
                <input-quantity v-model="take.quantity" :small="true" />
              </b-col>

              <b-col md="7">
                <search-product
                  ref="searchProduct"
                  v-model="take.product_per_campaign"
                  :campaignId="record.campaign_id"
                  :disabled="campaign == null"
                  @change="changeProduct"
                />

                <p
                  class="text-danger"
                  v-if="submit && take.product_per_campaign == null "
                >Escolha 1 produto</p>
              </b-col>

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

            <b-row>
              <b-col md="12" class="text-right">
                <p style="padding-right: 1em;">
                  <br />
                  <a @click.prevent="addBuy" class="btn btn-dark">
                    <font-awesome-icon class="text-light" icon="plus" />
                  </a>
                </p>
              </b-col>
            </b-row>
          </b-col>
          <!-- Fim do Compre -->
          <b-col md="6">
            <h4>Leve</h4>
            <p
              v-if="submit && record.promotion_has_take_product_per_campaign.length == 0"
              class="text-center text-danger"
            >Adicione um produto para desconto.</p>
            <b-row
              v-for="(take,index) in record.promotion_has_take_product_per_campaign"
              :key="index"
            >
              <b-col md="7">
                <search-product
                  ref="searchProduct"
                  v-model="take.product_per_campaign"
                  :campaignId="record.campaign_id"
                  :disabled="campaign == null"
                />

                <p
                  class="text-danger"
                  v-if="submit && take.product_per_campaign == null "
                >Escolha 1 produto</p>
              </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=" ['#,##','##,##','###,##']"
                  placeholder="01,00"
                  v-model="take.discount"
                ></b-form-input>
              </b-col>

              <b-col md="1">
                <label for>&nbsp;</label>
                <a @click.prevent="removeTake(index)" class="btn btn-dark">
                  <font-awesome-icon class="text-light" icon="trash" />
                </a>
              </b-col>
              <p
                :class="{'text-danger': getValueDiscount(take) <0}"
                class="col-md-12"
                v-if="take.product_per_campaign != null"
              >
                <br />Valor do Produto:
                <strong>R$ {{ parseFloat(take.product_per_campaign.catalog_value) | formatCoin}}</strong>,
                com desconto sai por R$
                <strong>{{getValueDiscount(take) | formatCoin}}</strong>
              </p>
              <p
                class="col-md-12 text-center text-danger"
                v-if="getValueDiscount(take) <0"
              >Produto com Valor negativo</p>
              <hr width="70%" />
            </b-row>

            <b-row>
              <b-col md="12" class="text-right">
                <p style="padding-right: 1em;">
                  <br />
                  <a @click.prevent="addtake" class="btn btn-dark">
                    <font-awesome-icon class="text-light" icon="plus" />
                  </a>
                </p>
              </b-col>
            </b-row>
          </b-col>
          <!-- fim do leve -->
        </b-row>
      </b-col>
      <!-- Fim das listas -->

      <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="./PromotionDetail.js" lang="js" />
<style scoped lang="scss" src="./PromotionDetail.scss" />
