<template>
  <v-container class="white">
    <v-row class="mt-12" justify="center" v-if="fetchInProgress || updateProgress">
      <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
    </v-row>
    <v-row class="mb-md-10" v-else-if="!fetchErrorMessage">
      <v-col cols="1" class="d-none d-sm-block pr-4" v-if="productDetails.mediaGalleryEntries.length">
        <div v-for="(productImage,index) in productDetails.mediaGalleryEntries" v-bind:key="index">
          <div v-if="productImage.mediaType === 'image'">
            <v-col class="pb-2 pt-0 pl-0 pr-0">
              <v-hover v-slot:default="{ hover }">
                <v-card
                  outlined
                  @click="setSelected(productImage.file,index)"
                  :color="hover ? blue : white"
                  v-bind:class="{ 'primary': index==selected }"
                  tile
                  v-if="productImage.file"
                >
                  <v-img v-bind:src="imageBasePathUrl + productImage.file" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
                </v-card>
              </v-hover>
            </v-col>
          </div>
        </div>
      </v-col>
      <v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="productDetails.mediaGalleryEntries.length==0">
        <v-col class="pb-2 pt-0 px-0">
          <v-hover v-slot:default="{ hover }">
            <v-card
              outlined
              :color="hover ? blue : white"
              class="primary"
              tile
            >
              <v-img v-bind:src="imageBasePathUrl" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
            </v-card>
          </v-hover>
        </v-col>
      </v-col>
      <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-if="imagepath">
        <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
          <h1 class="text-uppercase font-weight-300 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
        </v-col>
        <v-img v-bind:src="imageBasePathUrl + imagepath" @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name" ></v-img>
      </v-col>
       <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else>
        <v-col class="d-block d-sm-none pa-0 ma-0 pb-5">
          <h1 class="text-uppercase font-weight-300 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
        </v-col>
        <v-img :src="imageBasePathUrl + (this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:'')"  @error="setAltImg()" :alt="productDetails.name" :title="productDetails.name"></v-img>
      </v-col>
      <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-if="productDetails.mediaGalleryEntries.length">
        <v-col
          v-for="(productImage,index) in productDetails.mediaGalleryEntries"
          v-bind:key="index"
          v-show="productImage.mediaType === 'image'"
          class="px-2"
          cols="3"
        >
          <v-hover v-slot:default="{ hover }">
            <v-card
              max-width="70"
              max-height="70"
              class="mx-auto"
              outlined
              @click="setSelected(productImage.file,index)"
              :color="hover ? blue : white"
              v-bind:class="{ 'primary': index==selected }"
              tile
              v-if="productImage.file"
            >
              <v-img
                v-bind:src="imageBasePathUrl + productImage.file"
                max-width="70"
                max-height="70"
                @error="setAltImg()"
                :alt="productImage.name" :title="productImage.name"
              ></v-img>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
      <v-row align="center" class="d-flex d-sm-none mx-auto px-1" v-else-if="productDetails.mediaGalleryEntries.length==0">
        <v-col
          class="px-2"
          cols="3"
        >
          <v-hover v-slot:default="{ hover }">
            <v-card
              max-width="70"
              max-height="70"
              class="mx-auto primary"
              outlined
              :color="hover ? blue : white"
              tile
            >
              <v-img
                v-bind:src="imageBasePathUrl+''"
                max-width="70"
                max-height="70"
                @error="setAltImg()"
                 :alt="productDetails.name" :title="productDetails.name"
              ></v-img>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
      <!-- <v-progress-circular :size="60" color="primary" indeterminate v-if="fetchInProgress"></v-progress-circular>-->
      <v-col cols="12" sm="4" md="4" v-if="productDetails.customAttribute" class="pl-md-12">
        <v-row>
          <v-col md="12" cols="12" class="pr-0 pt-0">
            <h1
              class="font-weight-300 d-none d-sm-block fontsize-28 regular-font line-height-36 title-color-black text-uppercase ma-0 pa-0 ls-n01"
            >{{ productDetails.name}}</h1>
            <p
              class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
            >{{productDetails.sku}}</p>
          </v-col>
          <!--<v-col md="1" cols="2" align="right" justify="right" class="pl-0 pt-0">
            <v-icon light class="pt-1 d-none d-sm-block">mdi-heart-outline</v-icon>
            <v-icon light class="d-block d-sm-none productpage-icon">mdi-heart-outline</v-icon>
          </v-col>-->
        </v-row>
        <p
          class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
        >sku {{productDetails.sku}}</p>
        <p class="fontsize-16 line-height-21 body-font ls-n01 fontcolor-black-darken" v-html="productDetails.description"></p>
        <v-row class="pt-3">
          <v-col cols="6" sm="12" md="12" lg="5" class="pr-0 pb-0">
            <p
              class="body-font mb-0 caption ls-n008 fontcolor-grey-darken pb-1"
            >{{productDetails.unitDescription}}</p>
            <!-- <p
              class="body title-color-black"
            >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p> (old code )-->
            <p
              v-if="getCustomAttributeValue(productDetails.customAttribute,'lowest_price')"
              class="body title-color-black"
            >From ${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'lowest_price'), true)}} {{ productDetails.uom}}</p>
            <div v-else class="fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300">
              <div v-if="getCustomAttributeValue(productDetails.customAttribute,'special_price') ">
                <s>${{priceFormatter( productDetails.price, true)}}</s> &nbsp;
                <span
                  class="red--text mb-0"
                >${{priceFormatter(getCustomAttributeValue(productDetails.customAttribute,'special_price'), true)}}</span>
                / {{ productDetails.uom}}
              </div>
              <p
                v-else
                class="body title-color-black"
              >${{priceFormatter(productDetails.price, true)}} / {{ productDetails.uom}}</p>
            </div>

            <!-- <p
              v-else
              class="body title-color-black"
            >${{Number(productDetails.price)}} / {{ productDetails.uom}}</p>-->
          </v-col>
          <v-col
            align="right"
            justify="right"
            cols="6"
            sm="12"
            md="12"
            lg="7"
            class="d-none d-sm-block pb-0"
          >
            <div
              v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
            >
              <v-hover v-slot:default="{ hover }">
                <v-select
                  :items="qtyPriceOptions"
                  class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
                  dense
                  attach
                  flat
                  solo
                  item-text="price"
                  item-value="qty"
                  single-line
                  v-model="selectedQty"
                  ref="selectedQty1"
                  background-color="transparent"
                  append-icon="mdi-plus"
                >
                  <template v-slot:selection="data">
                    <span
                      class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
                      :class="hover || !isActive?'primary--text':'black--text'"
                    >{{data.item.qty}} ($ {{ data.item.price }} )</span>
                  </template>
                  <template v-slot:item="data">
                    <template>
                      <v-list-item-content @click="isActive = true">
                        <v-list-item-title
                          class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
                        >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
                      </v-list-item-content>
                    </template>
                  </template>
                </v-select>
              </v-hover>
            </div>
            <div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')">
              <v-select
                :items="numberOptions"
                class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
                dense
                attach
                flat
                solo
                v-model="selectedQty"
                ref="selectedQty2"
                background-color="transparent"
                append-icon="mdi-plus"
              ></v-select>
            </div>
          </v-col>

          <v-col align="right" justify="right" cols="6" class="d-block d-sm-none pl-4 pb-0">
            <div
              v-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1') && productDetails.status=='1' && qtyPriceOptions.length > 0"
            >
              <v-hover v-slot:default="{ hover }">
                <v-select
                  :items="qtyPriceOptions"
                  class="word-break fontsize-14 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
                  dense
                  attach
                  flat
                  solo
                  item-text="price"
                  item-value="qty"
                  single-line
                  v-model="selectedQty"
                  ref="selectedQty3"
                  background-color="transparent"
                  append-icon="mdi-plus"
                >
                  <template v-slot:selection="data">
                    <span
                      class="fontsize-14 d-block text-truncate ml-1 line-height-21 ls-n009 regular-font font-weight-400"
                      :class="hover || !isActive?'primary--text':'black--text'"
                    >{{data.item.qty}} ($ {{ data.item.price }} )</span>
                  </template>
                  <template v-slot:item="data">
                    <template>
                      <v-list-item-content @click="isActive = true">
                        <v-list-item-title
                          class="fontsize-16 line-height-21 ls-n009 regular-font font-weight-400"
                        >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
                      </v-list-item-content>
                    </template>
                  </template>
                </v-select>
              </v-hover>
            </div>
            <div v-else-if="productDetails.status=='1'&&(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')">
              <v-hover v-slot:default="{ hover }">
                <v-select
                  :items="numberOptions"
                  class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 productpage-select-button select-change-icon"
                  dense
                  attach
                  flat
                  solo
                  outlined
                  :class="hover?'primary--text':'black--text'"
                  v-model="selectedQty"
                  background-color="transparent"
                  ref="selectedQty4"
                  append-icon="mdi-plus"
                ></v-select>
              </v-hover>
            </div>
          </v-col>
        </v-row>
        <!--<v-row>
          <v-col cols="auto" class="pr-0 pt-0">
            <div v-for="(colors,index) in productDetails.customAttribute" v-bind:key="index">
              <div v-if="colors.attributeCode === 'color'">
                <v-btn-toggle
                  v-for="(color,index) in colors.value"
                  v-bind:key="index"
                  v-model="selected"
                  :color="color"
                  group
                  rounded
                >
                  <v-btn
                    elevation="0"
                    class="ml-0 mr-2"
                    @click="setValue(color)"
                    :color="color"
                    :value="color"
                    small
                  ></v-btn>
                </v-btn-toggle>
              </div>
            </div>
          </v-col>
        </v-row>-->
        <p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
        <p class="py-0 my-0 red--text">{{ errorMessage }}</p>
        <v-row v-if="!itemId">
          <v-col
            class="pt-4"
            v-if="productDetails.status=='1' && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0' ) && stockFlag"
          >
            <v-hover v-slot:default="{ hover }">
              <v-btn
                :disabled="inProgress"
                block
                x-large
                :outlined="!inProgress ? hover:false"
                :color="hover?'white':'primary'"
                :class="hover?'primary--text':'white--text'"
                class="text-uppercase ls-0 body productpage-button"
                tile
                depressed
                @click="addToCart(productDetails.sku,productDetails)"
              >
                <v-progress-circular
                  align="center"
                  :size="40"
                  block
                  color="primary"
                  indeterminate
                  v-if="inProgress"
                ></v-progress-circular>
               <span v-if="!inProgress">ADD TO CART</span>
              </v-btn>
            </v-hover>
          </v-col>
          <v-col
            v-else-if="(getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '1')  && productDetails.status=='1'&& qtyPriceOptions.length > 0 && stockFlag"
          >
            <v-hover v-slot:default="{ hover }">
              <v-btn
                block
                x-large
                class="text-uppercase ls-0 body pb-1 productpage-button"
                :outlined="!hover"
                :color="hover?'primary':'white'"
                :class="hover?'white--text':'primary--text'"
                tile
                depressed
                @click="gotoPersonalize(productDetails)"
              >PERSONALIZE</v-btn>
            </v-hover>
          </v-col>
          <v-col class="pt-4" v-if="productDetails.status=='2' || !stockFlag">
            <v-btn
              block
              x-large
              class="text-uppercase ls-0 body pb-1 white--text"
              tile
              color="#97ABB4"
              depressed
            >UNAVAILABLE</v-btn>
          </v-col>
          </v-row>

          <v-row v-else> 
          <v-col
            class="pt-4"
            v-if="itemId && (getCustomAttributeValue(productDetails.customAttribute,'is_personalize')=== '0')"
          >
            <v-hover v-slot:default="{ hover }">
              <v-btn
                :disabled="inProgress"
                block
                x-large
                depressed
                :outlined="!inProgress ? hover:false"
                :color="hover?'white':'primary'"
                :class="hover?'primary--text':'white--text'"
                class="text-uppercase ls-0 body productpage-button"
                tile
                @click="updateToCart(productDetails.name,productDetails.sku)"
              >
                <v-progress-circular
                  align="center"
                  :size="40"
                  color="primary"
                  indeterminate
                  v-if="inProgress"
                ></v-progress-circular>
                <span v-if="!inProgress">UPDATE CART</span>
              </v-btn>
            </v-hover>
          </v-col>
        </v-row>
        <v-row>
          
        </v-row>
        <v-row>
          <v-col class="pt-5">
            <v-tabs color="black" class="product-overview-tabs">
              <v-tab class="fontsize-14 regular-font ls-n008">Overview</v-tab>
              <v-tab-item>
                <ul class="py-3 fontsize-16 body-font ls-n008">
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_def_type")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_def_type")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"unit_description")'>{{getCustomAttributeLable(productDetails.customAttribute,"unit_description")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")'>{{getCustomAttributeLable(productDetails.customAttribute,"product_dimensions")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"printing_process")'>Printing Process - {{getCustomAttributeLable(productDetails.customAttribute,"printing_process")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_1")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_2")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_3")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_4")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_5")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")'>{{getCustomAttributeLable(productDetails.customAttribute,"additional_feature_6")}}</li>
                </ul>
              </v-tab-item>
              <v-tab class="fontsize-14 regular-font ls-n008">Materials</v-tab>
              <v-tab-item>
                <ul class="py-3 fontsize-16 body-font ls-n008">
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")'>{{getCustomAttributeLable(productDetails.customAttribute,"cotton_paper")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"paper_weight")'>{{getCustomAttributeLable(productDetails.customAttribute,"paper_weight")}}</li>
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"made_usa")'>{{getCustomAttributeLable(productDetails.customAttribute,"made_usa")}}</li>
                </ul>
              </v-tab-item>
              <v-tab class="fontsize-14 regular-font ls-n008">Shipping</v-tab>
              <v-tab-item>
                <ul class="py-3 fontsize-16 body-font ls-n008">
                  <li v-if='getCustomAttributeLable(productDetails.customAttribute,"processing_time")'>{{getCustomAttributeLable(productDetails.customAttribute,"processing_time")}}</li>
                  <li>Standard shipping available</li>
                  <li>Expedited shipping available</li>
                  <li>Ships from Cohoes, NY</li>
                </ul>
              </v-tab-item>
            </v-tabs>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <v-row v-else>
      <v-col class="text-center">
        <v-alert type="error" text>{{fetchErrorMessage}}</v-alert>
      </v-col>
    </v-row>
    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
  </v-container>
</template>
<script>
const personlizeUrl = process.env.VUE_APP_PERSONALIZE_URL;
const retailorId = process.env.VUE_APP_RETAILOR_ID;
import * as easings from "vuetify/es5/services/goto/easing-patterns";
import SnackbarComponent from "@/components/common/SnackbarComponent";
import { priceFormatter, getLable, customAttributeValue ,googleAanalytics,googleAanalyticsEvent, criteoForCurrentProduct ,setCategoryNameInLocal} from "@/services/util.service";
//import { getAuthUser } from "@/services/auth";
/* eslint-disable no-alert, no-console ,  no-debugger */
export default {
  name: "ProductDetailsComponent",
  props: ["productDetails","stockFlag","categoryId"],
  components: { SnackbarComponent },
  data: () => ({
    productDefaultImage:require('@/assets/defaultProduct.jpg'),
    updateProgress: "",
    dropDownIcon: "mdi mdi-plus",
    iconColor: "black--text",
    isActive: true,
    easings: Object.keys(easings),
    snackbar: {
      show: false,
      message: null,
      color: null,
      timeout: 0
    },
    selectedQty: "",
    blue: "primary",
    white: "white",
    errorMessage: "",
    itemNumber: "193C",
    quantity: "25",
    savFromKey: "Ub07GxNhS3yyoDfO",
    ccId: "766a5cef-6b51-4ab4-9f25-6446c4c8baeb",
    selected: "",
    imagepath: "",
    fav: true,
    menu: false,
    message: false,
    hints: true,
    priceOptions: [
      { text: "31 ($110.00)", callback: () => "31 ($110.00)" },
      { text: "32 ($110.00)", callback: () => "32 ($110.00)" },
      { text: "33 ($110.00)", callback: () => "33 ($110.00)" }
    ],
    priceFormatter: priceFormatter,
    /*numberOptions: [
      { qty: "1 ", callback: () => "1" },
      { qty: "2", callback: () => "2" },
      { qty: "3", callback: () => "3" }
    ]*/
  }),
  computed: {
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_PATH_URL;
    },
    /*  productAttributes() {
      return this.$store.state.productList.attributeList;
    },*/
    sku: function() {
      return this.$route.meta.sku ? this.$route.meta.sku : this.$route.params.sku;
    },
    itemId: function() {
      this.pageScrollUp();
      return this.$route.query.itemId;
    },
    qty: function() {
      return this.$route.query.qty;
    },
    /*numberOptions: function() {
      let nums = [];
      for (let i = 0; i <= 98; i++) {
        nums[i] = i + 1;
      }
      if (nums.length > 0) return nums;
      else return "";
    },*/
    qtyPriceOptions() {
      let vm = this;
      let qtyPriceArray = this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "qty_price"
        );
      if(qtyPriceArray){
        let list = JSON.parse(
            this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "qty_price"
        )
        );
        if (this.qty) {
          vm.selectedQty = this.qty.toString();
        } else {
          vm.selectedQty = list[0].qty;
        }
        vm.validPersonalisedProduct = true;
        return list;
      }else{
        vm.validPersonalisedProduct = false;
      }
      return [];
    },
    numberOptions: function() {
      let vm = this;
      if (this.productDetails.customAttribute) {
        let minSalesQty = this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "ba_min_sales_qty"
        );
        let qtyIncrements = this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "ba_qty_increments"
        );
        minSalesQty = Number(minSalesQty) ? Number(minSalesQty) : 1;
        qtyIncrements = Number(qtyIncrements) ? Number(qtyIncrements) : 1;

        let nums = [];
        nums[0] = minSalesQty;
        if (this.qty) {
          vm.selectedQty = Number(this.qty);
        } else {
          vm.selectedQty = minSalesQty;
        }
        for (let i = 1; i <= 98; i++) {
          minSalesQty = minSalesQty + qtyIncrements;
          nums[i] = minSalesQty;
        }
        if (nums.length > 0) return nums;
        else return "";

        // return minSalesQty + "   " + qtyIncrements;
      } else {
        return "";
      }
    },
    userAuth: function() {
      return this.$store.state.auth.userAuth;
    },
    
    inProgress: function() {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.inProgress;
      } else {
        return this.$store.state.cartProduct.inProgress;
      }
    },
    fetchInProgress: function() {
      return this.$store.state.productOne.fetchInProgress;
    },
    fetchErrorMessage: function() {
      return this.$store.state.productOne.errorMessage;
    }
  },
  watch: {
    productDetails() {
      this.imagepath = this.productDetails.mediaGalleryEntries && this.productDetails.mediaGalleryEntries.length ? this.productDetails.mediaGalleryEntries[0].file:"";
      criteoForCurrentProduct(this.productDetails.id);
    }
    /* qtyPriceOptions()
    {
      if(this.qtyPriceOptions.length > 0)
      this.selectedQty=this.qtyPriceOptions[0];
    }*/
  },
  methods: {
    setAltImg() {
      event.target.src =this.productDefaultImage
    },
    getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValue(customAttributes, attributeCode);
    },
    addToCart(sku,productDetails) {
      let vm =this;
      let qtyNew=this.selectedQty;
      if (this.selectedQty) {
        this.errorMessage = "";
        if (this.userAuth) {
          this.$store
            .dispatch("userCartProduct/addToCart", {
              sku: sku,
              qty: this.selectedQty,
              ccid: null,
              price: null,
              personalizeDetails: null
            })
            .then((res) => {
             googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
             if(this.categoryId)
             {
              setCategoryNameInLocal(this.categoryId,res);
             }
              
              this.$store.dispatch("userCartProduct/cartProductList");
             // this.$store.dispatch("userCartProduct/productTotalAmt");
              this.$store.dispatch("userCartProduct/cartDrawer", true);
              this.snackbar = {
                message: "Product Added Successfully",
                color: "success",
                show: true,
                timeout: 2000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            })
            .catch(error => {
              this.snackbar = {
                message: error.message,
                color: "error",
                show: true,
                timeout: 2000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            });
        } else {
          this.$store
            .dispatch("cartProduct/addToCart", {
              sku: sku,
              qty: this.selectedQty,
              ccid: null,
              price: null,
              personalizeDetails: null
            })
            .then((res) => {
              googleAanalytics(vm,res,productDetails,qtyNew,'add_to_cart' ,'Ecommerce');
              if(this.categoryId)
              {
                setCategoryNameInLocal(this.categoryId,res);
              }
              this.snackbar = {
                message: "Product Added Successfully",
                color: "success",
                show: true,
                timeout: 2000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            })
            .catch(error => {
              this.snackbar = {
                message: error.message,
                color: "error",
                show: true,
                timeout: 2000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            });
        }
      } else {
        this.errorMessage = "Please Select Quantity";
      }
    },
    updateToCart(productName,sku) {
      if (this.selectedQty) {
        this.errorMessage = "";
        if (this.userAuth) {
          this.$store
            .dispatch("userCartProduct/updateToCart", {
              sku: sku,
              qty: this.selectedQty,
              itemId: this.itemId,
              ccid: null,
              price: null,
              personalizeDetails: null
            })
            .then(() => {
              this.snackbar = {
                message: "Product Updated Successfully",
                color: "success",
                show: true,
                timeout: 3000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            })
            .catch(error => {
              this.snackbar = {
                message: error.message,
                color: "error",
                show: true,
                timeout: 3000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            });
        } else {
          this.$store
            .dispatch("cartProduct/updateToCart", {
              sku: sku,
              qty: this.selectedQty,
              itemId: this.itemId,
              ccid: null,
              price: null,
              personalizeDetails: null
            })
            .then(() => {
              this.snackbar = {
                message: "Product Updated Successfully",
                color: "success",
                show: true,
                timeout: 3000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            })
            .catch(error => {
              this.snackbar = {
                message: error.message,
                color: "error",
                show: true,
                timeout: 3000
              };
              // setTimeout(() => {
              //   this.$router.push({
              //     name: "CategoryPage",
              //     params: { category: "stationery" }
              //   });
              // }, 5000);
            });
        }
        if(this.$route.name == productName)
          this.$router.push({
            name: productName,
            query: { "qty": this.selectedQty, "itemId": this.itemId }
          }).catch(error => {
            error;
        });
      } else {
        this.errorMessage = "Please Select Quantity";
      }
    },
    /* getAttribute(customAttributes, attributeCode) {
      return attribute(customAttributes, attributeCode, this.productAttributes);
    },*/
    getCustomAttributeLable(customAttributes, attributeCode) {
      return getLable(customAttributes, attributeCode);
    },

    setValue(color) {
      return (this.selected = color) && (this.errorMessage = "");
    },
    submit() {
      if (this.selected !== "") {
        return (this.selected = "") && (this.errorMessage = "");
      } else {
        this.errorMessage = "Please Select Color";
      }
    },
    gotoPersonalize(productDetails) {
      debugger
      // window.open(`${personlizeUrl}/product/${this.sku}`, "_self");
      if (
        this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "builder_version"
        ) === "1.0" ||
        this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "builder_version"
        ) === ""
      ) {
        googleAanalyticsEvent('personalize_cc', 'ecommerce', productDetails);
        this.$router.push({
          name: "CraneConnection",
          params: {
            retailorId: retailorId,
            quantity: this.selectedQty,
            itemNumber: this.sku
          }
        });
      } else {
        let itemCode = this.itemId ? this.itemId : "new";
        googleAanalyticsEvent('personalize_builder', 'ecommerce', productDetails);
        debugger
        if(this.categoryId)
        {
         window.open(
          `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}?categoryId=${this.categoryId}`,
          "_self"
        );
        }
        else
        {
         window.open(
          `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}`,
          "_self"
        );
        }
        
      }
    },
    setSelected(part, index) {
      this.imagepath = part;
      this.selected = index;
    },
    pageScrollUp() {
      if (this.$refs.divOne)
        this.$vuetify.goTo(this.$refs.divOne, {
          duration: 300,
          easing: "easeInOutCubic"
        });
      this.updateProgress = true;
      setTimeout(() => {
        this.updateProgress = false;
      }, 3000);
    }
  },
  mounted() {
    this.pageScrollUp();
  },
  created() {
    if (this.itemId) {
      this.updateProgress = true;
      setTimeout(() => {
        this.updateProgress = false;
      }, 3000);
    }
  }
};
</script>
<style lang="scss">
.overflow-button .v-select__slot {
  border-left: 1px solid #dcdddd !important;
  border-right: 1px solid #dcdddd !important;
}
.product-overview-tabs .v-tabs-slider-wrapper {
  color: #2850da;
  height: 4px !important;
}
.overflow-button.v-overflow-btn.v-input--is-focused .v-input__slot {
  box-shadow: none !important;
  border-top: 1px solid #dcdddd !important;
  border-bottom: 1px solid #dcdddd !important;
  border-radius: 0px !important;
}
/*.v-autocomplete__content.v-menu__content {
  box-shadow: none !important;
  border: 1px solid #dcdddd !important;
}*/
.v-menu__content {
  box-shadow: none !important;
  outline: 1px solid #2850da !important;
  //border-right: 1px solid #2850da !important;
  //border-bottom: 1px solid #2850da !important;
  border-radius: 0px !important;
}
.product-overview-tabs .v-tabs-items {
  background-color: transparent !important;
}
.product-overview-tabs .v-tabs-bar {
  background-color: transparent !important;
  height: 35px !important;
}
.product-overview-tabs .v-slide-group__prev {
  display: none !important;
}
.v-text-field .v-input__control {
  border-radius: unset !important;
}
.productpage-select-button .v-input__control .v-input__slot {
  border: thin solid #8b8b8b !important;
}
.productpage-select-button:hover .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.productpage-select-button.v-input--is-label-active.v-input--is-focused
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.productpage-select-button:hover
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.productpage-select-button:hover .v-input__append-inner .v-input__icon .v-icon {
  color: #2850da !important;
}
.productpage-select-button .v-input__append-inner .v-input__icon .v-icon {
  font-size:20px !important;
}
.productpage-select-button.v-input--is-label-active.v-input--is-focused
  .v-input__control
  .v-input__slot {
  border: thin solid #2850da !important;
}
/*.productpage-select-button.v-text-field.v-text-field--solo
  .v-input__append-inner{
  -ms-flex-item-align: center;
  align-self: center;
  padding-top: 7px;
  border-left: 1px solid #8b8b8b;
  padding-left: 10px;
  height: 37px;
}*/
.productpage-select-button.v-text-field.v-text-field--solo.v-select--is-menu-active .v-input__append-inner{
  -ms-flex-item-align: center;
  align-self: center;
  padding-top: 7px;
  border-left: 1px solid #2850da;
  padding-left: 12px !important;
  height: 37px;
}
.productpage-select-button .v-input__control .v-select__slot .v-select__selections{
  justify-content: center;
}
.productpage-select-button.v-select.v-text-field input{
   display:none;
}
.productpage-select-button .v-input__control .v-input__slot{
  padding-left:0px !important;
}
//productpage-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo.v-input__append-inner
/*.productpage-select-button.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
  > .v-input__control
  > .v-input__slot {
  padding: 0 !important;
}
.productpage-select-button .v-select__slot {
  border: thin solid #dcdddd;
  height: 48px;
}
.productpage-select-button .v-select__slot:hover {
  border: thin solid #2850da !important;
  height: 48px;
}
.productpage-select-button .v-input__icon.v-input__icon--append {
  padding-right: 15px;
}
.productpage-select-button.v-select.v-input--dense .v-select__selection--comma {
  margin-left: 10px;
}
.productpage-select-button.v-text-field.v-text-field--solo
  .v-input__append-inner,
.v-text-field.v-text-field--solo .v-input__prepend-inner {
  -ms-flex-item-align: center;
  align-self: center;
  margin-top: 0;
  border-left: 1px solid #dcdddd;
  height: 48px;
  padding-top: 12px;
  padding-left: 15px;
}*/
</style>
<style src="./ProductDetailComponent.scss" lang="scss"/>