<template>
  <b-row>
    <b-col md="12">
      <table class="table table-responsive table-custom">
        <thead>
          <tr class="akkurat-regular">
            <!--th>Foto:</th-->
            <th>Código:</th>
            <th>Descrição do Produto:</th>
            <th>Catálogo:</th>
            <th>Quantidade</th>
            <th>Subtotal:</th>
            <th
              style="white-space: nowrap;"
            >A pagar/Lucro:</th>
            <th>&nbsp;</th>
          </tr>
        </thead>

        <tbody>
          <tr valign="middle" v-for="(product,index) in  orderProducts" :key="product.product_per_campaign.id">
            <!--td class="align-middle">
              <img src="@/assets/PR_1.png" alt="foto_do_produto" height="45px" />
            </td-->
            <td
              class="ref-tag align-middle akkurat-bold-italic"
            >{{product.product_per_campaign.product.code}}</td>
            <td class="align-middle text-left">
              <span
                class="bressay-bold-italic product-name"
              >{{product.product_per_campaign.product.name}}</span>
              <div class="text-left akkurat-light min-text">
                Categoria: {{product.product_per_campaign.product.product_subcategory.product_category.name}}
                | Página: {{product.product_per_campaign.page}}
                
                <span class="show-promotions" v-if="product.discount_promotion" @click="showPromotions(product)">

                  | Promoções aplicadas ({{product.promotions.length + (product.promotions_progressive !== null)}})
                </span>

<!-- Teste para ver valor de desconto da promoção  -->
                <span v-if="product.discount_promotion && false">({{product.discount_promotion}})</span>
              </div>
            </td>
            <td class="align-middle akkurat-light-regular">
              <span
                class="regular-price"
                v-if="product.product_per_campaign.regular_price != product.product_per_campaign.catalog_value"
              >R$ {{ parseFloat(product.product_per_campaign.regular_price) | formatCoin}}</span>
              <span
                class="catalog-price"
              >R$ {{ parseFloat(product.product_per_campaign.catalog_value) | formatCoin }}</span>
            </td>
            <td class="align-middle" width="135px">
              <input-qty :small="true" :value="product.quantity" :disabled="!product.product_per_campaign.digitable"  @change="updateQtyProduct(product.product_per_campaign,$event)" />
            </td>
            <td class="align-middle akkurat-bold-italic">
              <span
                class="amount-product"
              >R$ {{product.sub_total | formatCoin}}</span>
            </td>
            <td class="align-middle text-center akkurat-bold-italic">
              <span
                class="price-to-pay"
              >R$ {{ product.to_pay | formatCoin}}</span>

              <span
                class="profit"
              >R$ {{ product.sub_total - product.to_pay | formatCoin}}</span>
            </td>
            <td class="align-middle text-dark">
              <font-awesome-icon class="trash" @click="remove(index)" icon="trash-alt" />
            </td>
          </tr>
        </tbody>
      </table>
    </b-col>
    <show-promotions-applied-in-product-modal 
    :title="titleModalPromotion"
    :product="productModalPromotion"  
    :promotionsToShow="promotionsToShow"
    :promotionsProgressiveToShow="promotionsProgressiveToShow"
    @closed="clearShowPromotionsData"
     />
  </b-row>
</template>

<script>
import inputQty from "@/components/shared-components/inputs/inputQuantity";
import showPromotionsAppliedInProductModal from "@/components/modals/Order/showPromotionsAppliedInProduct";
export default {
  props: {
    value: {
      type: Array
    }
  },
    components: {
      inputQty,
      showPromotionsAppliedInProductModal
    },
  data: () =>{
    return {
      promotionsToShow: [],
      promotionsProgressiveToShow: null,
      titleModalPromotion: "",
      productModalPromotion: null,
    }

  },
  computed: {
    
    orderProducts(){
      return this.$store.getters. getOrder();
    }
  },

  methods: {
    showPromotions(product){
      this.promotionsToShow = product.promotions;
      this.promotionsProgressiveToShow = product.promotions_progressive;
      this.titleModalPromotion = product.product_per_campaign.product.name
      this.productModalPromotion = product;
      this.$modal.show('show-promotions-applied-in-product');
    },
    updateQtyProduct(product,value){
     
   

       this.$store.dispatch('updateProductQuantity',{product_per_campaign: product ,quantity: value});
      
    },
    remove(index) {
    this.$store.dispatch('removeProduct',index);
    },
    clearShowPromotionsData(){
      this.promotionsToShow = null;
    }
  }
};
</script>


<style lang="scss" >

.show-promotions{
  &:hover{
    text-decoration: underline;
    cursor: pointer;
  }
}


</style>