  <template>
  <div v-resize="checkActiveCategory">
    <!-- <HeaderPromoBanner
      v-if="
        pageName() == 'HomePage' &&
        heroBanner &&
        headerPromoBanner &&
        headerPromoBanner.active
      "
      @closeHeroBanner="closeBanner"
      :headerPromoBanner="headerPromoBanner"
    /> -->
    <v-app-bar
      v-if="heroData && newUser"
      flat
      :class="
        pageName() == 'HomePage' &&
        heroBanner &&
        headerPromoBanner &&
        headerPromoBanner.active
          ? 'header-top-margin transparent-background'
          : 'transparent-background'
      "
      absolute
      :color="'rgba(0,0,0,0.0)'"
      elevation="0"
      fixed
    >
      <v-system-bar class="transparent-background mt-3" fixed>
        <v-spacer></v-spacer>
        <v-menu
          offset-y
          down
          allow-overflow
          v-if="userAuth"
          :disabled="isScrolled"
        >
          <template v-slot:activator="{ on }">
            <v-btn
              icon
              v-on="on"
              :class="textColor"
              class="d-none d-md-block header-buttons"
              :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
            >
              <div class="text-uppercase">Hi {{ userName }}</div>
            </v-btn>
          </template>
          <v-card elevation="0" tile>
            <v-list dense flat>
              <v-list-item>
                <v-list-item-title
                  @click="goToDashboard()"
                  class="cursor-pointer"
                  >My Account</v-list-item-title
                >
              </v-list-item>
              <v-list-item>
                <v-list-item-title @click="goToLogout()" class="cursor-pointer"
                  >Logout</v-list-item-title
                >
              </v-list-item>
            </v-list>
          </v-card>
        </v-menu>

        <v-hover v-slot:default="{ hover }" v-if="!userAuth">
          <v-btn
            icon
            @click="goToLogin()"
            class="d-none d-md-block header-buttons"
            :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
          >
            <v-icon
              v-if="pageName() == 'CategoryPage'"
              :class="hover ? 'header-category-icon' : 'primary--text'"
              >mdi-account-circle-outline</v-icon
            >
            <v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
              >mdi-account-circle-outline</v-icon
            >
          </v-btn>
        </v-hover>

        <v-hover v-slot:default="{ hover }">
          <v-btn
            icon
            :class="
              hover ? 'primary--text' : textColor ? textColor : 'white--text'
            "
            @click="showSearchInput = true"
            class="d-none d-md-block header-buttons"
            :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
          >
            <v-icon
              v-if="pageName() == 'CategoryPage'"
              :class="hover ? 'header-category-icon' : 'primary--text'"
              >mdi-magnify</v-icon
            >
            <v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
              >mdi-magnify</v-icon
            >
          </v-btn>
        </v-hover>

        <v-navigation-drawer
          v-model="showSearchInput"
          v-if="showSearchInput"
          absolute
          right
          color="#ffffff"
          :width="searchInputWidth"
          height="56"
        >
          <!--<v-autocomplete
            v-model="search"
            v-if="showSearchInput"
            autofocus
            class="mt-0 py-0 search-catalog header-autocomplete"
            height="30"
            :items="searchResultList"
            :loading="searchInProgress"
            :search-input.sync="lookupCatelog"
            @change="GotoPage(search)"
            @blur="showSearchInput=false"
            hide-details
            :no-filter="true"
            hide-no-data
            flat
            solo
            clearable
            item-text="title"
            item-value="title"
            label="Search"
            append-icon="mdi-magnify"
            return-object
          >
            <template v-slot:selection="data">
              <span class="ml-2" v-text="data.item.title "></span>
            </template>
            <template v-slot:item="data ">
              <template>
                <v-list-item-content>
                  <div class="d-flex justify-space-between">
                    <v-list-item-title class="d-block text-truncate">{{data.item.title}}</v-list-item-title>
                   
                  </div>
                </v-list-item-content>
              </template>
            </template>
          </v-autocomplete>-->
          <v-text-field
            v-model="search"
            autofocus
            clearable
            single-line
            label="Search"
            solo
            type="text"
            class="header-search-field"
            @blur="showSearchInput = false"
            v-on:keyup.enter="GotoPage"
          >
            <template v-slot:append>
              <v-icon @click="GotoPage()" class="primary--text"
                >mdi-magnify</v-icon
              >
            </template>
          </v-text-field>
        </v-navigation-drawer>
        <!-- <v-btn
          icon
          :class="textColor"
          class="header-buttons"
          @click="categoryProducts('10')"
          :max-width="this.$vuetify.breakpoint.mdOnly? '35px':''"
        >
          <v-icon class="white--text">mdi-shopping-outline</v-icon>
        </v-btn>-->
        <v-hover v-slot:default="{ hover }">
          <v-btn
            icon
            :class="
              hover ? 'primary--text' : textColor ? textColor : 'white--text'
            "
            class="header-buttons"
            @click.stop="showCartDrawer(true)"
            :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
          >
            <v-icon
              v-if="pageName() == 'CategoryPage'"
              :class="hover ? 'header-category-icon' : 'primary--text'"
              >mdi-cart-outline</v-icon
            >
            <v-icon v-else :class="hover ? 'primary--text' : 'white--text'"
              >mdi-cart-outline</v-icon
            >
            <span v-if="cartProductsProgress || inProgress">
              <v-progress-circular
                :size="20"
                color="primary"
                :width="2"
                indeterminate
              ></v-progress-circular>
            </span>
            <span v-else>
              <v-badge
                class="mb-4"
                v-show="cartProductsItem.length"
                color="pink"
                :content="cartProductsItem.length"
              ></v-badge>
            </span>
          </v-btn>
        </v-hover>
      </v-system-bar>
      <NavigationDrawerComponent
        @actionShowMessage="showMessage"
        @actionPageMessage="pageMessage"
      ></NavigationDrawerComponent>
      <v-app-bar-nav-icon class="d-md-none"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <v-img
        v-if="pageName() == 'CategoryPage'"
        src="@/assets/Crane_Logo_blue.png"
        max-height="44"
        max-width="146"
        contain
        @click="goToHomePage()"
        class="mt-md-11 cursor-pointer"
      ></v-img>
      <v-img
        v-else
        src="@/assets/Crane_Logo_white.png"
        max-height="44"
        max-width="146"
        contain
        @click="goToHomePage()"
        class="mt-md-11 cursor-pointer"
      ></v-img>
      <v-spacer></v-spacer>
      <!-- <template v-slot:extension>
        <v-spacer></v-spacer>
        <div
          v-for="(categories, index) in categoryList.childrenData"
          v-bind:key="index"
        >
          <v-toolbar-items
            class="white--text d-none d-md-flex mt-11"
            v-if="index === 0"
          >
            <v-menu
              open-on-hover
              down
              offset-y
              allow-overflow
              content-class="pt-4 header-menu-content"
              v-for="(category, i) in categories.childrenData"
              v-bind:key="i"
            >
              <template v-slot:activator="{ on }">                
                <div
                  v-if="
                    category.name !== 'Baby' &&
                    category.name !== 'Gifts' &&
                    category.isActive
                  "
                  text
                  class="cursor-pointer text-uppercase body my-auto pa-0 px-sm-2 ls-n01 px-lg-4 header-category-text"
                  v-on="on"
                  :class="
                    category.id == activeCategoryMenu
                      ? 'header-category-text-active'
                      : categoryId
                      ? 'header-category-page-text'
                      : 'white--text'
                  "
                  @click="categoryProducts(category.id, category)"
                >
                {{ category.name }}
                </div>
              </template>
              <v-col v-if="category.childrenData != ''">
                <SubMenu
                  :subCategoryList="category"
                  @action="inactiveCategoryMenu"
                  :mainMenu="category.id"
                  :subMenuItem="subMenuItem"
                  @onActionScrollSub="onActionScroll"
                />
              </v-col>
            </v-menu>
          </v-toolbar-items>
        </div>
        <v-spacer></v-spacer>
      </template> -->
    </v-app-bar>
    <v-app-bar
      height="56"
      :absolute="!isScrolled"
      :app="isScrolled"
      :color="
        isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
      "
      elevation="0"
      v-else-if="pageName() == 'CheckoutPage'"
    >
      <v-spacer></v-spacer>
      <v-img
        v-if="!isScrolled"
        src="@/assets/Crane_Logo_white.png"
        max-width="100"
        @click="goToHomePage()"
        class="cursor-pointer"
        contain
        aspect-ratio="1"
      ></v-img>
      <v-img
        v-if="isScrolled"
        src="@/assets/Crane_Logo_blue.png"
        max-width="100"
        class="cursor-pointer"
        @click="goToHomePage()"
        contain
        aspect-ratio="1"
      ></v-img>
      <v-spacer></v-spacer>
    </v-app-bar>
    <v-hover v-else v-slot:default="{ hover }">
      <v-app-bar
        height="56"
        :class="
          pageName() == 'HomePage' &&
          heroBanner &&
          headerPromoBanner &&
          headerPromoBanner.active
            ? 'header-top-margin'
            : ''
        "
        :absolute="!isScrolled"
        :app="isScrolled"
        :color="
          isScrolled || hover ? 'header-background-white' : 'rgba(0,0,0,0.0)'
        "
        elevation="0"
      >
        <v-col class="d-flex justify-start pa-0">
          <v-app-bar-nav-icon
            @click.stop="menuAction()"
            :class="textColor"
            class="d-md-none header-menu-button ml-n3 pl-1"
            :color="
              hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
            "
          ></v-app-bar-nav-icon>
          <v-img
            v-if="!isScrolled && !hover"
            src="@/assets/Crane_Logo_white.png"
            max-width="100"
            @click="goToHomePage()"
            class="cursor-pointer d-none d-md-flex"
            contain
            aspect-ratio="1"
          ></v-img>
          <v-img
            v-else-if="(isScrolled && !hover) || hover"
            src="@/assets/Crane_Logo_blue.png"
            max-width="100"
            class="cursor-pointer d-none d-md-flex"
            @click="goToHomePage()"
            contain
            aspect-ratio="1"
          ></v-img>
        </v-col>
        <v-col class="d-flex justify-center">
          <v-img
            v-if="!isScrolled && !hover"
            src="@/assets/Crane_Logo_white.png"
            max-width="100"
            @click="goToHomePage()"
            class="cursor-pointer d-md-none"
            contain
            aspect-ratio="1"
          ></v-img>
          <v-img
            v-else-if="(isScrolled && !hover) || hover"
            src="@/assets/Crane_Logo_blue.png"
            max-width="100"
            class="cursor-pointer d-md-none"
            @click="goToHomePage()"
            contain
            aspect-ratio="1"
          ></v-img>
          <!-- <div
            v-for="(categories, index) in categoryList.childrenData"
            v-bind:key="index"
          >
            <v-toolbar-items
              class="white--text d-none d-md-flex"
              v-if="index === 0"
            >
              <v-menu
                open-on-hover
                down
                offset-y
                allow-overflow
                content-class="pt-4 header-menu-content"
                v-for="(category, index) in categories.childrenData"
                v-bind:key="index"
                v-show="category.isActive"
              >
                <template v-slot:activator="{ on }">

                  <div
                    v-if="
                      category.name !== 'Baby' &&
                      category.name !== 'Gifts' &&
                      category.isActive
                    "
                    text
                    class="cursor-pointer text-uppercase my-auto body pa-0 d-inline-block px-sm-2 ls-n01 px-lg-4 menu-nav-link custom-menu"
                    v-on="on"
                    :class="
                      isScrolled || hover
                        ? category.id == activeCategoryMenu && categoryId
                          ? 'header-category-text-active'
                          : 'header-category-text'
                        : category.id == activeCategoryMenu && categoryId
                        ? 'header-category-text-active'
                        : textColor
                    "
                    @click="categoryProducts(category.id, category)"
                  >
                    {{ category.name }}
                  </div>
                </template>
                <v-col v-if="category.childrenData != ''">
                  <SubMenu
                    :subCategoryList="category"
                    @action="inactiveCategoryMenu"
                    :mainMenu="category.id"
                    :subMenuItem="subMenuItem"
                    @onActionScrollSub="onActionScroll"
                  />
                </v-col>
              </v-menu>
            </v-toolbar-items>
          </div> -->
        </v-col>
        <v-col class="d-flex justify-end pr-0">
          <v-toolbar-items>
            <v-menu offset-y down allow-overflow v-if="userAuth">
              <template v-slot:activator="{ on }">
                <v-btn
                  icon
                  v-on="on"
                  :class="textColor"
                  :color="
                    hover && !isScrolled
                      ? 'primary'
                      : isScrolled
                      ? 'primary'
                      : ''
                  "
                  class="d-none d-md-block header-buttons mr-6"
                  :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
                >
                  <div class="text-uppercase">Hi {{ userName }}</div>
                </v-btn>
              </template>
              <v-card elevation="0" tile flat>
                <v-list dense flat>
                  <v-list-item>
                    <v-list-item-title
                      @click="goToDashboard()"
                      class="cursor-pointer"
                      >My Account</v-list-item-title
                    >
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-title
                      @click="goToLogout()"
                      class="cursor-pointer"
                      >Logout</v-list-item-title
                    >
                  </v-list-item>
                </v-list>
              </v-card>
            </v-menu>
            <v-btn
              v-if="!userAuth"
              icon
              :color="
                hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
              "
              @click="goToLogin()"
              :class="textColor"
              class="d-none d-md-block header-buttons"
              :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
            >
              <v-icon class="header-action-icons"
                >mdi-account-circle-outline</v-icon
              >
            </v-btn>

            <v-btn
              icon
              :color="
                hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
              "
              @click="showSearchInput = true"
              :class="textColor"
              class="d-none d-md-block header-buttons"
              :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
            >
              <v-icon class="header-action-icons">mdi-magnify</v-icon>
            </v-btn>

            <!--<v-btn
            v-show="pageName() !== 'CartProducts'"
            icon
            :class="textColor"
            class="header-buttons"
            @click="categoryProducts('10')"
            :max-width="this.$vuetify.breakpoint.mdOnly? '35px':''"
          >
            <v-icon>mdi-shopping-outline</v-icon>
            </v-btn>-->
            <div class="test">
              <v-btn
                v-show="pageName() !== 'CartProducts'"
                icon
                :class="textColor"
                :color="
                  hover && !isScrolled ? 'primary' : isScrolled ? 'primary' : ''
                "
                class="header-buttons mr-n2"
                @click.stop="showCartDrawer(true)"
                :max-width="$vuetify.breakpoint.mdOnly ? '35px' : ''"
              >
                <v-icon class="header-action-icons">mdi-cart-outline</v-icon>

                <span v-if="cartProductsProgress || inProgress">
                  <v-progress-circular
                    :size="20"
                    color="primary"
                    :width="2"
                    indeterminate
                  ></v-progress-circular>
                </span>
                <span v-else>
                  <v-badge
                    class="mb-4"
                    v-show="cartProductsItem.length"
                    color="pink"
                    :content="cartProductsItem.length"
                  ></v-badge>
                </span>
              </v-btn>
              <NavigationDrawerComponent
                @actionShowMessage="showMessage"
                @actionPageMessage="pageMessage"
              ></NavigationDrawerComponent>
            </div>
            <v-navigation-drawer
              v-model="showSearchInput"
              v-if="showSearchInput"
              absolute
              right
              color="#ffffff"
              :width="searchInputWidth"
              height="56"
            >
              <!--<v-autocomplete
                v-model="search"
                v-if="showSearchInput"
                autofocus
                class="mt-0 py-0 search-catalog header-autocomplete"
                height="30"
                :items="searchResultList"
                :loading="searchInProgress"
                :search-input.sync="lookupCatelog"
                @change="GotoPage(search)"
                @blur="showSearchInput=false"
                hide-details
                :no-filter="true"
                hide-no-data
                flat
                solo
                clearable
                item-text="name"
                item-value="sku"
                label="Search"
                append-icon="mdi-magnify"
                return-object
              >
                <template v-slot:selection="data">
                  <span class="ml-2" v-text="data.item.title "></span>
                </template>
                <template v-slot:item="data ">
                  <template>
                    <v-list-item-content>
                      <div class="d-flex justify-space-between">
                        <v-list-item-title class="d-block text-truncate">{{data.item.title}}</v-list-item-title>
                       
                      </div>
                    </v-list-item-content>
                  </template>
                </template>
              </v-autocomplete>-->
              <v-text-field
                v-model="search"
                autofocus
                clearable
                single-line
                label="Search"
                solo
                type="text"
                class="header-search-field"
                @blur="showSearchInput = false"
                v-on:keyup.enter="GotoPage"
              >
                <template v-slot:append>
                  <v-icon @click="GotoPage()" class="primary--text"
                    >mdi-magnify</v-icon
                  >
                </template>
              </v-text-field>
            </v-navigation-drawer>
          </v-toolbar-items>
        </v-col>
      </v-app-bar>
    </v-hover>
    {{ snackbarFlag }}
    <SnackbarComponent :snackbar="snackbar"></SnackbarComponent>
  </div>
</template>
<script>
/* eslint-disable */

import SubMenu from "@/components/layout/sub-menu/SubMenu";
import NavigationDrawerComponent from "@/components/layout/header/NavigationDrawerComponent";
import SnackbarComponent from "@/components/common/SnackbarComponent";
import { doFetchCatelogProducts } from "@/services/product.service";
import HeaderPromoBanner from "@/components/layout/header/HeaderPromoBanner";
import {
  customAttributeValueNew,
//  googleAanalyticsEventCategory,
  getCategoryOne,
  goToCategoryPageRouting,
} from "@/services/util.service";
import humps from "lodash-humps";
export default {
  name: "Header",
  components: {
    SubMenu,
    NavigationDrawerComponent,
    SnackbarComponent,
    HeaderPromoBanner,
  },
  props: ["offsetTop", "heroData"],
  data: () => ({
    blockId: "30",
    heroBanner: true,
    //subMenu: "",
    activeCategoryMenu: "",
    showMenu: false,
    pageNo: 1,
    defaultWidth: 400,
    pageSize: 9,
    sortSelect: { label: "Position", value: "position" },
    snackbar: {
      show: false,
      message: null,
      color: null,
      timeout: 0,
    },
    search: null,
    number: "",
    searchResultList: [],
    searchInProgress: false,
    lookupCatelog: null,
    showSearchInput: false,
  }),
  watch: {
    lookupCatelog: {
      handler: function (newVal) {
        clearTimeout(this.lookupCatelogProductTimeoutId);
        this.lookupCatelogProductTimeoutId = setTimeout(async () => {
          try {
            if (!newVal) this.searchResultList = [];
            else {
              this.searchInProgress = true;
              let results = await doFetchCatelogProducts(newVal);
              if (results != null) {
                this.searchResultList = humps(results);
              } else {
                this.searchResultList = [];
              }
              this.searchInProgress = false;
            }
          } catch (error) {
            this.searchResultList = [];
          }
        }, 500);
      },
    },
    categoryId() {
      if (!this.categoryId) {
        localStorage.removeItem("cr_subCategoryItemId");
        localStorage.removeItem("cr_subCategoryId");
        localStorage.removeItem("cr_mainCategoryId");
      }
    },
  },

  computed: {
    /* checkLogedIn() {
      return true;
    },*/
    snackbarFlag() {
      if (this.$store.state.userCartProduct.autoLogoutFlag) {
        this.showMessage({
          message: "Your session has expired please login again.",
          color: "error",
          show: true,
          timeout: 5000,
        });
      }
      return "";
    },
    cartProductsProgress: function () {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.cartProductsProgress;
      } else {
        return '';
      }
    },
    inProgress: function () {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.inProgress;
      } else {
        return '';
      }
    },
    isDesktop: function () {
      return this.$vuetify.breakpoint.xsOnly ? true : false;
    },

    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;
    },

    searchInputWidth() {
      return this.$vuetify.breakpoint.xsOnly ? "100%" : "256";
    },
    isScrolled: function () {
      let pagePath = this.$route.path;
      let isGateModulePage = pagePath.includes("/gate/");
      if (isGateModulePage) {
        return this.offsetTop > 30 ? true : false;
      }
      if (!this.heroData || this.pageName() === "CategoryPage") return true;

      return this.offsetTop > 30 ? true : false;
    },
    textColor: function () {
      let pagePath = this.$route.path;
      let isGateModulePage = pagePath.includes("/gate/");
      if (isGateModulePage) {
        return "white--text";
      }
      if (!this.heroData) return "content-color";

      if (this.offsetTop > 30) return "content-color";
      else return "white--text";
    },
    userAuth: function () {
      return this.$store.state.auth.userAuth;
    },
    
    cartProductsItem() {
      if (this.userAuth) {
        return this.$store.state.userCartProduct.cartProductList;
      } else {
        return ''
      }
    },

    /*sku: function() {
      return this.cartProductsItem.items.map(obj => obj.sku).find(obj => obj);
    },*/
    userName: function () {
      return this.$store.state.accountOne.one.firstname;
    },
    categoryList: function () {
      return this.$store.state.headerCategoryList.categoryList;
    },
    headerPromoBanner: function () {
      let cmsBlockContent = this.$store.state.layout.cmsBlockContent;

      if (cmsBlockContent.length) {
        let data = cmsBlockContent.filter((element) => {
          return element.identifier === "header-promo-banner";
        })[0];

        if (data) return data;
        else return null;
      }
      return null;
    },
    subMenuItem: {
      get: function () {
        return this.$store.state.headerCategoryList.categoryId;
      },
      set: function () {},
    },
    categoryId() {
      return this.$route.meta.id;
    },
    categoryDetailsList: function () {
      return this.$store.state.headerCategoryList.categoryDetails;
    },
  },
  methods: {
    pageMessage() {
      this.snackbar = {
        message: "Updated Product View",
        color: "success",
        show: true,
        timeout: 3000,
      };
    },
    /* eslint-disable no-alert, no-console ,  no-debugger */

    inside: function (e) {
      console.log("clicked inside!", e);
    },
    onActionScroll() {
      this.$emit("actionScroll");
    },
    pageName() {
      return this.$route.name;
    },
    menuAction: function () {
      this.$emit("action", {
        showMenu: !this.showMenu,
        categoryList: this.categoryList,
        activeCategoryMenu: this.activeCategoryMenu,
        subMenuItem: this.subMenuItem,
      });
    },
    showCartDrawer(flag) {
      if (this.userAuth) {
        this.$store.dispatch("userCartProduct/cartDrawer", flag);
      }  
    },

    showMessage(obj) {
      this.snackbar = {
        show: obj.show,
        message: obj.message,
        color: obj.color,
        timeout: obj.timeout,
      };
    },
    goToDashboard() {
      window.open("/b2b", "_self");
    },
    goToLogin() {
      localStorage.removeItem("cr_mainCategoryId");
      localStorage.removeItem("cr_subCategoryItemId");
      window.open("/gate/sign-in", "_self");
    },
    goToLogout() {
      localStorage.removeItem("cr_checkOutTab");
      let pagePath = this.$route.path;
      let isGateModulePage = pagePath.includes("/gate/");
      if (isGateModulePage) {
        window.open("/logout-success", "_self");
      } else {
        this.$router.push({
          name: "LogOutSuccess",
        });
      }
    },
    goToHomePage() {
      window.open("/", "_self");
    },
    async inactiveCategoryMenu(data) {
      this.activeCategoryMenu = data.mainMenu;
      this.$store.dispatch(
        "headerCategoryList/setCategoryId",
        data.subMenuItem
      );
      localStorage.setItem("cr_mainCategoryId", data.mainMenu);
      localStorage.setItem("cr_subCategoryItemId", data.subMenuItem);
      localStorage.setItem("cr_subCategoryId", data.subMenu);
      if (data.subMenuItem) {
        if (this.categoryDetailsList) {
          let categoryOne = await getCategoryOne(
            this.categoryDetailsList,
            data.subMenuItem
          );
          if (categoryOne) {
            this.$store.dispatch("layout/setHeroContent", categoryOne);
            let path = this.getCustomAttributeValue(categoryOne.ca, "url_path");
            console.log(categoryOne.n, categoryOne);
            let pagePath = this.$route.path;
            let isGateModulePage = pagePath.includes("/gate/");
            if (isGateModulePage) {
              window.open(`/${path}`, "_self");
            } else {
              let vm = this;
              goToCategoryPageRouting(vm, categoryOne);
            }
          }
        }
      }
    },
    activeCategories() {
      if (this.categoryId) {
        let Category = localStorage.getItem("cr_mainCategoryId");
        let subCategory = localStorage.getItem("cr_subCategoryItemId");
        if (Category && subCategory) {
          this.activeCategoryMenu = Category;
          this.$store.dispatch("headerCategoryList/setCategoryId", subCategory);
        } else if (Category) {
          this.activeCategoryMenu = Category;
        } else {
          let subMenuItem = "";
          this.activeCategoryMenu = localStorage.getItem("cr_mainCategoryId");
          this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
        }
      } else {
        localStorage.removeItem("cr_mainCategoryId");
        localStorage.removeItem("cr_subCategoryItemId");
        localStorage.removeItem("cr_subCategoryId");
      }
    },
    checkActiveCategory() {
      let Category = localStorage.getItem("cr_mainCategoryId");
      let subCategory = localStorage.getItem("cr_subCategoryItemId");
      if (Category && subCategory) {
        this.activeCategoryMenu = Category;
        this.$store.dispatch("headerCategoryList/setCategoryId", subCategory);
      } else {
        let subMenuItem = "";
        this.activeCategoryMenu = localStorage.getItem("cr_mainCategoryId");
        this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
      }
    },
    getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValueNew(customAttributes, attributeCode);
    },
    async categoryProducts(categoryId) {
      if (this.categoryDetailsList) {
        let categoryOne = await getCategoryOne(
          this.categoryDetailsList,
          categoryId
        );
        if (categoryOne) {
          this.$store.dispatch("layout/setHeroContent", categoryOne);
          let path = this.getCustomAttributeValue(categoryOne.ca, "url_path");
          this.activeCategoryMenu = categoryId;
          console.log(categoryOne.n, categoryOne);
         /* googleAanalyticsEventCategory(
            "browse_category",
            "ecommerce",
            categoryDetails
          );*/
          localStorage.setItem("cr_mainCategoryId", categoryId);
          localStorage.removeItem("cr_subCategoryItemId");
          localStorage.removeItem("cr_subCategoryId");
          let subMenuItem = "";
          this.$store.dispatch("headerCategoryList/setCategoryId", subMenuItem);
          this.$emit("actionScroll");
          let pagePath = this.$route.path;
          let isGateModulePage = pagePath.includes("/gate/");
          if (isGateModulePage) {
            window.open(`/${path}`, "_self");
          } else {
            let vm = this;
            goToCategoryPageRouting(vm, categoryOne);
          }
          this.$store
            .dispatch("catalogBrowser/search", {
              fullCatalog: window.craneCatalog,
              keywords: "",
              filters: [{ label: "Category", prop: "ci", value: categoryId }],
              pageNumber: 1,
              pageSize: 9,
              sortBy: "position",
            })
            .catch((error) => {
              error;
            });
        }
      }
    },
    GotoPage() {
      if (this.search) {
        // this.search = null;
        this.showSearchInput = false;
        this.searchResultList = [];
        let searchKeywords = this.search;
        let pagePath = this.$route.path;
        let isGateModulePage = pagePath.includes("/gate/");
        if (isGateModulePage) {
          window.open(
            `/search?pageNumber=1&pageSize=9&sortBy=relevance&q=${searchKeywords}&filter=W10=`,
            "_self"
          );
        } else {
          this.$router
            .push({
              name: "SearchPage",
              query: {
                pageNumber: 1,
                pageSize: 9,
                sortBy: "relevance",
                q: searchKeywords,
                filter: "W10=",
              },
            })
            .catch((error) => {
              error;
            });
          this.$store.dispatch("catalogBrowser/search", {
            fullCatalog: window.craneCatalog,
            keywords: searchKeywords,
            filters: [],
            pageNumber: 1,
            pageSize: 9,
            sortBy: "relevance",
          });
        }
        localStorage.removeItem("cr_subCategoryItemId");
        localStorage.removeItem("cr_subCategoryId");
        localStorage.removeItem("cr_mainCategoryId");
        this.search = null;
      }
    },
    closeBanner() {
      setTimeout(() => {
        this.heroBanner = true;
      }, 10000);
    },
  },
  created() {
    if (
      localStorage.getItem("cr_mainCategoryId") ||
      localStorage.getItem("cr_subCategoryItemId")
    ) {
      this.activeCategories();
    } else {
      localStorage.setItem("cr_mainCategoryId", this.categoryId);
      this.activeCategories();
    }
  },
};
</script>
<style src="./Header.scss" lang="scss" scopped/>