<template>
  <div>
    <card-right title="Sugestões de Compra" subTitle="Aproveite e compre também">
      <template slot="icon">
        <font-awesome-icon class="icon bg-primary text-light" icon="shopping-basket" />
      </template>

      <template slot="body">
        <div class="products">
          <b-row v-for="row in products" :key="row.id">
            <b-col md="10">
              <span class="name bressay-bold-italic text-left"> ({{row.product.code}}) {{row.product.name}}</span>

              <span
                class="price akkurat-light-regular text-left"
              >de R$ {{row.regular_price}} por R$ {{row.catalog_value}}</span>
            </b-col>

            <b-col md="2" class="align-middle" @click="addProduct(row)">
              <font-awesome-icon class="shopping-basket text-primary" icon="shopping-basket" />
            </b-col>
          </b-row>
        </div>
       <b-alert variant="success" class="text-center" :show="products.length === 0">não há sugestão de produto.</b-alert>    
      </template>

      <template slot="btn-more">
        <b-button class="btn-more btn-primary" @click="showModal">Ver todas as Sugestões</b-button>
      </template>
   

</card-right>

<suggesteds-modal></suggesteds-modal>

</div>

</template>

<script>
import cardRight from "./CardRightList";
import SuggestedsModal from "@/components/modals/Order/SuggestedsProducts";
export default {
  components: {
    cardRight,
    SuggestedsModal
  },
  data: () => {
    return {};
  },
  computed: {
    products() {
      return this.$store.getters.getSuggestedProducts;
    }
  },
  methods: {
    showModal() {
      this.$modal.show("suggested-modal");
    },
    addProduct(productPerCampaign) {
      console.log(productPerCampaign);
      this.$store.dispatch("updateOrder", {
        product_per_campaign: productPerCampaign,
        quantity: 1
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.icon {
  svg {
    background: #edc52680 0% 0% no-repeat padding-box;
    color: #edc526;
  }
}

.btn-more {
  background: #edc526 0% 0% no-repeat padding-box;
  border-radius: 20px;
  border: none;
  margin: 10px 0px;
}

.products {
  .row:not(:last-child) {
    border-bottom: 1px solid #979797;
  }

  .row {
    margin: 0px !important;

    padding: 6px 0px;

    .name {
      display: block;
      letter-spacing: 0;
      color: #3e3e3e;
      font-size: 0.7em;
    }

    .price {
      display: block;
      letter-spacing: 0;
      color: #2c2c2c;
      font-size: 0.7em;
    }
    .shopping-basket {
      &:hover {
        cursor: pointer;
       
        padding: 3px;
        height: 28px;
        width: 28px;
        border-radius: 50%;
      }
    }
  }
}
</style>