<template>
  <v-container class="white">
    <v-row class="mb-md-10">
      <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-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 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 h3 ma-0 pa-0 ls-n01 title-color-black">{{ productDetails.name }}</h1>
        </v-col>
        <v-img v-bind: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="pl-4 pr-3 d-flex d-sm-none 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"
        >
          <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="productDetails.name" :title="productDetails.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-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">
            <p
              class="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}}</p>
            <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-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>
        <div v-show="!inProgress">
        <div v-if="!fetchInProgress">
          <v-form ref="giftCardForm" v-model="valid">
            <v-row class>
              <v-col cols="12" sm="6" md="6" class="pb-0">
                <p class="body body-font mb-0 ls-n01 fontcolor-black-darken">Amount</p>
                <div v-if="getCustomAttributeLable(productDetails.customAttribute,'giftcard_amounts')"
                >
                <div v-show="!userAuth">
                  <v-hover v-slot:default="{ hover }">
                <v-select
                    :items="giftPriceOptions()"
                    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="value"
                    item-value="value"
                    single-line
                    v-model="giftCardAmtGuest"
                    ref="selectedGiftCardAmt"
                    background-color="transparent"
                    append-icon="mdi-plus"
                    :rules="!userAuth? priceRules:[]"
                    label="Choose an Amount"
                    required
                    :class="giftCardAmtGuest ?  '':'v-select-error-border'"
                  >
                    <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.websiteValue}}</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.websiteValue}}</v-list-item-title>
                        </v-list-item-content>
                      </template>
                    </template>
                  </v-select>
                </v-hover>
                </div>
                <div v-show="userAuth">
                  <v-hover v-slot:default="{ hover }">
                <v-select
                    :items="giftPriceOptions()"
                    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="value"
                    item-value="value"
                    single-line
                    v-model="giftCardAmt"
                    ref="selectedGiftCardAmt"
                    background-color="transparent"
                    append-icon="mdi-plus"
                    :rules="userAuth? priceRules:[]"
                    label="Choose an Amount"
                    required
                    :class=" giftCardAmt ?  '':'v-select-error-border'"
                  >
                    <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.websiteValue}}</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.websiteValue}}</v-list-item-title>
                        </v-list-item-content>
                      </template>
                    </template>
                  </v-select>
                </v-hover>
                </div>
                </div>
                <div v-else>
                  <h2 class="body-font mb-0 ls-n01 fontcolor-black-darken">${{productDetails.price}}</h2>
                </div> 
              </v-col>
              <v-col align="right" justify="right" cols="12" sm="6" md="6" class="pb-0">
                <p class="body body-font ls-n01 mb-0 fontcolor-black-darken text-left">Qty</p>
                <div
                  v-if="getCustomAttributeLable(productDetails.customAttribute,'qty_price') && productDetails.status=='1' "
                >
                  <v-overflow-btn
                    right
                    class="body title-color-black py-0 mt-0 overflow-button"
                    :items="JSON.parse(getCustomAttributeLable(productDetails.customAttribute,'qty_price'))"
                    label="30 ($110.00)"
                    segmented
                    dense
                    target="#dropdown-example"
                    item-text="price"
                    item-value="qty"
                    single-line
                    elevation="0"
                    v-model="selectedQty"
                  >
                    <template v-slot:selection="data">
                      <span>{{data.item.qty}} ($ {{ data.item.price }} )</span>
                    </template>
                    <template v-slot:item="data">
                      <template>
                        <v-list-item-content>
                          <v-list-item-title
                            class="text-uppercase"
                          >{{data.item.qty}} ($ {{ data.item.price }} )</v-list-item-title>
                        </v-list-item-content>
                      </template>
                    </template>
                  </v-overflow-btn>
                </div>
                <div v-else-if="productDetails.status=='1'">
                  <!--<v-overflow-btn
                    v-model="giftCardAmt"
                    right
                    dense
                    class="body title-color-black py-0 mt-0 overflow-button"
                    :items="numberOptions"
                    elevation="0"
                    label="Select Quantity"
                    :rules="[v => !!v || 'Please select the Quantity']"
                  ></v-overflow-btn>-->
                  <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"
                    background-color="transparent"
                    ref="selectedQty4"
                    append-icon="mdi-plus"
                    :rules="[v => !!v || 'Please select the Quantity']"
                  ></v-select>
                </div>
              </v-col>
            </v-row>
            <v-row v-show="!userAuth">
              <v-col cols="12" class="pb-1">
                <v-text-field
                  label="Sender Name"
                  ref="fullName"
                  v-model="senderNameGuest"
                  :rules="!userAuth? textRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>
                <v-text-field
                  label="Sender Email"
                  ref="email"
                  type="email"
                  id="senderEmail"
                  v-model="senderEmailGuest"
                  :rules="!userAuth? emailRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>
              </v-col>

              <v-col cols="12" class="py-0">
                <v-text-field
                  label="Recipient Name"
                  ref="fullName"
                  v-model="recipientNameGuest"
                  :rules="!userAuth? textRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>

                <v-text-field
                  label="Recipient Email"
                  ref="email"
                  v-model="recipientEmailGuest"
                  type="email"
                  id="recipientEmail"
                  :rules="!userAuth? emailRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>
              </v-col>
              <v-col cols="12" class="py-0">
                <v-textarea outlined auto-grow rows="5" v-model="senderMessageGuest"></v-textarea>
              </v-col>
            </v-row>
            <v-row v-show="userAuth">
              <v-col cols="12" class="pb-1">
                <v-text-field
                  label="Sender Name"
                  ref="fullName"
                  v-model="firstname"
                  :rules="userAuth? textRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>
                <v-text-field
                  label="Sender Email"
                  ref="email"
                  type="email"
                  id="senderEmail"
                  v-model="email"
                  :rules="userAuth? emailRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>
              </v-col>
              <v-col cols="12" class="py-0">
                <v-text-field
                  label="Recipient Name"
                  ref="fullName"
                  v-model="recipientName"
                  :rules="userAuth? textRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>

                <v-text-field
                  label="Recipient Email"
                  ref="email"
                  v-model="recipientEmail"
                  type="email"
                  id="recipientEmail"
                  :rules="userAuth? emailRules:[]"
                  outlined
                  required
                  dense
                ></v-text-field>
              </v-col>
              <v-col cols="12" class="py-0">
                <v-textarea outlined auto-grow rows="5" v-model="senderMessage"></v-textarea>
              </v-col>
            </v-row>
          </v-form>
          <p class="py-0 my-0 red--text" v-if="productDetails.stockDetails.manageStock === 1 && productDetails.stockDetails.qty <= 0">{{ getCustomAttributeValue(productDetails.customAttribute,'backorder_status') }}</p>
        </div>
        <div v-else class="text-center">
          <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
        </div>
        </div>
    <v-row v-if="!itemId">
          <v-col
            class="pt-4"
            v-if="productDetails.status=='1' && 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="addToGiftCart(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 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-col class="pt-4" v-if="itemId">
            <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="updateToGiftCart(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-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,"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>
    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
  </v-container>
</template>
<script>
//const personlizeUrl = process.env.VUE_APP_PERSONALIZE_URL;
import SnackbarComponent from "@/components/common/SnackbarComponent";
import { getLable ,customAttributeValue,setCategoryNameInLocal} from "@/services/util.service";
import { createHelpers } from "vuex-map-fields";
import * as easings from "vuetify/es5/services/goto/easing-patterns";

const { mapFields: guest } = createHelpers({
  getterType: "cartProduct/getField",
  mutationType: "cartProduct/updateField"
});
const { mapFields: customer } = createHelpers({
  getterType: "userCartProduct/getField",
  mutationType: "userCartProduct/updateField"
});
const { mapFields: customerInfo } = createHelpers({
  getterType: "accountOne/getField",
  mutationType: "accountOne/updateField"
});
export default {
  name: "GiftCardDetailsComponent",
  props: ["productDetails","stockFlag","categoryId"],
  components: { SnackbarComponent },
  data: () => ({
    productDefaultImage:require('@/assets/defaultProduct.jpg'),
    isAmtActive: true,
    isQtyActive: true,
    isActive: true,
    easings: Object.keys(easings),
    snackbar: {
      show: false,
      message: null,
      color: null,
      timeout: 0
    },
    textRules: [
      v => !!v || "This field is required",
      v => (v && v.length >= 3) || "This field must be at least 3 characters"
    ],
    priceRules: [
      v => !!v || "This field is required"
    ],
     emailRules: [
      v => !!v || "Email Id is required",
      v => /.+@.+\..+/.test(v) || "Email Id must be valid"
    ],
    valid: true,
    selectedQty: "",
    blue: "primary",
    white: "white",
    errorMessage: "",
    selected: "",
    imagepath: "",
    fav: true,
    menu: false,
    message: false,
    hints: true,
  }),
/* eslint-disable no-alert, no-console ,  no-debugger */
  computed: {
    ...guest([
      "giftCartDetailsGuest",
      "giftCartDetailsGuest.senderNameGuest",
      "giftCartDetailsGuest.senderEmailGuest",
      "giftCartDetailsGuest.recipientNameGuest",
      "giftCartDetailsGuest.recipientEmailGuest",
      "giftCartDetailsGuest.senderMessageGuest",
      //"giftCartDetails.giftCardQty",
       "giftCartDetailsGuest.giftCardAmtGuest"
    ]),
    ...customer([
      "giftCartDetails",
      // "giftCartDetails.senderName",
      //"giftCartDetails.senderEmail",
      "giftCartDetails.recipientName",
      "giftCartDetails.recipientEmail",
      "giftCartDetails.senderMessage",
      //"giftCartDetails.giftCardQty",
       "giftCartDetails.giftCardAmt"
    ]),
    ...customerInfo(["one", "one.firstname", "one.email"]),
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_PATH_URL;
    },

    itemId: function() {
      this.pageScrollUp();
      return this.$route.query.itemId;
    },
    qty: function() {
      this.getMessageDetails();
      return this.$route.query.qty;
    },

    amtOptions: function() {
      if (this.productDetails.customAttribute) {
        let minSalesQty = this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "additional_feature_1"
        );
        let qtyIncrements = this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "ba_qty_increments"
        );
        minSalesQty = Number(minSalesQty) ? 50 : 50;
        qtyIncrements = Number(qtyIncrements) ? 25 : 25;

        let nums = [];
        nums[0] = minSalesQty;
        for (let i = 1; minSalesQty <= 750; i++) {
          minSalesQty = minSalesQty + qtyIncrements;
          nums[i] = minSalesQty;
        }
        if (nums.length > 0) return nums;
        else return "";

        // return minSalesQty + "   " + qtyIncrements;
      } else {
        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() {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.fetchInProgress;
      } else {
        return this.$store.state.cartProduct.fetchInProgress;
      }
    }
  },
  watch: {
    productDetails() {
      this.imagepath = this.productDetails.mediaGalleryEntries?this.productDetails.mediaGalleryEntries[0].file:"";
    }
  },
  methods: {
      getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValue(customAttributes, attributeCode);
    },
     setAltImg() { 
      event.target.src =this.productDefaultImage
    },
    giftPriceOptions() {
      let vm = this;
      let list = vm.getCustomAttributeLable(this.productDetails.customAttribute,'giftcard_amounts');
      return list;
    },
    addToGiftCart(sku,productDetails) {
      if (this.$refs.giftCardForm.validate()) {
       let vm =this;
        let qtyNew=this.selectedQty;
        if (this.userAuth) {
          this.$store
            .dispatch("userCartProduct/addToGiftCart", {
              sku: sku,
              qty: this.selectedQty,
              senderName: this.one.firstname,
              senderEmail: this.one.email
            })
            .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
              };
            })
            .catch(error => {
              this.snackbar = {
                message: error.message,
                color: "error",
                show: true,
                timeout: 2000
              };
            });
        } else {
          this.$store
            .dispatch("cartProduct/addToGiftCart", {
              sku: sku,
              qty: this.selectedQty
            })
            .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
              };
            })
            .catch(error => {
              this.snackbar = {
                message: error.message,
                color: "error",
                show: true,
                timeout: 2000
              };
            });
        }
      }
    },
  async  updateToGiftCart(productName,sku) {
      if (this.selectedQty) {
        this.errorMessage = "";
        if (this.userAuth) {
          try{
            await this.$store.dispatch("userCartProduct/updateToGiftCart", {
              sku: sku,
              qty: this.selectedQty,
              itemId: this.itemId,
              senderName: this.one.firstname,
              senderEmail: this.one.email
            });
            this.snackbar = {
                message: "Product Updated Successfully",
                color: "success",
                show: true,
                timeout: 3000
              };
          }
          catch(error){
            this.snackbar = {
                message: error.message,
                color: "error",
                show: true,
                timeout: 3000
              };
          }      
        } 
        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";
      }
    },
    getCustomAttributeLable(customAttributes, attributeCode) {
      return getLable(customAttributes, attributeCode);
    },
    setSelected(part, index) {
      this.imagepath = part;
      this.selected = index;
    },
    pageScrollUp() {
      if (this.$refs.divOne)
        this.$vuetify.goTo(this.$refs.divOne, {
          duration: 300,
          easing: "easeInOutCubic"
        });
    },
   async getMessageDetails() {
      if (this.itemId) {
        if (this.userAuth) {
           await this.$store.dispatch("userCartProduct/cartProductList");
           await this.$store.dispatch("userCartProduct/fetchGiftMessage", {
            itemId: this.itemId
          });
        } 
      }
    }
  },
  mounted() {
    this.pageScrollUp();
  },
  created() {
  }
};
</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;
}

.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-tabs1 .v-slide-group__prev {
  display: none !important;
}
.v-text-field .v-input__control {
  border-radius: unset !important;
  height: auto; //48px;
}
.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;
  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;
}
.v-select-error-border.error--text .v-input__control .v-input__slot
{
   border: 2px solid #ff5252 !important;
}
</style>
<style src="./ProductDetailComponent.scss" lang="scss" scoped/>
