<template>
  <div v-resize="OnResize">
    <v-container class="px-5 px-sm-3 px-md-3 px-lg-3">
      <div :class="isIpad ? 'd-flex flex-column-reverse' : 'pt-lg-5'">
        <div :class="newUser ? 'pt-lg-6 mt-lg-12' : ''">
          <v-row>
            <v-col cols="12" lg="9" md="12" sm="12" ref="divOne" class="py-0">
              <div v-if="categoryListIdWise">
                <BreadcrumbComponent
                  :categoryId="categoryId"
                  :categoryListIdWise="categoryListIdWise"
                  :key="categoryId"
                />
              </div>
            </v-col>
          </v-row>
          <v-row v-if="isIpadOrMobile">
            <v-col cols="12" class="pa-0">
              <v-col cols="12" sm="4" v-if="getFilterList(sideFilter)">
                <span :key="sideFilter">
                  <ul
                    class="pl-0"
                    v-for="(value, name) in getFilterList(sideFilter)"
                    :key="value"
                  >
                    <li class="d-flex justify-space-between pb-1">
                      <div>
                        <b>
                          <span class="text-uppercase">{{
                            getFrontEndName(name)
                          }}</span>
                        </b>
                        : {{ getLable(name, value) }}
                      </div>
                      <v-hover v-slot:default="{ hover }">
                        <v-icon
                          :color="hover ? 'primary' : ''"
                          @click.stop="deleteFilter(name)"
                          class="categorybaseproduct-cancel-buttons cursor-pointer transparent-background"
                          >mdi-close</v-icon
                        >
                      </v-hover>
                    </li>
                  </ul>
                </span>
              </v-col>
            </v-col>
            <v-col cols="12" sm="4" class="d-lg-none pt-1 pb-5">
              <v-menu
                allow-overflow
                id="filterSelect"
                offset-y
                :close-on-content-click="closeFilterMenu"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-select
                    v-bind="attrs"
                    v-on="on"
                    class="word-break fontsize-16 line-height-21 ls-n009 font-weight-400 categorybaseproducts-filter-button select-change-icon"
                    dense
                    attach="#filterSelect"
                    flat
                    solo
                    single-line
                    background-color="transparent"
                    append-icon="mdi-plus"
                    label="FILTERS"
                    color="primary"
                    @click="setFilterValue"
                  ></v-select>
                </template>
                <v-list class="categorybaseproducts-filter-options mx-auto">
                  <v-list-item>
                    <v-list-item-title class="filter-component-width">
                      <v-row>
                        <v-col cols="12">
                          <v-btn
                            block
                            class="text-uppercase ls-0 body pb-1 productpage-button"
                            outlined
                            :class="
                              checkClear
                                ? 'white--text primary'
                                : 'primary--text'
                            "
                            tile
                            depressed
                            @click="clearFilter()"
                            >CLEAR</v-btn
                          >
                        </v-col>
                        <!-- <v-col cols="6" class="pl-0">
                      <v-btn
                        block
                        class="text-uppercase ls-0 body pb-1"
                        outlined
                        :class="checkApply?'white--text primary':'primary--text'"
                        tile
                        depressed
                        @click="applyFilter()"
                      >APPLY</v-btn>
                        </v-col>-->
                      </v-row>
                      <FilterComponent
                        @clearAction="actionClear"
                        :key="categoryId"
                        :filterList="availalableFilters"
                        :inProgress="inProgress"
                        @applyNewFilter="applyFilter"
                      ></FilterComponent>
                    </v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-col>
            <v-col lg="10" md="4" sm="4" cols="3" class="pt-0 pb-5 pr-3">
              <p
                class="text-uppercase Whyte-Regular primary--text my-3 mr-1 fontsize-14 ls-n01 font-weight-400 categorypage_fontcolor_greyshade8b categorybaseproducts-sortby"
                :class="isIpad ? 'float-right' : 'float-left'"
              >
                Sort by:
              </p>
            </v-col>
            <v-col
              cols="9"
              lg="2"
              md="4"
              sm="4"
              class="py-0 pt-1 pr-3"
              align="right"
            >
              <v-select
                :items="criteria"
                class="word-break fontsize-14 line-height-21 ls-n009 font-weight-400 categorybaseproducts-sortby-button select-change-icon regular-font"
                dense
                flat
                attach
                solo
                ref="sortAndNextPage"
                @change="sortAndNextPage()"
                item-text="label"
                item-value="value"
                background-color="transparent"
                v-model="sortSelect"
                append-icon="mdi-plus"
              ></v-select>
            </v-col>
          </v-row>
        </div>
        <v-row :class="newUser ? 'pt-md-6 mt-md-12 pt-lg-0 mt-lg-0' : ''">
          <!---------------Desktop view------------------------------------>
          <v-card
            :class="isIpad ? 'mt-0' : ''"
            v-if="
              heroContent.ca &&
              getImageCustomAttributeValue(heroContent.ca, 'image') != undefined
            "
            class="d-none d-sm-flex flex-row flex-start categorybaseproduct-hero-container"
            tile
            flat
            :min-height="getImageHeight"
          >
            <v-col
              cols="12"
              class="text-left d-flex align-center justify-left mt-auto mb-auto"
            >
              <v-card
                flat
                tile
                :min-height="getImageHeight"
                color="rgba(0,0,0,0.0)"
                class="text-center categorybaseproduct-hero-content d-flex align-center justify-left"
              >
                <div class="px-3">
                  <h1
                    class="v-card__text text-uppercase px-12 pb-2 pa-0 h1 ls-n10 text-left fontcolor-brown"
                  >
                    {{ heroContent.n }}
                  </h1>
                  <v-card-text
                    class="fontsize-16 line-height-18 pa-0 mt-md-2 mt-lg-2 body-font px-12 ls-n10 text-left fontcolor-brown"
                    v-html="
                      getCustomAttributeValue(heroContent.ca, 'description')
                    "
                  ></v-card-text>
                </div>
              </v-card>
              <v-img
                class="categorybaseproduct-hero-image categorybaseproduct-hero-container-image float-right"
                :src="getImageCustomAttributeValue(heroContent.ca, 'image')"
                :alt="heroContent.n"
                :title="heroContent.n"
                :height="getImageHeight"
                :width="getImageHeight"
              ></v-img>
            </v-col>
          </v-card>
          <v-card
            v-else-if="heroContent.ca"
            class="d-none d-sm-flex flex-row flex-start categorybaseproduct-hero-container"
            :min-height="getImageHeight"
            tile
            flat
          >
            <v-col
              cols="12"
              class="text-left d-flex align-center justify-left mt-auto mb-auto"
            >
              <v-card
                flat
                :min-height="getImageHeight"
                tile
                color="rgba(0,0,0,0.0)"
                class="text-center categorybaseproduct-hero-content pr-12 d-flex align-center justify-left"
              >
                <div>
                  <h1
                    class="v-card__text text-uppercase pa-0 mx-auto white--text h1 ls-n10 herocontainer-max-width-800"
                  >
                    {{ heroContent.n }}
                  </h1>
                </div>
              </v-card>
              <v-img
                :src="heroData.image"
                :alt="heroContent.n"
                :title="heroContent.n"
                class="categorybaseproduct-hero-image categorybaseproduct-hero-container-image float-right"
                :height="getImageHeight"
                :width="getImageHeight"
              ></v-img>
            </v-col>
            <v-col cols="5"></v-col>
          </v-card>
          <v-card
            v-else
            class="d-none d-sm-flex flex-column flex-start categorybaseproduct-hero-container"
            :min-height="getImageHeight"
            tile
            flat
          >
            <v-img
              :src="heroData.image"
              :alt="heroContent.n009"
              :title="heroContent.n"
              class="categorybaseproduct-hero-image categorybaseproduct-hero-container-image float-right"
              :height="getImageHeight"
              :width="getImageHeight"
            >
            </v-img>
          </v-card>
          <!----------------------------------------------------------------------------->
          <!-------------------------------------Mobile view----------------------------------------->
          <v-card
            v-if="
              heroContent.ca &&
              getImageCustomAttributeValue(heroContent.ca, 'image') != undefined
            "
            flat
            class="d-sm-none mx-auto text-center px-3"
            tile
          >
            <v-card
              height="350"
              flat
              color="rgba(0,0,0,0.0)"
              class="text-center d-flex"
            >
              <v-img
                :alt="heroContent.n"
                :title="heroContent.n"
                :src="getImageCustomAttributeValue(heroContent.ca, 'image')"
                height="100%"
                @error="setImage()"
              ></v-img>
              <div
                class="categorybaseproduct-color-overlay d-flex align-center flex-column justify-center h-100 px-6"
              >
                <h1
                  class="v-card__text text-uppercase line-height-33 white--text fontsize-28 ls-n10 text-center mx-auto pb-1 px-6"
                >
                  {{ heroContent.n }}
                </h1>
                <v-card-text
                  class="white--text fontsize-12 line-height-18 px-3 text-center body-font mx-auto herocontainer-max-width-635 ls-n10"
                  v-html="
                    getCustomAttributeValue(heroContent.ca, 'description')
                  "
                ></v-card-text>
              </div>
            </v-card>
          </v-card>

          <v-card
            v-else-if="heroContent.ca"
            flat
            class="d-sm-none mx-auto text-center px-3"
            tile
          >
            <v-card
              height="350"
              flat
              color="rgba(0,0,0,0.0)"
              class="text-center d-flex"
            >
              <v-img
                height="100%"
                :src="heroData.image"
                :alt="heroContent.n"
                :title="heroContent.n"
              ></v-img>
              <div
                class="categorybaseproduct-color-overlay d-flex align-center flex-column justify-center h-100 px-6"
              >
                <h1
                  class="v-card__text text-uppercase pa-0 line-height-33 white--text h1 ls-n10 text-center mx-auto px-6"
                >
                  {{ heroContent.n }}
                </h1>
              </div>
              <slot />
            </v-card>
          </v-card>
          <v-card v-else class="d-sm-none mx-auto text-center px-3" tile flat>
            <v-card
              height="350"
              flat
              color="rgba(0,0,0,0.0)"
              class="text-center d-flex"
            >
              <v-img
                :src="heroData.image"
                :alt="heroContent.n"
                :title="heroContent.n"
                class="hero-container-image"
                height="100%"
              ></v-img>
              <div
                class="categorybaseproduct-color-overlay mx-auto d-flex align-center justify-center mt-auto mb-auto"
              ></div>
            </v-card>
          </v-card>
          <!-------------------------------------------------------------------------------------->
        </v-row>
      </div>
      <v-row
        class="d-none d-sm-flex"
        v-if="getFilterList(sideFilter) && !isIpadOrMobile"
      >
        <v-col cols="12" lg="3" md="4" sm="4">
          <span :key="sideFilter">
            <ul
              class="pl-0"
              v-for="(value, name) in getFilterList(sideFilter)"
              :key="value"
            >
              <li class="d-flex justify-space-between pb-1">
                <div>
                  <b>
                    <span class="text-uppercase">{{
                      getFrontEndName(name)
                    }}</span>
                  </b>
                  : {{ getLable(name, value) }}
                </div>
                <v-hover v-slot:default="{ hover }">
                  <v-icon
                    :color="hover ? 'primary' : ''"
                    @click.stop="deleteFilter(name)"
                    class="categorybaseproduct-cancel-buttons cursor-pointer transparent-background"
                    >mdi-close</v-icon
                  >
                </v-hover>
              </li>
            </ul>
          </span>
        </v-col>
      </v-row>
      <v-row>
        <v-col lg="3" md="1" sm="1" class="d-none d-lg-block pt-12 pr-md-12">
          <v-row justify="center" class="pt-6">
            <FilterComponent
              @clearAction="actionClear"
              :key="categoryId"
              :filterList="availalableFilters"
              :inProgress="inProgress"
              @applyNewFilter="applyFilter"
            ></FilterComponent>
          </v-row>
        </v-col>
        <v-col
          cols="12"
          lg="9"
          md="12"
          sm="12"
          class="pl-lg-12 pt-sm-0 pt-md-3 pt-lg-6"
        >
          <v-row v-if="!isIpadOrMobile" class="pb-lg-2">
            <v-col lg="8" md="4" sm="4" cols="4" class="pt-1 pr-2">
              <p
                class="text-uppercase primary--text my-3 mr-2 fontsize-14 float-right ls-n01 font-weight-400 categorypage_fontcolor_greyshade8b"
              >
                Sort by:
              </p>
            </v-col>
            <v-col
              lg="4"
              md="3"
              sm="3"
              cols="4"
              class="py-0 pt-1 pl-0 pr-4"
              align="right"
            >
              <v-select
                :items="criteria"
                class="word-break fontsize-14 line-height-21 ls-n009 font-weight-400 categorybaseproducts-sortby-button select-change-icon regular-font"
                dense
                flat
                attach
                solo
                ref="sortAndNextPage"
                @change="sortAndNextPage()"
                item-text="label"
                item-value="value"
                background-color="transparent"
                v-model="sortSelect"
                append-icon="mdi-plus"
              ></v-select>
            </v-col>
          </v-row>
          <!--<v-row v-if="inProgress  && pageSize != 'ALL'">-->
          <v-row v-if="inProgress">
            <v-col
              v-for="(i, index) in 9"
              v-bind:key="index"
              lg="4"
              md="4"
              sm="4"
              cols="12"
              class="pr-lg-4 cursor-pointer"
            >
              <v-skeleton-loader type="card"></v-skeleton-loader>
            </v-col>
          </v-row>
          <v-row v-if="categoryResults.items.length != 0">
            <v-col
              v-for="(products, index) in categoryResults.items"
              v-bind:key="index"
              lg="4"
              md="4"
              sm="4"
              cols="12"
              class="pr-lg-4 pt-2 pt-sm-1 pt-md-0 pt-lg-2 cursor-pointer"
              @click="gotoProductDetails(products.n)"
            >
              <v-img
                :src="imageBasePathUrl + products.i + imageBaseParams"
                width="100%"
                :alt="products.n"
                :title="products.n"
              ></v-img>
              <v-row>
                <v-col cols="7" class="pb-0">
                  <h1
                    class="float-left fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
                  >
                    {{ products.n }}
                  </h1>
                </v-col>
                <v-col cols="5" class="pb-0">
                  <p
                    v-if="products.lp"
                    class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
                  >
                    From ${{ products.lp }}
                    {{ products.u }}
                  </p>
                  <div
                    v-else
                    class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
                  >
                    <div v-if="products.sp">
                      <s>${{ products.p }}</s> &nbsp;
                      <p class="red--text mb-0">${{ products.sp }}</p>
                      / {{ products.u }}
                    </div>
                    <div v-else-if="products.p != 0">
                      <p>
                        ${{ products.p }} /
                        {{ products.u }}
                      </p>
                    </div>
                    <div v-else>
                      <p>TBD</p>
                    </div>
                  </div>
                </v-col>
              </v-row>
              <p
                class="fontsize-14 body-font ls-n009 fontcolor-grey-shade8b font-weight-400"
              >
                {{ products.qty }}
              </p>
            </v-col>
          </v-row>
          <v-row v-if="emptyProductList" class="text-center">
            <v-col class="d-flex align-center">
              <v-alert type="error" text class="font-weight-300 body-font h4">{{
                fetchErrorMessage
              }}</v-alert>
            </v-col>
          </v-row>
          <v-row class="pr-5" v-if="totalVisiblePages">
            <v-col cols="12" sm="6" md="8" lg="8">
              <v-col
                cols="12"
                sm="6"
                md="8"
                lg="8"
                class="pa-0 custom-pagination d-flex flex-column"
              >
                <v-pagination
                  v-if="pageSize != 'ALL'"
                  prev-icon="Previous"
                  next-icon="Next"
                  class="categorybaseproducts-pagination-button d-flex justify-flex-start"
                  v-model="pageViewNumber"
                  :length="totalVisiblePages"
                  elevation="0"
                  @input="pageViewChange()"
                  circle
                ></v-pagination>
              </v-col>
            </v-col>

            <v-col sm="6" md="4" lg="4" class="pt-0 d-none d-sm-block">
              <v-row align="center" justify="end">
                <p
                  class="mr-2 text-uppercase fontsize-14 ls-n01 font-weight-400 fontcolor-black-darken pt-6"
                >
                  Show:
                </p>
                <v-overflow-btn
                  class="fontsize-16 body ls-n01 transparent-background fontcolor-black-darken categorybaseproducts-overflow-button"
                  :items="pageNum"
                  label="9"
                  v-model="pageSize"
                  flat
                  target="#dropdown-example"
                  height="36"
                  @change="pageSizeWiseProduct()"
                ></v-overflow-btn>
                <p
                  class="ml-2 text-uppercase fontsize-14 ls-n01 font-weight-400 fontcolor-grey-shade8b pt-6"
                >
                  Per Page
                </p>
              </v-row>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
<script>
/* eslint-disable no-alert, no-console ,  no-debugger */
import * as easings from "vuetify/es5/services/goto/easing-patterns";
import { createHelpers } from "vuex-map-fields";
import { mapState } from "vuex";
import FilterComponent from "../filter/FilterComponent";
import BreadcrumbComponent from "@/components/retailer/breadcrumb/Breadcrumb";
import {
  attribute,
  customAttributeValue,
  getCategoryOne,
} from "@/services/util.service";
const { mapFields } = createHelpers({
  getterType: "layout/getField",
  mutationType: "layout/updateField",
});
export default {
  name: "CategoryBaseProductsComponent",
  components: {
    FilterComponent,
    BreadcrumbComponent,
  },
  computed: {
    ...mapState({
      categoryResults: (state) => state.catalogCategoryBrowser.categoryResults,
      searchTerms: (state) => state.catalogCategoryBrowser.searchTerms,
      inProgress: (state) => state.catalogCategoryBrowser.inProgress,
      totalProducts: (state) => state.catalogCategoryBrowser.totalItems,
      availalableFilters: (state) =>
        state.catalogCategoryBrowser.availalableFilters,
    }),
    ...mapFields([
      "categoryQueryParam",
      "categoryQueryParam.pageNo",
      "categoryQueryParam.pageSize",
      "categoryQueryParam.categoryId",
      "categoryQueryParam.sortSelect",
      "categoryQueryParam.search",
      "categoryQueryParam.sideFilter",
    ]),
    easingOptions() {
      return {
        duration: this.duration,
        //  offset: this.offset,
        easing: this.easing,
      };
    },
    isIpad: function () {
      return this.$vuetify.breakpoint.smOnly || this.$vuetify.breakpoint.mdOnly
        ? true
        : false;
    },
    isIpadOrMobile: function () {
      return this.$vuetify.breakpoint.mdAndDown ? true : false;
    },
    categoryListIdWise: function () {
      return this.$store.state.headerCategoryList.categoryListIdWise;
    },
    productDataList() {
      return this.$store.state.productList.productData;
    },
    emptyProductList() {
      return this.$store.state.productList.emptyProductList;
    },
    sideBarFilterDetails() {
      return this.$store.state.productList.sideBarFilterDetails;
    },
    inProgressSideBarFilter() {
      return this.$store.state.productList.inProgressSideBarFilter;
    },
    inProgress() {
      return this.$store.state.productList.inProgress;
    },
    productAttributes() {
      return this.$store.state.productList.attributeList;
    },
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_PATH_URL;
    },
    imageBaseParams() {
      return process.env.VUE_APP_IMAGE_CATEGORY_PARAMS;
    },
    /* totalProducts() {
      return this.$store.state.productList.sideBarFilterDetails.totalCount;
    },*/
    productViews() {
      if (!this.inProgress && this.pageSize != "ALL")
        return Number(this.pageSize) * (this.pageViewNumber - 1);
      else return "";
    },
    /*totalVisiblePages() {
     return parseInt(this.totalProducts / this.pageSize);
    },*/
    // totalShownProducts() {
    //   return (
    //     this.pageSize * this.pageNo -
    //     (Number(this.pageSize) - Number(this.productDataList.items.length))
    //   );
    // },
    totalVisible() {
      let count = this.pageNo + 3;
      return count;
    },
    categoryQueryParam() {
      return this.$store.state.layout.categoryQueryParam;
    },
    categoryDetailsList: function () {
      return this.$store.state.headerCategoryList.categoryDetails;
    },
    heroContent() {
      return this.$store.state.layout.heroContent;
    },
    getImageHeight() {
      if (this.$vuetify.breakpoint.lgAndUp) {
        return "454";
      } else if (this.$vuetify.breakpoint.mdOnly) {
        return "406";
      } else if (this.$vuetify.breakpoint.smOnly) {
        return "300";
      }
      return "454";
    },
    newUser() {
      if (this.$vuetify.breakpoint.smAndDown) return false;
      let userVisits = this.$store.state.layout.user.userVisits;
      if (userVisits && Number(userVisits) > 1) return false;
      else return true;
    },
  },
  watch: {
    totalProducts() {
      if (this.pageSize != "ALL") {
        this.totalVisiblePages = Math.ceil(
          this.totalProducts / Number(this.pageSize)
        );
        this.updatePageNumber();
      }
    },
    pageNo() {
      this.pageViewNumber = this.pageNo;
    },
    pageSize() {
      if (this.pageSize != "ALL") {
        if (this.totalProducts)
          this.totalVisiblePages = Math.ceil(
            this.totalProducts / Number(this.pageSize)
          );
      }
    },
  },
  data: () => ({
    heroImageHeight: "454",
    heroImageWidth: "454",
    closeFilterMenu: false,
    checkApply: true,
    checkClear: false,
    isActive: true,
    easing: "easeInOutCubic",
    easings: Object.keys(easings),
    selector: "#scroll-with-options",
    duration: 100,
    //  totalShownProducts:1,
    totalVisiblePages: 0,
    actualPageNo: 1,
    fav: true,
    menu: false,
    message: false,
    showDrawarFilter: false,
    hints: true,
    heroData: {
      image: require("@/assets/c4aa164d9b01387a88228c67620f7faf861b5544.png"),
    },
    criteria: [
      { label: "POSITION", value: "position" },
      { label: "PRODUCT NAME", value: "name" },
      { label: "PRICE:LOW-HIGH", value: "price" },
      { label: "COLOR", value: "color" },
    ],
    pageNum: [
      { text: "9", callback: () => "9" },
      { text: "18", callback: () => "18" },
      { text: "27", callback: () => "27" },
      { text: "ALL", callback: () => "ALL" },
    ],
    pageViewNumber: 1,
    fetchErrorMessage: "We can't find products matching the selection.",
  }),
  methods: {
    setImage() {
      event.target.src = this.heroData.image;
    },
    actionClear() {
      this.checkClear = true;
      this.closeFilterMenu = true;
    },
    setFilterValue() {
      this.closeFilterMenu = false;
    },
    clearFilter() {
      let filter = "e30=";
      this.$store
        .dispatch("layout/updateCategoryQueryParam", {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          sortSelect: this.sortSelect,
          categoryId: this.categoryId,
          search: "",
          sideFilter: filter,
        })
        .catch((error) => {
          error;
        });
      this.$router
        .push({
          query: {
            pageNumber: this.$route.query.pageNumber,
            pageSize: this.$route.query.pageSize,
            sortBy: this.$route.query.sortBy,
            filter: filter,
          },
        })
        .catch((error) => {
          error;
        });
      this.$store
        .dispatch("catalogBrowser/search", {
          fullCatalog: window.craneCatalog,
          keywords: "",
          filters: [{ label: "Category", prop: "ci", value: this.categoryId }],
          pageNumber: this.pageNo,
          pageSize: this.pageSize,
          sortBy: this.sortSelect.value
            ? this.sortSelect.value
            : this.sortSelect,
        })
        .catch((error) => {
          error;
        });

      this.closeFilterMenu = true;
      this.checkApply = true;
      this.checkClear = false;
    },
    applyFilter() {
      this.checkApply = false;
      this.checkClear = true;
      this.closeFilterMenu = true;
    },
    categoryImageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_CATEGORY_PATH_URL;
    },
    getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValue(customAttributes, attributeCode);
    },
    getImageCustomAttributeValue(customAttributes, attributeCode) {
      let imagePath = customAttributeValue(customAttributes, attributeCode);
      /* eslint-disable */
      // debugger
      if (imagePath == "") {
        return undefined;
      } else if (imagePath.includes("/media/catalog/category/")) {
        return this.categoryImageBasePathUrl() + imagePath;
      } else if (!imagePath.includes("/media/catalog/category/")) {
        return (
          this.categoryImageBasePathUrl() +
          "/media/catalog/category/" +
          imagePath
        );
      } else {
        return this.heroData.image;
      }
    },
    getFilterList(sideFilter) {
      if (sideFilter != "e30=" && sideFilter) {
        let filtertoNormal = JSON.parse(atob(sideFilter));
        return filtertoNormal;
      }
    },
    getFrontEndName(name) {
      if (this.productAttributes.items) {
        let newValue = this.productAttributes.items.filter((elements) => {
          return elements.attributeCode === name;
        });
        if (newValue.length > 0 && newValue[0].frontendLabels[0]) {
          let labelValue = newValue[0].frontendLabels[0].label;
          return labelValue;
        } else {
          let replaceString = name.split("_").join(" ");
          return replaceString.replace("def", " ");
        }
      }
    },
    getLable(name, id) {
      if (this.productAttributes.items) {
        let newValue = this.productAttributes.items.filter((elements) => {
          return elements.attributeCode === name;
        });
        let filter = newValue[0].options.filter((elementNew) => {
          return elementNew.value === id;
        });
        if (filter.length > 0) {
          return filter[0].label;
        }
      }
    },
    deleteFilter(name) {
      let filtertoNormal = JSON.parse(atob(this.sideFilter));
      delete filtertoNormal[name];
      let filter = btoa(JSON.stringify(filtertoNormal));
      this.$router
        .push({
          query: {
            pageNumber: this.$route.query.pageNumber,
            pageSize: this.$route.query.pageSize,
            sortBy: this.$route.query.sortBy,
            filter: filter,
          },
        })
        .catch((error) => {
          error;
        });
      this.$store
        .dispatch("layout/updateCategoryQueryParam", {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          sortSelect: this.sortSelect,
          categoryId: this.categoryId,
          search: "",
          sideFilter: filter,
        })
        .catch((error) => {
          error;
        });

      this.$store
        .dispatch("catalogBrowser/search", {
          fullCatalog: window.craneCatalog,
          keywords: "",
          filters: [{ label: "Category", prop: "ci", value: this.categoryId }],
          pageNumber: this.pageNo,
          pageSize: this.pageSize,
          sortBy: this.sortSelect.value
            ? this.sortSelect.value
            : this.sortSelect,
        })
        .catch((error) => {
          error;
        });
    },
    OnResize() {
      setTimeout(() => {
        if (this.$vuetify.breakpoint.lgAndUp) {
          this.showDrawarFilter = false;
        }
      }, 200);
    },

    getAttribute(customAttributes, attributeCode) {
      return attribute(customAttributes, attributeCode, this.productAttributes);
    },

    getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValue(customAttributes, attributeCode);
    },
    gotoProductDetails(productName) {
      this.$router.push({
        name: productName,
      });
    },
    pageViewChange() {
      this.$vuetify.goTo(this.$refs.divOne, this.easingOptions);
      this.pageNo = this.pageViewNumber;
      this.sortAndNextPage();
    },
    sortAndNextPage() {
      if (this.$refs.sortAndNextPage) {
        this.$refs.sortAndNextPage.blur();
      }
      this.$store
        .dispatch("layout/updateCategoryQueryParam", {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          sortSelect: this.sortSelect,
          categoryId: this.categoryId,
          search: "",
          sideFilter: this.sideFilter,
        })
        .catch((error) => {
          error;
        });

      this.$router
        .push({
          query: {
            pageNumber: this.pageNo,
            pageSize: this.pageSize,
            sortBy: this.sortSelect,
            category: this.categoryId,
            filter: this.sideFilter,
          },
        })
        .catch((error) => {
          error;
        });
      this.$store
        .dispatch("catalogBrowser/search", {
          fullCatalog: window.craneCatalog,
          keywords: "",
          filters: [{ label: "Category", prop: "ci", value: this.categoryId }],
          pageNumber: this.pageNo,
          pageSize: this.pageSize,
          sortBy: this.sortSelect.value
            ? this.sortSelect.value
            : this.sortSelect,
        })
        .catch((error) => {
          error;
        });

      if (this.pageSize != "ALL") {
        this.updatePageNumber();
      }
      this.isActive = true;
    },
    pageSizeWiseProduct() {
      if (this.$refs.sortAndNextPage) {
        this.$refs.sortAndNextPage.blur();
      }
      if (this.pageSize != "ALL") {
        this.updatePageNumber();
      }
      this.$store
        .dispatch("layout/updateCategoryQueryParam", {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          sortSelect: this.sortSelect,
          categoryId: this.categoryId,
          search: "",
          sideFilter: this.sideFilter,
        })
        .catch((error) => {
          error;
        });
      this.$router
        .push({
          query: {
            pageNumber: this.pageNo,
            pageSize: this.pageSize,
            sortBy: this.sortSelect,
            filter: this.sideFilter,
          },
        })
        .catch((error) => {
          error;
        });
      this.$vuetify.goTo(this.$refs.divOne, this.easingOptions);
      this.$store
        .dispatch("catalogBrowser/search", {
          fullCatalog: window.craneCatalog,
          keywords: "",
          filters: [{ label: "Category", prop: "ci", value: this.categoryId }],
          pageNumber: this.pageViewNumber,
          pageSize: this.pageSize,
          sortBy: this.sortSelect.value
            ? this.sortSelect.value
            : this.sortSelect,
        })
        .catch((error) => {
          error;
        });

      this.isActive = true;
    },
    scrollToTop() {
      window.scrollTo(0, 0);
    },
    async sortAndPage() {
      if (this.categoryDetailsList) {
        let categoryOne = await getCategoryOne(
          this.categoryDetailsList,
          this.categoryId
        );
        if (categoryOne) {
          this.$store.dispatch("layout/setHeroContent", categoryOne);
          console.log("cat", categoryOne.n, categoryOne);
          if (
            this.sideFilter == "e30=" &&
            this.pageNo == 1 &&
            this.pageSize == 9 &&
            this.sortSelect == "position"
          ) {
            this.$store
              .dispatch("catalogBrowser/search", {
                fullCatalog: window.craneCatalog,
                keywords: "",
                filters: [
                  { label: "Category", prop: "ci", value: this.categoryId },
                ],
                pageNumber: this.pageViewNumber,
                pageSize: this.pageSize,
                sortBy: this.sortSelect.value
                  ? this.sortSelect.value
                  : this.sortSelect,
              })
              .catch((error) => {
                error;
              });
          } else {
            this.$store
              .dispatch("catalogBrowser/search", {
                fullCatalog: window.craneCatalog,
                keywords: "",
                filters: [
                  { label: "Category", prop: "ci", value: this.categoryId },
                ],
                pageNumber: this.pageViewNumber,
                pageSize: this.pageSize,
                sortBy: this.sortSelect.value
                  ? this.sortSelect.value
                  : this.sortSelect,
              })
              .catch((error) => {
                error;
              });
          }
        }
      }
    },
    updatePageNumber() {
      if (this.pageNo * Number(this.pageSize) > this.totalProducts) {
        let quotient = Math.floor(this.totalProducts / Number(this.pageSize));
        let remainder = this.totalProducts % Number(this.pageSize);
        this.pageViewNumber = quotient + (remainder == 0 ? 0 : 1);
        if (this.sideBarFilterDetails.items.length == 0) {
          /* this.$store
            .dispatch("productList/fetchSideBarFilter", {
              page: this.pageViewNumber,
              size: this.pageSize,
              sortBy: this.sortSelect.value
                ? this.sortSelect.value
                : this.sortSelect,
              categoryId: this.categoryId,
              sideFilter: this.sideFilter,
              search: this.search
            })
            .catch(error => {
              error;
            });*/
        }
      } else {
        this.pageViewNumber = Number(this.pageNo);
      }
    },
  },
  mounted() {
    if (
      this.$route.query.pageNumber &&
      this.$route.query.pageSize &&
      this.$route.query.sortBy &&
      this.$route.meta.id
    ) {
      this.pageNo = Number(this.$route.query.pageNumber);
      this.pageSize = this.$route.query.pageSize;
      this.sortSelect = this.$route.query.sortBy;
      this.categoryId = Number(this.$route.meta.id);
      this.pageViewNumber = this.pageNo;
      this.sideFilter = this.$route.query.filter
        ? this.$route.query.filter
        : "e30=";

      this.$store
        .dispatch("layout/updateCategoryQueryParam", {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          sortSelect: this.sortSelect,
          categoryId: this.categoryId,
          search: "",
          sideFilter: this.sideFilter,
        })
        .catch((error) => {
          error;
        });
      this.sortAndPage();
    } else {
      this.pageNo = Number(1);
      this.pageSize = 9;
      this.sortSelect = "position";
      this.categoryId = Number(this.$route.meta.id);
      this.pageViewNumber = this.pageNo;
      this.sideFilter = "e30=";
      this.$store
        .dispatch("layout/updateCategoryQueryParam", {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          sortSelect: this.sortSelect,
          categoryId: this.categoryId,
          search: "",
          sideFilter: this.sideFilter,
        })
        .catch((error) => {
          error;
        });
      this.sortAndPage();
    }
  },
  created() {
    // this.$store.dispatch("headerCategoryList/fetchCategoryListIdWise");
    if (this.totalProducts)
      this.totalVisiblePages = Math.ceil(
        this.totalProducts / Number(this.pageSize)
      );
  },
};
</script>
<style lang="scss" >
.categorybaseproducts-filter-button .v-input__control .v-input__slot {
  padding-left: 10px !important;
}
.categorybaseproducts-filter-button .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-filter-button:hover .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-filter-button.v-input--is-label-active.v-input--is-focused
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-filter-button.v-input--is-label.v-input
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-filter-button:hover
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-filter-button .theme--light.v-label {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button.theme--light.v-select
  .v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-filter-button:hover
  .v-input__append-inner
  .v-input__icon
  .v-icon {
  color: #2850da !important;
}
.categorybaseproducts-filter-button
  .v-input__append-inner
  .v-input__icon
  .v-icon {
  color: #2850da !important;
  font-size: 24px !important;
}
.categorybaseproducts-filter-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;
}*/
.categorybaseproducts-filter-button
  .v-input__control
  .v-select__slot
  .v-select__selections {
  justify-content: center;
}
.categorybaseproducts-filter-button.v-select.v-text-field input {
  display: none;
}
.sort-button.theme--light.v-text-field--solo
  > .v-input__control
  > .v-input__slot {
  background: transparent !important;
}
.categorybaseproducts-pagination-button .v-pagination__item--active {
  outline: #ffffff !important;
}
.categorybaseproducts-pagination-button .v-pagination__item {
  outline: #ffffff !important;
  box-shadow: none !important;
  padding: 0px !important;
  margin: 0px !important;
}
.categorybaseproducts-pagination-button {
  justify-content: flex-start;
}
.categorybaseproducts-overflow-button .v-select__slot {
  border-left: 1px solid #dcdddd !important;
  border-right: 1px solid #dcdddd !important;
  max-width: 85px !important;
  max-height: 36px !important;
}
.categorybaseproducts-overflow-button {
  max-width: 85px !important;
}
.categorybaseproducts-overflow-button .v-select__slot .v-input__append-inner {
  max-height: 36px !important;
}
.categorybaseproducts-overflow-button .v-overflow-btn .v-select__slot {
  max-height: 36px !important;
}
.categorybaseproducts-sortby-button .v-text-field__details {
  display: none;
}
.categorybaseproducts-overflow-button .v-text-field__details {
  display: none;
}
.categorybaseproducts-filter-button .v-text-field__details {
  display: none;
}
.categorybaseproducts-pagination-button
  .v-pagination__navigation.v-pagination__navigation--disabled {
  display: none;
}
.categorybaseproducts-pagination-button
  .v-pagination__navigation
  .v-icon.v-icon {
  font-style: normal !important;
  color: #1d1d1d !important;
  text-transform: uppercase !important;
  font-size: 14px;
  font-family: "Whyte-Regular", sans-serif;
  letter-spacing: -0.1px;
}
.categorybaseproducts-sortby-button .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-sortby-button:hover .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
  .v-input__control
  .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-sortby-button:hover
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button:hover
  .v-input__append-inner
  .v-input__icon
  .v-icon {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button
  .v-input__append-inner
  .v-input__icon
  .v-icon {
  color: #2850da !important;
  font-size: 15px !important;
}
.categorybaseproducts-pagination-button .v-pagination__navigation {
  outline: #ffffff !important;
  box-shadow: none !important;
  padding: 0px !important;
}
.custom-pagination li:nth-child(1) {
  margin-right: 15px !important;
  margin-left: 15px;
}
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused.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;
  padding-top: 5px;
  border-left: 1px solid #2850da;
  padding-left: 10px;
  height: 34px;
}
.close-filter-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):focus:before {
  opacity: 0 !important;
}

.close-filter-button.v-btn:not(.v-btn--text):not(.v-btn--outlined):hover:before {
  opacity: 0 !important;
}
.selected-button {
  background-color: #2850da;
}
.categorybaseproduct-hero-image .v-image__image--cover {
  background-size: 100% 100% !important;
}
.filter-component-width .v-expansion-panels {
  display: inline-block;
}
</style>
<style src="./CategoryBaseProducts.scss" lang="scss" scoped />