<template>
  <v-container class="py-0 pa-sm-3 white">
    <v-row no-gutters justify="center" class="pa-0 mt-md-12 mt-sm-10">
      <div class="hr-line-100px"></div>
    </v-row>
    <!-----------  mobile view -------->
    <v-content align="center" class="pa-0 mt-md-5 mt-5 mb-4 d-sm-none ls-n01">
      <p
        class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
      >Related</p>
      <p
        class="text-uppercase fontsize-28 regular-font mx-2 px-2 mb-0 text-center line-height-36"
      >Products</p>
    </v-content>
    <!-----------  mobile view end -------->
    <v-content align="center" class="pa-0 mt-md-5 mt-5 d-none d-sm-block ls-n01">
      <p
        class="text-uppercase fontsize-28 mt-5 mb-9 mx-2 px-2 text-center line-height-36 regular-font"
      >Related Products</p>
    </v-content>
    <v-row no-gutters>
      <v-container class="pa-0 pa-sm-3">
        <v-col lg="12" md="12" cols="12" sm="12" class="pa-0 pa-sm-3">
          <vueper-slides
            class="no-shadow mb-0"
            :visible-slides="perSlides"
            :dragging-distance="1"
            :fixed-height="slideHeight"
            :touchable="false"
          >
            <vueper-slide v-for="(products, index) in relatedProducts" v-bind:key="index">
              <template v-slot:content>
                <div class="vueperslide__content-wrapper vueperslide__title">
                  <v-card
                    tile
                    class="transparent-background relatedproducts-image-card vueperslide__title px-sm-4 py-3"
                    @click="OpenProductDetails(products.name)"
                    flat
                  >
                    <v-img
                      v-bind:src="imageBasePathUrl + products.image[0].file"
                      height="auto"
                      :max-height="imageMaxHeight"
                      width="100%"
                     :alt="products.name" :title="products.name"
                    >
                      <!--<div class="text-right">
                            <v-icon icon class="pa-4 white--text">mdi-heart-outline</v-icon>
                      </div>-->
                    </v-img>
                    <v-row no-gutters class="pt-4">
                      <v-col class="pb-0" cols="6">
                        <h1
                          class="font-weight-300 text-left mb-3 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
                        >{{products.name}}</h1>
                      </v-col>
                     <!-- <v-col class="pb-0" cols="6">
                        <p
                          class="text-right mb-0 fontsize-14 regular-font relatedproduct-fcolor-black-darken-2 ls-n009 word_break"
                        >${{Number(products.price)}}/ {{products.uom}}</p>
                      </v-col>-->
                      <v-col class="py-0" cols="12">
                        <p
                          class="mb-3 text-left fontsize-14 body-font ls-n009 word_break fontcolor-grey-darken"
                        >{{products.unitDiscription}}</p>
                      </v-col>
                      <!-- <v-col class="py-0 d-none d-sm-block" sm="12">
                        <div v-for="(items, index) in products.customAttributes" :key="index">
                          <div v-if="items.attributeCode === 'color'">
                            <v-row no-gutters>
                              <v-col
                                v-for="(color,index) in items.value"
                                v-bind:key="index"
                                class="mr-2 mr-md-1 pa-0"
                                cols="1"
                              >
                                <v-btn
                                  :color="color"
                                  fab
                                  depressed
                                  max-height="16px"
                                  max-width="16px"
                                ></v-btn>
                              </v-col>
                            </v-row>
                          </div>
                        </div>
                      </v-col>-->
                    </v-row>
                  </v-card>
                </div>
              </template>
            </vueper-slide>
          </vueper-slides>
        </v-col>
      </v-container>
    </v-row>
  </v-container>
</template>
 <script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";
//const personlizeUrl = process.env.VUE_APP_PERSONALIZE_URL;
export default {
  name: "RelatedProductsComponent",
  props: ["relatedProducts"],
  components: {
    VueperSlides,
    VueperSlide
  },
  computed: {
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_PATH_URL;
    },
    perSlides: function() {
      if (this.$vuetify.breakpoint.xsOnly) return 1;
      else if (this.$vuetify.breakpoint.smOnly) return 3;
      else return this.$vuetify.breakpoint.mdAndUp ? 4 : 4;
    },
    slideHeight: function() {
      return this.$vuetify.breakpoint.xsOnly ? "400px" : "350px";
    },
    showArrows: function() {
      if (this.$vuetify.breakpoint.smAndDown) return false;
      else return true;
    },
    imageMaxHeight: function() {
      if (this.$vuetify.breakpoint.xsOnly) return "250px";
      else return "300px";
    }
  },

  data() {
    return {};
  },
  methods: {
    OpenProductDetails(productsName) {
      this.$router.push({
        name: productsName,
      })
        .catch(error => {
          error;
        });
    }
  }
};
</script>
<style src="./RelatedProductsComponent.scss" lang="scss" scopped/>