ShowEasyFrontEnd/FrontEnd/components/NavBar.vue

<template>
  <div
    class="NavBar tw-bg-white tw-sticky tw-top-0 tw-left-0 tw-w-full tw-border-0 tw-border-b tw-border-solid tw-border-neutral-200 tw-z-10"
  >
    <div
      class="tw-px-[20px] tw-py-[20px] md:tw-px-[30px] md:tw-py-[24px] xl:tw-px-[60px] xl:tw-pt-[22px] xl:tw-pb-[14px] xl:tw-max-w-[1366px] xl:tw-mx-auto"
    >
      <div class="tw-flex tw-justify-between tw-items-center xl:tw-h-[48px]">
        <div
          class="tw-flex tw-items-center tw-flex-grow xl:tw-grid xl:tw-grid-cols-[188px_auto] xl:tw-gap-[30px] xl:tw-basis-[70%]"
        >
          <img
            class="tw-mr-[20px] md:tw-mr-[40px] xl:tw-hidden"
            :src="require('@/assets/svg/menu.svg')"
            @click="clickMenu"
          />
          <nuxt-link
            :to="localePath('/')"
            class="tw-block tw-w-[146px] md:tw-w-[188px]"
            ><img
              :src="require('@/assets/svg/logo_v2.svg')"
              class="tw-w-full"
              alt=""
            />
          </nuxt-link>
          <!-- <v-card class="tw-hidden flex-row rounded-lg py-1 px-4 xl:tw-flex xl:tw-ml-[30px]" outlined
            v-if="showNavSearch" @click="bigSearch = true">
            <v-card flat color="transparent" :width="$vuetify.breakpoint.mdAndDown ? '70px' : '300px'"
              class="my-auto neutrals--text text--darken-3 text-size-14">
              {{
              this.$vuetify.breakpoint.mdAndDown
              ? $t("Looking ?")
              : $t("What are you looking for?")
              }}
            </v-card>
            <svg width="24" height="24" class="tw-my-auto" shape-rendering="geometricPrecision">
              <image xlink:href="@/assets/svg/icon-search-small.svg" src="@/assets/svg/icon-search-small.svg" width="24"
                height="24" />
            </svg>
          </v-card> -->
          <div v-if="showNavSearch" class="tw-w-full tw-hidden xl:tw-block">
            <Search
              v-if="showNavSearch"
              :exhibitionsCategories="exhibitionsCategories"
              :exhibitionsLocations="exhibitionsLocations"
              :exhibitionsSearchs="exhibitionsSearchs"
              :servicesLocations="servicesLocations"
              :servicesSearchs="servicesSearchs"
              @loaading="isPageLoading = true"
            />
          </div>
        </div>
        <div
          class="tw-basis-[46%] md:tw-basis-[66%] xl:tw-basis-[43%] xl:tw-ml-[56px]"
          v-click-outside="clickOutSide"
        >
          <div class="tw-flex tw-justify-end xl:tw-hidden">
            <div class="tw-flex tw-justify-center tw-items-center">
              <v-img
                max-width="24"
                class="mr-4 float-left"
                contain
                :src="require('@/assets/svg/search-black.svg')"
                @click="clickSearch"
              ></v-img>
            </div>
            <!--v-img
            max-width="24"
            class="mr-4 hidden-md-and-up"
            contain
            :src="require('@/assets/svg/shopping-bag.svg')"
          ></v-img-->
            <span max-width="28px" v-if="$auth.$state.loggedIn">
              <v-menu
                offset-y
                bottom
                left
                nudge-bottom="20"
                class="neutrals darken-1 mt-4 on-top"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    v-bind="attrs"
                    v-on="on"
                    @click="UserInfoPopup = true"
                    v-if="$auth.$storage.getUniversal('userPicture')"
                    icon
                    width="28px"
                    height="28px"
                    class="ms-2"
                  >
                    <v-img
                      :src="userPicture"
                      max-width="28px"
                      max-height="28px"
                      class="rounded-circle"
                      :key="userPicture"
                    ></v-img>
                  </v-btn>
                  <v-btn
                    v-bind="attrs"
                    v-on="on"
                    @click="UserInfoPopup = true"
                    v-else-if="
                      $auth.$storage.getUniversal('userLastName') != undefined
                    "
                    fab
                    class="user-no-picture-border mx-2 tw-shadow-none"
                    color="primary"
                    width="28"
                    height="28"
                  >
                    <span class="tw-text-[16px]">
                      {{ $auth.$storage.getUniversal("userLastName") }}
                    </span>
                  </v-btn>
                  <nuxt-link
                    v-else
                    class="tw-bg-primary-default tw-rounded-[12px] tw-whitespace-nowrap tw-block tw-text-white tw-px-[16px] tw-py-[9px] tw-whitespace-nowrap tw-text-[10px] tw-font-medium tw-transition-all tw-duration-200 tw-ease-in-out hover:tw-bg-primary-light"
                    :to="localePath('/user')"
                  >
                    {{ $t("Log in/Sign up") }}
                  </nuxt-link>
                </template>
                <div class="neutrals darken-1 tw-hidden xl:tw-block">
                  <v-btn
                    :to="
                      localePath(
                        $auth.$storage.getUniversal('jwt')
                          ? `/user/${
                              $auth.$storage.getUniversal('jwt').user_id
                            }`
                          : ''
                      )
                    "
                    class="neutrals darken-1 neutrals--text text--darken-5 no-text-transform elevation-0 text-size-14"
                  >
                    <unicon
                      class="mr-3"
                      name="user"
                      height="20px"
                      fill="neutrals-darken5"
                    />{{ $t("Profile") }}
                  </v-btn>
                  <v-btn
                    @click="logout"
                    class="neutrals darken-1 warning--text no-text-transform elevation-0"
                  >
                    <unicon
                      class="mr-3 text-size-14"
                      name="signout"
                      height="20px"
                      fill="#EF5A5A"
                    />{{ $t("Logout") }}
                  </v-btn>
                </div>
                <!-- <v-list class="neutrals darken-1 tw-hidden xl:tw-block">
                  <v-list-item>
                    <v-btn :to="
                      localePath(
                        $auth.$storage.getUniversal('jwt')
                          ? `/user/${
                              $auth.$storage.getUniversal('jwt').user_id
                            }`
                          : ''
                      )
                    "
                      class="neutrals darken-1 neutrals--text text--darken-5 no-text-transform elevation-0 text-size-14">
                      <unicon class="mr-3" name="user" height="20px" fill="neutrals-darken5" />{{ $t("Profile") }}
                    </v-btn>
                  </v-list-item>
                  <v-list-item>
                    <v-btn @click="logout" class="neutrals darken-1 warning--text no-text-transform elevation-0">
                      <unicon class="mr-3 text-size-14" name="signout" height="20px" fill="#EF5A5A" />{{ $t("Logout") }}
                    </v-btn>
                  </v-list-item>
                </v-list> -->
              </v-menu>
            </span>
            <span v-else>
              <nuxt-link :to="localePath('/user')">
                <img class="" :src="require('@/assets/svg/profile.svg')" />
              </nuxt-link>
            </span>
          </div>
          <div
            class="tw-hidden xl:tw-flex xl:tw-justify-end xl:tw-items-center"
          >
            <v-btn
              v-if="$i18n.locale == 'zh-tw'"
              depressed
              class="remove-upper tw-mx-0 tw-px-0 tw-bg-transparent tw-text-primary-default"
              href="https://medium.com/showeasy"
              target="_blank"
            >
              {{ $t("Blog") }}
            </v-btn>
            <v-btn
              v-else
              depressed
              class="remove-upper tw-mx-0 tw-px-0 tw-bg-transparent tw-text-primary-default"
              href="https://medium.com/showeasy-eng"
              target="_blank"
            >
              {{ $t("Blog") }}
            </v-btn>
            <v-menu offset-y class="on-top">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  v-bind="attrs"
                  v-on="on"
                  depressed
                  class="white neutrals--text text--darken-5 no-text-transform tw-body-3 tw-font-normal"
                >
                  {{ $i18n.localeProperties["title"] }}
                  <img src="@/assets/svg/down-arrow.svg" alt="" class="ml-1" />
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="(lang, idx) in this.$i18n.locales"
                  :key="idx"
                  class="tw-mx-auto"
                >
                  <nuxt-link
                    :to="switchLocalePath(lang.code)"
                    class="tw-rounded-[10px] tw-text-base-primary text-decoration-none tw-body-3 tw-font-normal tw-w-full tw-px-[12px] tw-py-[8px] hover:tw-bg-primary-3 hover:tw-text-primary-1"
                  >
                    {{ lang.text }}
                  </nuxt-link>
                </v-list-item>
              </v-list>
            </v-menu>
            <changeCurrency></changeCurrency>
            <nuxt-link
              class="tw-px-[10px] tw-mr-[10px] hover:tw-bg-primary-3 active:tw-bg-primary-3"
              :to="localePath('/FAQ')"
              ><img src="~/assets/svg/faq.svg" alt=""
            /></nuxt-link>
            <!-- <v-btn
              depressed
              class="white tw-mr-[16px]"
              :to="localePath('/FAQ')"
            >
              <svg width="20" height="20">
                <image
                  xlink:href="@/assets/svg/help-circle.svg"
                  src="@/assets/svg/help-circle.svg"
                  width="20"
                  height="20"
                />
              </svg>
            </v-btn> -->
            <!-- <v-btn depressed class="white" small>
                <img src="@/assets/svg/shopping-bag.svg" alt="" />
              </v-btn> -->

            <div v-if="$auth.$state.loggedIn" class="tw-relative">
              <div
                v-if="$auth.$storage.getUniversal('userPicture')"
                class="tw-mx-auto"
              >
                <img
                  :src="userPicture"
                  class="tw-max-w-[28px] tw-max-h-[28px] tw-rounded-[50px] tw-flex tw-items-center tw-cursor-pointer"
                  @click="UserInfoPopup = true"
                  alt=""
                />
              </div>
              <v-btn
                @click="UserInfoPopup = true"
                v-else-if="
                  $auth.$storage.getUniversal('userLastName') != undefined
                "
                fab
                class="user-no-picture-border mx-2 tw-shadow-none"
                color="primary"
                width="28"
                height="28"
              >
                <span class="tw-text-[16px]">
                  {{ $auth.$storage.getUniversal("userLastName") }}
                </span>
              </v-btn>
              <nuxt-link
                v-else
                class="tw-bg-primary-default tw-rounded-[12px] tw-whitespace-nowrap tw-block tw-text-white tw-px-[16px] tw-py-[9px] tw-whitespace-nowrap tw-text-[10px] tw-font-medium tw-transition-all tw-duration-200 tw-ease-in-out hover:tw-bg-primary-light"
                :to="localePath('/user')"
              >
                {{ $t("Log in/Sign up") }}
              </nuxt-link>
              <div
                :class="[
                  'tw-grid-cols-1 tw-gap-[14px] tw-px-[10px] tw-py-[8px] tw-bg-white tw-rounded-[10px] tw-w-max tw-absolute  tw-right-0 tw-top-[40px] tw-z-50 tw-shadow-[0_1px_4px_0_rgba(0,0,0,0.3)]',
                  UserInfoPopup && width >= 1366 ? 'tw-grid' : 'tw-hidden',
                ]"
              >
                <nuxt-link
                  :to="
                    localePath(
                      $auth.$storage.getUniversal('jwt')
                        ? `/user/${$auth.$storage.getUniversal('jwt').user_id}`
                        : ''
                    )
                  "
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
                  @click.native="UserInfoPopup = false"
                  ><img src="~/assets/svg/profile.svg" alt="" />
                  <div class="tw-head-body tw-text-base-primary">
                    {{ $t("userProfile.profile") }}
                  </div>
                </nuxt-link>
                <!-- <nuxt-link :to="localePath('/user/myBooking')"
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"><img
                    src="~/assets/svg/bookings.svg" alt="" />
                  <div class="tw-head-body tw-text-base-primary">
                    {{ $t('My Bookings')}}
                  </div>
                </nuxt-link> -->
                <nuxt-link
                  :to="localePath('/user/saveExhibition')"
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
                  @click.native="UserInfoPopup = false"
                  ><img src="~/assets/svg/saveExhibition.svg" alt="" />
                  <div class="tw-head-body tw-text-base-primary">
                    {{ $t("userProfile.savedExhibitions") }}
                  </div>
                </nuxt-link>
                <!-- <nuxt-link :to="localePath('/user/saveService')"
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
                  @click.native="UserInfoPopup = false"><img src="~/assets/svg/saveService.svg" alt="" />
                  <div class="tw-head-body tw-text-base-primary">
                    {{ $t("userProfile.savedServices") }}
                  </div>
                </nuxt-link> -->
                <nuxt-link
                  :to="localePath('/user/companyInfo')"
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
                  @click.native="UserInfoPopup = false"
                  ><img src="~/assets/svg/companyInfo.svg" alt="" />
                  <div class="tw-head-body tw-text-base-primary">
                    {{ $t("userProfile.companyInfo") }}
                  </div>
                </nuxt-link>
                <nuxt-link
                  :to="localePath('/user/contactInfo')"
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
                  @click.native="UserInfoPopup = false"
                  ><img src="~/assets/svg/contactInfo.svg" alt="" />
                  <div class="tw-head-body tw-text-base-primary">
                    {{ $t("Contact Info") }}
                  </div>
                </nuxt-link>
                <nuxt-link
                  :to="localePath('/user/setting')"
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
                  @click.native="UserInfoPopup = false"
                  ><img src="~/assets/svg/profile_setting.svg" alt="" />
                  <div class="tw-head-body tw-text-base-primary">
                    {{ $t("userProfile.setting") }}
                  </div>
                </nuxt-link>
                <div
                  class="tw-border tw-border-t tw-border-solid tw-border-neutral-200"
                ></div>
                <button
                  class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[10px] tw-px-[10px] tw-py-[8px]"
                  @click="logout"
                >
                  <img src="~/assets/svg/logout.svg" alt="" />
                  <div
                    class="tw-flex tw-head-body tw-text-error-default tw-justify-start"
                  >
                    {{ $t("userProfile.logout") }}
                  </div>
                </button>
              </div>
            </div>

            <div v-else>
              <nuxt-link
                :to="localePath('/user')"
                class="tw-text-[14px] tw-min-w-[123px] tw-whitespace-nowrap tw-text-white tw-bg-primary-1 tw-px-[16px] tw-py-[9px] tw-rounded-[12px]"
              >
                {{ $t("Log in/Sign up") }}</nuxt-link
              >
            </div>
          </div>
        </div>
      </div>
      <div
        ref="dropdown"
        :class="[
          'navBar-row2 tw-relative  tw-hidden xl:tw-grid xl:tw-mt-[35px] tw-transition-all tw-duration-200 tw-delay-75  tw-ease-linear',
        ]"
      >
        <div
          class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-3"
          @mouseleave="exhibitionActiveIndex = 0"
        >
          <a
            :href="localePath('/exhibition')"
            @click="isPageLoading = true"
            :class="[
              'tw-text-black tw-body-3 tw-font-normal hover:tw-text-primary-default',
              $route.path.match('\/exhibition')
                ? 'tw-text-primary-default'
                : '',
            ]"
          >
            {{ $t("Exhibition") }}</a
          >
          <div
            class="customDropMenu exhibition tw-bg-white tw-p-[20px] tw-rounded-[10px] tw-w-max tw-absolute tw-top-[36px] tw-left-0 tw-mt-[10px] tw-overflow-hidden tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
          >
            <div
              class="tw-relative tw-grid tw-grid-cols-2 tw-w-[700px] tw-h-[556px] tw-overflow-hidden"
            >
              <div
                class="tw-list-none tw-overflow-x-hidden tw-overflow-y-auto tw-h-auto tw-break-inside-avoid tw-grid tw-grid-cols-1 tw-gap-[20px]"
              >
                <div
                  class="tw-list-none tw-mr-[20px]"
                  v-for="(item, index) in exhibitionsCategoryList"
                  :key="index"
                  @mouseover="exhibitionActiveIndex = index"
                >
                  <div
                    :class="[
                      'exhibitionDropdownLink tw-grid tw-grid-cols-[30px_auto] tw-gap-[10px] tw-body-4 tw-font-normal hover:tw-text-primary-default',
                      exhibitionActiveIndex == index
                        ? 'tw-text-primary-default active'
                        : 'tw-text-neutrals-900',
                    ]"
                  >
                    <img
                      v-if="exhibitionListIcon[index] !== undefined"
                      :src="
                        require(`@/assets/img/CategoryIcon/${exhibitionListIcon[index]}.png`)
                      "
                    /><span class="tw-flex tw-items-center tw-min-w-[322px]">{{
                      $t(item.title)
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="tw-w-full tw-overflow-x-hidden tw-overflow-y-auto">
                <ul
                  class="tw-list-none tw-grid tw-grid-cols-1 tw-gap-[20px] tw-px-[20px]"
                >
                  <li class="tw-list-none">
                    <a
                      :href="
                        localePath(
                          `/exhibition?category=${exhibitionsCategoryList[exhibitionActiveIndex].id}`
                        )
                      "
                      class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default"
                      >{{ $t("All") }}</a
                    >
                  </li>
                  <li
                    v-for="(sub, index) in exhibitionsCategoryList[
                      exhibitionActiveIndex
                    ].subcategory"
                    :key="index"
                    class="tw-list-none"
                  >
                    <a
                      :href="localePath(`/exhibition?subcategory=${sub.id}`)"
                      class="tw-block tw-min-h-[30px] tw-body-4 tw-font-normal tw-min-w-[230px] tw-text-neutral-800 hover:tw-text-primary-default"
                      >{{ sub.title }}</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <span class="vertical-line"></span>
        <div
          class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-3"
        >
          <a
            :href="localePath('/service')"
            :class="[
              'tw-text-black tw-body-3 tw-font-normal hover:tw-text-primary-default',
              $route.path.match('\/service') ? 'tw-text-primary-default' : '',
            ]"
          >
            {{ $t("All Services") }}</a
          >
          <div
            class="customDropMenu services tw-bg-white tw-p-[20px] tw-rounded-[10px] tw-w-max tw-absolute tw-top-[36px] tw-left-0 tw-mt-[10px] -tw-mb-[60px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
          >
            <ul
              v-for="(item, index) in serviceCategoryList"
              :key="item.id"
              class="tw-list-none tw-mb-0 tw-mr-[40px] tw-h-auto tw-break-inside-avoid"
            >
              <li class="tw-list-none">
                <a
                  :href="localePath(`/service?category=${item.id}`)"
                  class="tw-block tw-mb-[16px] tw-grid tw-grid-cols-[16px_auto] tw-gap-[10px] tw-body-4 tw-font-normal tw-text-primary-default hover:tw-text-primary-default"
                >
                  <svg
                    width="16"
                    height="16"
                    class="tw-my-auto"
                    shape-rendering="geometricPrecision"
                    v-if="serviceListIcon[index] !== undefined"
                  >
                    <image
                      :xlink:href="
                        require(`@/assets/svg/${serviceListIcon[index]}.svg`)
                      "
                      :src="
                        require(`@/assets/svg/${serviceListIcon[index]}.svg`)
                      "
                      width="16"
                      height="16"
                    />
                  </svg>
                  <div v-else></div>
                  <span>{{ item.title }}</span>
                </a>
                <ul
                  class="tw-list-none tw-grid tw-grid-cols-1 tw-gap-[16px] tw-p-0"
                >
                  <li
                    v-for="(sub, index) in item.subcategory"
                    :key="index"
                    class="tw-list-none"
                  >
                    <a
                      :href="localePath(`/service?subcatg=${sub.id}`)"
                      class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default"
                      >{{ sub.title }}</a
                    >
                  </li>
                </ul>
              </li>
              <div class="tw-h-[60px]"></div>
            </ul>
          </div>
        </div>
        <div
          ref="headerSwiper"
          class="swiper-container headerService tw-w-full tw-overflow-hidden tw-relative tw-max-w-[1008px] tw-ml-[25px] tw-transition-all tw-duration-200 tw-delay-75 tw-ease-in"
        >
          <div class="swiper-wrapper">
            <div
              class="swiper-slide customMenuLink tw-relative tw-justify-start tw-items-center tw-w-auto"
              v-for="item in serviceCategoryList"
              :key="item.id"
            >
              <a
                :href="localePath(`/service?category=${item.id}`)"
                class="tw-text-black tw-body-3 tw-font-normal hover:tw-text-primary-default tw-whitespace-nowrap"
                >{{ item.title }}</a
              >
              <ul
                class="customDropMenu oneType tw-grid-cols-1 tw-gap-[16px] tw-bg-white tw-p-[20px] tw-rounded-[10px] tw-w-max tw-absolute tw-top-[36px] tw-left-0 tw-mt-[10px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
              >
                <li
                  v-for="(sub, index) in item.subcategory"
                  :key="index"
                  class="tw-list-none"
                >
                  <a
                    :href="localePath(`/service?subcatg=${sub.id}`)"
                    class="tw-block tw-body-4 tw-font-normal tw-text-black hover:tw-text-primary-default"
                    >{{ sub.title }}</a
                  >
                </li>
              </ul>
            </div>
          </div>
          <div
            :class="[
              'swiper-button-prev headerService tw-text-black tw-hidden',
              headerServiceSwiper
                ? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
                : '',
            ]"
          ></div>
          <div
            :class="[
              'swiper-button-next headerService tw-text-black tw-hidden',
              headerServiceSwiper
                ? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
                : '',
            ]"
          ></div>
        </div>
      </div>
    </div>
    <Drawer
      :serviceCategory.sync="serviceCategoryList"
      :exhibitionsCategory.sync="exhibitionsCategoryList"
      :serviceListIcon="serviceListIcon"
      :exhibitionListIcon="exhibitionListIcon"
      @changeLang="changeLang()"
    />
    <SearchDialog
      ref="searchDialog"
      :exhibitionsCategoryList="exhibitionsCategoryList"
      :exhibitionsLocations="exhibitionsLocations"
      :exhibitionListIcon="exhibitionListIcon"
      :exhibitionsCategories="exhibitionsCategories"
      :servicesLocations="servicesLocations"
      :servicesSearchs="servicesSearchs"
      :populars="populars"
      @loaading="isPageLoading = true"
    />
    <mobileUserInfoPopup
      v-show="width < 1366"
      :show="UserInfoPopup"
      :width="width"
      @popup="UserInfoPopup = $event"
    >
    </mobileUserInfoPopup>
    <loading :isLoading="isPageLoading"></loading>
  </div>
</template>
<script>
import Search from "@/components/home/headerInlineSearch";
import Drawer from "@/components/newDrawer";
import SearchDialog from "@/components/SearchDialog";
import mobileUserInfoPopup from "@/components/mobileUserInfoPopup.vue";
import { SettingsIcon } from "vue-feather-icons";
import jwt_decode from "jwt-decode";
import loading from "@/components/newComponent/loading/loading.vue";
import changeCurrency from "@/components/dropdown/changeCurrencyWeb.vue";
import Swiper from "swiper/bundle";

import { handler } from "@tailwindcss/line-clamp";
export default {
  components: {
    Drawer,
    Search,
    SettingsIcon,
    SearchDialog,
    mobileUserInfoPopup,
    loading,
    changeCurrency,
    Swiper,
  },
  data() {
    return {
      show: false,
      bigSearch: false,
      userPicture: "",
      showNavSearch: true,
      servicesSearchs: [],
      servicesLocations: [],
      serviceCategoryList: [],
      serviceListIcon: [
        "Booth",
        "Exhibit",
        "event",
        "Marketing",
        "journey",
        "human",
        "service_others",
      ],
      exhibitionsCategoryList: [{ subcategory: [] }],
      exhibitionsSearchs: [],
      exhibitionsLocations: [],
      exhibitionsCategories: [],
      exhibitionListIcon: [
        "rawMaterial",
        "aeroSpace",
        "energy",
        "autoMobile",
        "electronics",
        "contrucstion",
        "security",
        "Machinary",
        "Medical",
        "education",
        "textile",
        "food",
        "entertainment",
        "consumer",
        "others",
      ],
      populars: {},
      exhibitionActiveIndex: 0,
      width: undefined,
      drawer: false,
      group: null,
      isPageLoading: false,
      UserInfoPopup: false,
      headerServiceSwiper: null,
      offsetLeft: 0,
      top: 0,
      TAIWAN_ID: 18,
      JAPAN_ID: 16,
      ITALY_ID: 31,
    };
  },
  async created() {
    if (process.client) {
      this.width = window.innerWidth;
    }
    if (!this.$route) return;
    if (!this.$route.name) return;
    const [path, lang] = this.$route.name.split("___");
    if (path == "index") {
      this.showNavSearch = false;
    } else {
      this.showNavSearch = true;
    }
    await this.fetchUser();
    await this.socialRegister();
    // await this.getServiceCategory();
    // await this.getExhibitionsCategory();
    // await this.getServiceHistory();
    // await this.getExhibitionsHistory();
    // await this.getServiceLocations();
    // await this.getExhibitionsLocations();
    // await this.getExhibitionsCategories();
    // await this.getExhibitionsCollections();
    // await this.getPopulars();
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      window.addEventListener("resize", this.onResize);
      vm.initSwiper();
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  computed: {
    windowWidth() {
      if (process.client) {
        this.width = window.innerWidth;
      }
      return this.width;
    },
    pictureStatus() {
      return this.$store.getters.getPictureStatus;
    },
    registerStatus() {
      return this.$store.getters.getRegisterStatus;
    },
    lang() {
      return this.$i18n.localeProperties["langQuery"];
    },
  },
  watch: {
    group: {
      handler: function () {
        this.drawer = false;
      },
    },
    $route: {
      handler: function (to, from) {
        if (!to) return;
        if (!to.name) return;
        const [path, lang] = to.name.split("___");
        if (path == "index") {
          this.showNavSearch = false;
        } else {
          this.showNavSearch = true;
        }
        if (path === "exhibition") {
          this.isPageLoading = false;
        }
        if (path === "service") {
          this.isPageLoading = false;
        }

        if (to != from) {
          this.bigSearch = false;
        }
      },
    },
    pictureStatus: {
      handler: function (newVal, oldVal) {
        this.fetchUser();
        this.$forceUpdate();
      },
    },
    registerStatus: {
      handler: function (newVal, oldVal) {
        this.socialRegister();
      },
    },
    lang: {
      handler: async function (newVal, oldVal) {
        if (newVal != oldVal) {
          this.$refs.dropdown.style.opacity = 0;
          // await this.getServiceCategory();
          // await this.getExhibitionsCategory();
          // await this.getServiceHistory();
          // await this.getExhibitionsHistory();
          // await this.getServiceLocations();
          // await this.getExhibitionsLocations();
          // await this.getExhibitionsCategories();
          // await this.getExhibitionsCollections();
          await this.initSwiper();
        }
      },
    },
  },
  methods: {
    clickOutSide() {
      this.show = false;
      this.UserInfoPopup = false;
    },
    onResize() {
      if (process.client) {
        this.width = window.innerWidth;
      }
    },
    clickMenu() {
      if (this.windowWidth < 1366) {
        this.$store.dispatch("toggleDrawer", true);
      }
    },
    clickSearch() {
      this.$store.dispatch("toggleSearchDialog", true);
    },
    initSwiper() {
      let vm = this;
      vm.$nextTick(function () {
        vm.headerServiceSwiper = new Swiper(".swiper-container.headerService", {
          direction: "horizontal",
          initialSlide: 0,
          observer: true,
          observeParents: true,
          rebuildOnUpdate: true,
          slidesPerView: "auto",
          spaceBetween: 25,
          watchSlidesVisibility: true,
          slideVisibleClass: "swiper-slide-visible",
          allowTouchMove: false,
          navigation: {
            nextEl: ".swiper-button-next.headerService",
            prevEl: ".swiper-button-prev.headerService",
          },
        });
        vm.headerServiceSwiper.init();
        vm.headerServiceSwiper.update();
        // this.$refs.headerSwiper.style.opacity = 1;
        vm.$refs.dropdown.style.opacity = 1;
      });
    },
    async fetchUser() {
      if (this.$auth.loggedIn) {
        const jwt = this.$auth.$storage.getUniversal("jwt");
        let jsonPayload = {};
        if (jwt) {
          const token = this.$auth.$storage.getUniversal("jwt").token;
          jsonPayload = jwt_decode(token) || {};
        }
        if (!this.$auth.$storage.getUniversal("userPicture")) {
          this.userPicture = jsonPayload.picture || "";
          this.$auth.$storage.setUniversal("userPicture", jsonPayload.picture);
        } else {
          this.userPicture = this.$auth.$storage.getUniversal("userPicture");
        }
        this.$auth.$storage.setUniversal(
          "userLastName",
          jsonPayload && jsonPayload.last_name
            ? jsonPayload.last_name.substring(0, 1)
            : ""
        );
      }
    },
    getServiceCategory() {
      let vm = this;
      vm.$nextTick(() => {
        vm.$axios
          .get(`/service/category?lang_code=${this.lang}`)
          .then((result) => {
            vm.serviceCategoryList = result.data.map((item) => {
              const subcategory = item.service_subcategory.map((sub) => {
                return {
                  id: sub.id,
                  title: sub.language_text[0].text,
                  key: sub.language_text[0].text,
                  type: "subcategory",
                  order: sub.order_in_category,
                };
              });
              return {
                id: item.id,
                order: item.order,
                title: item.language_text[0].text,
                key: item.language_text[0].text,
                type: "category",
                subcategory: subcategory,
              };
            });
            return result.data;
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    async getExhibitionsCategory() {
      await this.$axios
        .get(
          `/t/exhibitions/categories?lang=${this.$i18n.localeProperties["langQuery"]}&sort=true`
        )
        .then((result) => {
          this.exhibitionsCategoryList = result.data.sort_results;
          this.exhibitionsCategoryList = this.exhibitionsCategoryList.map(
            (item) => {
              item.subcategories_list = item.subcategories_list.map(
                (children) => {
                  return {
                    id: children.subcategory_id,
                    title: children.subcategory_name,
                    key: children.subcategory_name,
                    type: "subcategory",
                  };
                }
              );
              return {
                id: item.categories_id,
                title: item.category_name,
                key: item.category_name,
                type: "category",
                subcategory: item.subcategories_list,
              };
            }
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getServiceHistory() {
      await this.$axios
        .get(
          `/trending/services/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          this.servicesSearchs = response.data.searches;
        })
        .catch((error) => console.log(error));
    },
    async getExhibitionsHistory() {
      await this.$axios
        .get(
          `/trending/exhibitions/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          this.exhibitionsSearchs = response.data.searches;
        })
        .catch((error) => console.log(error));
    },
    async getServiceLocations() {
      await this.$axios
        .get(
          `/trending/services/locations?lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          this.servicesLocations = response.data.locations;
        })
        .catch((error) => console.log(error));
    },
    async getExhibitionsLocations() {
      await this.$axios
        .get(
          `/trending/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          this.exhibitionsLocations = response.data.locations;
        })
        .catch((error) => console.log(error));
    },
    async getExhibitionsCategories() {
      await this.$axios
        .get(
          `/t/exhibitions/categories?lang=${this.$i18n.localeProperties["langQuery"]}&sort=true`
        )
        .then((result) => {
          this.exhibitionsCategories = result.data.sort_results;
          this.exhibitionsCategories = this.exhibitionsCategories.map(
            (item) => {
              item.subcategories_list = item.subcategories_list.map(
                (children) => {
                  return {
                    id: children.subcategory_id,
                    title: children.subcategory_name,
                    key: children.subcategory_name,
                    type: "subcategory",
                  };
                }
              );
              return {
                id: item.categories_id,
                title: item.category_name,
                key: item.category_name,
                type: "category",
                subcategory: item.subcategories_list,
              };
            }
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getExhibitionsCollections() {
      await this.$axios
        .get(
          `/trending/exhibitions/collections?lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          this.collections = response.data.collections;
        })
        .catch((error) => console.log(error));
    },
    async changeLang() {
      // await this.getServiceCategory();
      // await this.getExhibitionsCategory();
      // await this.getServiceHistory();
      // await this.getExhibitionsHistory();
      // await this.getServiceLocations();
      // await this.getExhibitionsLocations();
      // await this.getExhibitionsCategories();
      // await this.getExhibitionsCollections();
    },
    async getPopulars() {
      await this.$axios
        .get(
          `/trending/search/popular?lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          this.populars = response.data;
        })
        .catch((error) => console.log(error));
    },
    logout() {
      this.$auth.$storage.removeUniversal("jwt");
      this.$auth.$storage.removeUniversal("userPicture");
      this.$auth.$storage.removeUniversal("userLastName");
      this.$auth.$storage.removeUniversal("userBeforePath");
      if (this.width < 1024) {
        this.$router.push(this.localePath("/"));
      } else {
        this.$router.push(this.localePath("/user"));
      }
      this.$auth.logout();
      this.$nuxt.refresh();
      this.UserInfoPopup = false;
    },
    async socialRegister() {
      if (this.$auth.loggedIn) {
        const jsonPayload =
          this.$auth.$storage.getUniversal("jwt") &&
          this.$auth.$storage.getUniversal("jwt").token != undefined
            ? jwt_decode(this.$auth.$storage.getUniversal("jwt").token)
            : { ueid: "" };
        if (
          this.$auth.$state.strategy === "google" ||
          this.$auth.$state.strategy === "facebook"
        ) {
          const userData = {
            social_id:
              this.$auth.$state.strategy === "google"
                ? this.$auth.$state.user.sub
                : this.$auth.$state.user.id,
            first_name:
              this.$auth.$state.strategy === "google"
                ? this.$auth.$state.user.given_name
                : this.$auth.$state.user.first_name,
            last_name:
              this.$auth.$state.strategy === "google"
                ? this.$auth.$state.user.family_name
                : this.$auth.$state.user.last_name,
            email: this.$auth.$state.user.email,
            picture:
              this.$auth.$state.strategy === "google"
                ? this.$auth.$state.user.picture
                : this.$auth.$state.user.picture.data.url,
            social_schema: this.$auth.$state.strategy,
          };
          jsonPayload.ueid != ""
            ? (userData.user_id = JSON.parse(jsonPayload.ueid))
            : "";
          await this.$axios
            .post("/member/users/social", userData)
            .then((result) => {
              this.$auth.$storage.setUniversal("jwt", result.data, true);
              this.$store.dispatch("updatePicture");
            })
            .catch((err) => {
              console.log(err);
            });
        }
        this.$store.dispatch("updatePicture");
      }
    },
    toShowList(countryId) {
      if (countryId > 0) {
        this.$router.push(this.localePath(`/exhibition?country=${countryId}`));
      } else {
        this.$router.push(this.localePath(`/exhibition`));
      }
      this.isPageLoading = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.v-menu__content {
  box-shadow: none;
  min-width: 186px;
  border-radius: 10px;
}

.v-list-item {
  padding-left: 12px;
  padding-right: 12px;
  color: #232323 !important;
}

.navBar-row2 {
  opacity: 0;
  grid-template-columns: fit-content(70px) 50px fit-content(90px) auto;
}

.navBar-row2 {
  opacity: 0;
  grid-template-columns: fit-content(70px) 50px fit-content(90px) auto;
}

.vertical-line {
  display: inline-block;
  border-left: 1.5px solid;
  margin: 5px 20px 5px 20px;
  height: 15px;
}

:deep(.v-toolbar__content) {
  max-width: 1366px;
  width: 1366px;
}

.user-picture-container {
  width: 28px;
  height: 28px;
}

.user-picture-border {
  border: 1px solid #f5cda8;
}

.user-no-picture-border {
  border: 2px solid #f5cda8;
}

.user-no-picture-font {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
}

.v-btn:before {
  background-color: rgba(238, 149, 70, 0.6) !important;
  font-color: #ee9546;
}

.on-top {
  z-index: 500;
}

.customMenuLink {
  &::after {
    content: "";
    display: block;
    width: 150%;
    height: 40px;
    position: absolute;
    top: 20px;
    left: 0;
  }

  &:hover {
    .customDropMenu {
      display: block;

      &.oneType {
        display: grid;
      }
    }
  }
}

.customDropMenu {
  column-count: 4;
  display: none;

  &.exhibition {
    column-count: initial;
    column-gap: initial;
  }

  &.services {
    column-count: 3;
    column-gap: 30px;
  }

  &.oneType {
    column-count: 1;
    column-gap: 30px;
  }

  > ul {
    &:last-of-type {
      > div {
        display: none !important;
      }
    }
  }
}

.swiper-button {
  &-prev {
    left: 0;

    &::before {
      content: "";
      display: block;
      width: 60px;
      height: 100%;
      background-image: url("~/assets/svg/swiper_linear.svg");
      // background-image: linear-gradient(to left, transparent, #fff);
      position: absolute;
      left: -6px;
      top: 0;
      z-index: -1;
      transform: rotate(180deg);
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      right: 10px;
      background-image: url("~/assets/svg/left-arrow-default.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 7px 13px;
      width: 24px;
      height: 24px;
    }
  }

  &-next {
    right: 0;

    &::before {
      content: "";
      display: block;
      width: 60px;
      height: 100%;
      background-image: url("~/assets/svg/swiper_linear.svg");
      // background-image: linear-gradient(to right, transparent, #fff);
      position: absolute;
      right: -6px;
      top: 0;
      z-index: -1;
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      left: 10px;
      background-image: url("~/assets/svg/right-arrow-default.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 7px 13px;
      width: 24px;
      height: 24px;
    }
  }
}

:deep(.swiper-container) {
  .swiper-slide {
    opacity: 0;
    display: flex;

    &.swiper-slide-visible {
      opacity: 1;
    }
  }

  [aria-disabled="true"] {
    opacity: 0;

    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }
}

.exhibitionDropdownLink {
  &.active {
    background-image: url("@/assets/svg/icon-arrow.svg");
    background-position: right center;
    background-size: 16px;
    background-repeat: no-repeat;
  }
}
</style>