<template>
  <v-container class="white" ref="divOne">
    <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 && configuredProductDetails">
      <v-col cols="1" class="d-none d-sm-block pr-4" v-if="configuredProductProgress"></v-col>
      <v-col cols="1" class="d-none d-sm-block pr-4" v-else-if="configuredProductDetails[0].mediaGalleryEntries.length">
        <div
          v-for="(productImage,index) in configuredProductDetails[0].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="configuredProductDetails[0].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="my-6 py-6 mt-sm-12 pt-sm-12 mt-md-12 pt-md-12"
        align="center"
        v-if="configuredProductProgress"
      >
        <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
      </v-col>
      <v-col cols="12" sm="7" md="7" class="pr-md-8 pb-0" v-else-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-row align="center" class="d-flex d-sm-none mx-auto px-1" v-if="configuredProductDetails[0].mediaGalleryEntries.length">
        <v-col cols="1" class="d-none d-sm-block pr-4" v-if="configuredProductProgress"></v-col>
        <v-col
          v-else
          v-for="(productImage,index) in configuredProductDetails[0].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="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="configuredProductDetails[0].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">
            <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
              v-if="!selectedLetter"
              class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
            >{{ productDetails.sku}}</p>
            <p
              v-else
              class="d-block caption line-height-21 mb-0 body-font ls-n008 fontcolor-grey-darken d-sm-none text-uppercase"
            >{{configuredProductDetails[0].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
          v-if="!selectedLetter"
          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
          v-else
          class="d-none d-md-block body-font caption line-height-21 ls-n008 fontcolor-grey-darken text-uppercase pb-1"
        >sku {{configuredProductDetails[0].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 )-->
            <div v-if="configuredProductDetails">
            <p
              v-if="getCustomAttributeValue(configuredProductDetails[0].customAttributes,'lowest_price')"
              class="body title-color-black"
            >From ${{Number(getCustomAttributeValue(configuredProductDetails[0].customAttributes,'lowest_price'))}} {{productDetails.uom}}</p>
            <div v-else class="fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300">
              <div v-if="getCustomAttributeValue(configuredProductDetails[0].customAttributes,'special_price') ">
                <s>${{Number( configuredProductDetails[0].price)}}</s> &nbsp;
                <span
                  class="red--text mb-0"
                >${{Number(getCustomAttributeValue(configuredProductDetails[0].customAttributes,'special_price'))}}</span>
                / {{productDetails.uom}}
              </div>
              <p
                v-else
                class="body title-color-black"
              >${{configuredProductDetails[0].price}} / {{ productDetails.uom}}</p>
            </div>
            </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"
          >
            <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="selectedQty1"
              background-color="transparent"
              append-icon="mdi-plus"
            ></v-select>
          </v-col>
          <v-col align="right" justify="right" cols="12" class="pl-4 pb-0">
            <v-form ref="configuredLetter" v-model="valid" :lazy-validation="lazy">
              <v-select
                :items="productDetails.configurableProductLinksDetails"
                class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 select-change-icon"
                :class="checkLetter?'':'productpage-select-button'"
                dense
                attach
                flat
                solo
                :outlined="checkLetter"
                :color="checkLetter?'error':'primary'"
                v-model="selectedLetter"
                @blur="resetValidation()"
                ref="selectedQty2"
                item-text="letterLabel"
                item-value="letterLabel"
                label="Choose an option..."
                @change="getImages(productDetails.configurableProductOptions[0].options, selectedLetter, productDetails.configurableProductLinks)"
                background-color="transparent"
                append-icon="mdi-plus"
                :rules="[v => !!v || 'This is a required field.']"
              >
                <template v-slot:selection="data">
                  <span class="fontsize-14">{{data.item.letterLabel}}</span>
                </template>
                <template v-slot:item="data">
                  <template>
                    <v-list-item-content>
                      <v-list-item-title class="text-uppercase">{{data.item.letterLabel}}</v-list-item-title>
                    </v-list-item-content>
                  </template>
                </template>
              </v-select>
            </v-form>
          </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="addToConfiguredCart(productDetails.sku,productDetails.typeId,productDetails.configurableProductOptions[0].attributeId,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()"
              >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="updateToConfiguredCart(productDetails.name,productDetails.sku,productDetails.typeId,productDetails.configurableProductOptions[0].attributeId)"
              >
                <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>
    <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 { getLable, customAttributeValue ,setCategoryNameInLocal} from "@/services/util.service";
//import { getAuthUser } from "@/services/auth";
export default {
  productDefaultImage:require('@/assets/defaultProduct.jpg'),
  name: "ConfiguredProductDetailComponent",
  props: ["productDetails","stockFlag","categoryId"],
  components: { SnackbarComponent },
  data: () => ({
    updateProgress: "",
    dropDownIcon: "mdi mdi-plus",
    iconColor: "black--text",
    isActive: true,
    isLetterActive: true,
    easings: Object.keys(easings),
    snackbar: {
      show: false,
      message: null,
      color: null,
      timeout: 0
    },
    lazy: false,
    textRules: [
      v => !!v || "This field is required",
      v => (v && v.length >= 3) || "This field must be at least 3 characters"
    ],
    valid: true,
    optionValue: "",
    selectedQty: "",
    selectedLetter: "",
    blue: "primary",
    checkLetter: false,
    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)" }
    ]
    /*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 list = JSON.parse(
        this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "qty_price"
        )
      );
      if (this.qty) {
        vm.selectedQty = this.qty.toString();
      } else {
        vm.selectedQty = list[0].qty;
      }
      return list;
    },
    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 "";
      }
    },
    configuredProductDetails() {
      return this.$store.state.productOne.configuredProductDetails.items;
    },
    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;
      }
    },
    configuredProductProgress: function() {
      return this.$store.state.productOne.configuredProductProgress;
    },
    fetchInProgress: function() {
      return this.$store.state.productOne.fetchInProgress;
    },
    fetchErrorMessage: function() {
      return this.$store.state.productOne.errorMessage;
    },
    productAttributes() {
      return this.$store.state.productList.attributeList;
    }
  },
  watch: {
    configuredProductDetails() {
      this.imagepath =this.productDetails.mediaGalleryEntries? this.productDetails.mediaGalleryEntries[0].file:"";
    },
    valid() {
      if (!this.valid) {
        this.$refs.configuredLetter.reset();
      }
    }
    /* qtyPriceOptions()
    {
      if(this.qtyPriceOptions.length > 0)
      this.selectedQty=this.qtyPriceOptions[0];
    }*/
  },
  methods: {
     setAltImg() { 
      event.target.src =this.productDefaultImage
    },
    resetValidation() {
      this.isLetterActive = true;
      this.checkLetter = false;
      if (!this.valid) {
        this.$refs.configuredLetter.reset();
      }
    },
    getImages(letterArray, letter, configuredlink) {
      this.checkLetter = false;
      this.selected = 0;
      this.errorMessage = "";
      let index = letterArray.findIndex(x => x.label === letter);
      let code = configuredlink[index];

      let indexOption = letterArray.filter(x => x.label === letter);
      this.optionValue = indexOption[0].valueIndex;
      /* eslint-disable */
      //debugger
      this.$store
        .dispatch("productOne/fetchConfiguredProductDetails", code)
        .then(
          () =>
            (this.imagepath = this.configuredProductDetails[0].mediaGalleryEntries?this.configuredProductDetails[0].mediaGalleryEntries[0].file:"")
        );
      this.isLetterActive=true  
    },
    getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValue(customAttributes, attributeCode);
    },
    addToConfiguredCart(sku, typeId, optionId,productDetails) {
      this.checkLetter = true;
       let vm =this;
      if (this.$refs.configuredLetter.validate()) {
        this.checkLetter = false;
        if (this.selectedQty) {
           let qtyNew=this.selectedQty;
          this.errorMessage = "";
          if (this.userAuth) {
            this.$store
              .dispatch("userCartProduct/addToConfiguredCart", {
                sku: sku,
                qty: this.selectedQty,
                typeId: typeId,
                optionId: optionId,
                optionValue: this.optionValue
              })
              .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/addToConfiguredCart", {
                sku: sku,
                qty: this.selectedQty,
                typeId: typeId,
                optionId: optionId,
                optionValue: this.optionValue
              })
              .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 = "This is a required field.";
        }
      }
    },
    updateToConfiguredCart(productName,sku, typeId, optionId) {
      if (this.$refs.configuredLetter.validate()) {
        if (this.selectedQty) {
          this.errorMessage = "";
          if (this.userAuth) {
            this.$store
              .dispatch("userCartProduct/updateToConfiguredCart", {
                sku: sku,
                qty: this.selectedQty,
                itemId: this.itemId,
                typeId: typeId,
                optionId: optionId,
                optionValue: this.optionValue
              })
              .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/updateToConfiguredCart", {
                sku: sku,
                qty: this.selectedQty,
                itemId: this.itemId,
                typeId: typeId,
                optionId: optionId,
                optionValue: this.optionValue
              })
              .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() {
      // window.open(`${personlizeUrl}/product/${this.sku}`, "_blank");
      if (
        this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "builder_version"
        ) === "1.0" ||
        this.getCustomAttributeLable(
          this.productDetails.customAttribute,
          "builder_version"
        ) === ""
      ) {
        this.$router.push({
          name: "CraneConnection",
          params: {
            retailorId: retailorId,
            quantity: this.selectedQty,
            itemNumber: this.sku
          }
        });
      } else {
        let itemCode = this.itemId ? this.itemId : "new";
        window.open(
          `${personlizeUrl}/product/${this.sku}/select-part/${itemCode}/${this.selectedQty}`,
          "_blank"
        );
      }
    },
    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();
   // console.log('this.productDetails.configurableProductlinks',this.productDetails.configurableProductLinks);
    if(this.productDetails.configurableProductLinks)
    {
        this.$store.dispatch(
          "productOne/fetchConfiguredProductDetails",
          this.productDetails.configurableProductLinks[0]
        );
    }
  },
  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;
}*/
.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--is-label-active.v-input--is-focused
  .v-input__control
  .v-input__slot {
  border: thin solid #2850da !important;
}
/*.productpage-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
  .v-input__append-inner {
  -ms-flex-item-align: center;
  align-self: center;
  padding-top: 5px;
  border-left: 1px solid #2850da;
  padding-left: 10px;
  height: 34px;
}*/
/*.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" scoped/>
