ShowEasyFrontEnd/FrontEnd/components/home/Search.vue

<template>
  <div class="search">
    <v-card v-click-outside="clickOutSide"
      class="tw-flex tw-px-[16px] tw-py-[11px] tw-rounded-[16px] tw-w-[345px] md:tw-w-[382px] xl:tw-w-[760px]">
      <div class="btn-group tw-flex tw-rounded-none xl:tw-pr-[16px] xl:tw-mr-[16px]">
        <v-btn class="border-radius-14 remove-upper mx-0 tw-hidden xl:tw-block tw-text-white tw-bg-primary-default"
          style="font-size: 14px" height="40" text @click="clickExhibition">{{ $t('Exhibition')}}</v-btn>
        <!-- <v-btn class="border-radius-14 remove-upper mx-0 tw-hidden xl:tw-block"
          :class="tabToggle == 1 ? 'tw-text-white tw-bg-primary-default' : 'tw-text-primary-default'"
          style="font-size: 14px" text height="40" @click="clickService">{{ $t('Service')}}</v-btn> -->
      </div>
      <div class="custom-control flex-grow-1 tw-text-[16px] tw-text-base-tertiary xl:tw-hidden" @click="handleClick">
        {{ $t(customPlaceholder) }}
      </div>
      <input class="custom-control flex-grow-1 tw-text-[16px] tw-placeholder-text-[16px] tw-hidden xl:tw-block"
        v-model="inputs" :placeholder="$t(customPlaceholder)" @input="handleInput" @click="handleClick"
        v-on:keyup.enter="goToSearch()" />
      <svg width="24" height="24" class="tw-my-auto tw-cursor-pointer tw-pointer-events-none xl:tw-pointer-events-auto"
        shape-rendering="geometricPrecision" @click="goToSearch()">
        <image xlink:href="@/assets/svg/icon-search-small.svg" src="@/assets/svg/icon-search-small.svg" width="24"
          height="24" />
      </svg>
      <v-card class="search-result white rounded-lg above" v-if="keywords.length != 0 && keyword"
        style="z-index: 999 !important" :max-width="width">
        <template v-for="(keyword, idx) in populars.search">
        <v-row v-if="type=='exhibition'" :key="idx"
          class="mx-2 my-2 grey--text text--lighten-1">
          <nuxt-link :to="localePath(`/${type}?q=${keyword}`)" class="remove-underline"
            style="width: 100%; height: 100%">
            <v-card flat color="transparent" width="100%" height="40" style="padding: 0px 12px"
              class="d-flex align-center">
              {{ keyword }}
            </v-card>
          </nuxt-link>
        </v-row>
      </template>
      <!-- <template v-for="(keyword, idx) in popular.service">
        <v-row v-if="type=='service'" :key="idx"
          class="mx-2 my-2 grey--text text--lighten-1">
          <nuxt-link :to="localePath(`/${type}?q=${keyword}`)" class="remove-underline"
            style="width: 100%; height: 100%">
            <v-card flat color="transparent" width="100%" height="40" style="padding: 0px 12px"
              class="d-flex align-center">
              {{ keyword }}
            </v-card>
          </nuxt-link>
        </v-row>
      </template> -->
      </v-card>

      <!-- exhibition -->
      <v-container
        class="search-result white border-radius-16 hidden-sm-and-down  xl:tw-px-[20px] xl:tw-py-[20px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
        v-if="exhibition">
        <!-- <div class="tw-mb-[20px]">
          <div class="tw-mb-[20px]">
            <div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('History') }} </div>
            <div class="tw-flex tw-flex-wrap">
              <nuxt-link
                class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
                v-for="(servicesSearch, idx) in servicesSearchs" :key="idx"
                :to="localePath(`/exhibition?q=${servicesSearch}`)">
                {{ servicesSearch }}
              </nuxt-link>
            </div>
          </div>
        </div> -->
        <div class="tabs tw-flex tw-mb-[16px] md:tw-mb-[20px]">
          <button
            :class="['tw-mr-[30px] tw-body-3 tw-transition-all tw-duration-300 tw-ease-in-out tab',tabs == 'exhibitionsCategories' ? 'active tw-text-black tw-font-bold':'tw-text-neutrals-500']"
            @click="tabs = 'exhibitionsCategories'">{{
            $t('Exhibition Categories')
            }}</button>
          <button
            :class="['tw-body-3 tw-transition-all tw-duration-300 tw-ease-in-out tab',tabs == 'location' ? 'active tw-text-black tw-font-bold':'tw-text-neutrals-500']"
            @click="tabs = 'location'">{{ $t('Location')
            }}</button>
        </div>

        <div v-if="tabs=='exhibitionsCategories'">
          <div class="customMenuLink tw-relative tw-z-10" @mouseleave="exhibitionActiveIndex=0">
            <div class="customDropMenu exhibition tw-w-full">
              <div class="tw-relative  tw-grid tw-grid-cols-2 tw-min-h-[110px]" v-if="exhibitionsCategories && exhibitionsCategories.length>0">
                <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-pr-[20px]" v-for="(item,index) in exhibitionsCategories" :key="index"
                    @mouseover="exhibitionActiveIndex=index">
                    <div
                      :class="['exhibitionDropdownLink tw-w-full  tw-body-4 tw-font-normal hover:tw-text-primary-default',exhibitionActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
                      <span class="tw-flex tw-items-center tw-min-w-[322px]">{{
                      $t(item.CategoryName)
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="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] " v-if="exhibitionsCategories[exhibitionActiveIndex].SubCategoryList && exhibitionsCategories[exhibitionActiveIndex].SubCategoryList.length>0">
                    <li class="tw-list-none"><a
                        :href="localePath(`/exhibition?category=${exhibitionsCategories[exhibitionActiveIndex].CategoryID}`)"
                        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 exhibitionsCategories[exhibitionActiveIndex].SubCategoryList" :key="index"
                      class="tw-list-none"><a :href="localePath(`/exhibition?subcategory=${sub.CategoryID}`)"
                        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.CategoryName }}</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="tabs=='location'">
          <div class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-10">
            <div class="customDropMenu exhibition tw-w-full tw-overflow-hidden">
              <div class="tw-relative tw-grid tw-grid-cols-[1fr_1fr_1fr] tw-min-h-[110px]">
                <div
                  class="tw-list-none tw-overflow-y-auto tw-h-auto tw-break-inside-avoid tw-flex tw-flex-col tw-pr-[20px]">
                  <template v-if="exhibitionsLocations && exhibitionsLocations.length>0">
                  <div v-for="(item,index) in exhibitionsLocations" :key="index"
                    @mouseover="locationActiveIndex=index;cityActiveIndex=0"
                    :class="['exhibitionDropdownLink tw-block tw-w-full tw-body-4 tw-font-normal  tw-mb-[20px] tw-pr-[20px] hover:tw-text-primary-default',locationActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
                    {{
                    $t(item.RegionName)
                    }}</div></template>
                </div>
                <div class="tw-overflow-x-hidden tw-overflow-y-auto" v-if="exhibitionsLocations && exhibitionsLocations.length>0">
                  <ul class="tw-px-[20px] tw-list-none tw-flex tw-flex-col tw-flex-wrap" v-if="exhibitionsLocations[locationActiveIndex].CountryList && exhibitionsLocations[locationActiveIndex].CountryList.length>0">
                    <li class="tw-list-none tw-mb-[20px]"><a
                        :href="localePath(`/exhibition?region=${exhibitionsLocations[locationActiveIndex].RegionID}`)"
                        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="(countries,index) in exhibitionsLocations[locationActiveIndex].CountryList" :key="index"
                      @mouseover="cityActiveIndex=index"
                      :class="['exhibitionDropdownLink tw-block tw-w-full tw-body-4 tw-font-normal  tw-mb-[20px] tw-pr-[20px] hover:tw-text-primary-default',cityActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
                      {{
                      countries.CountryName }}
                    </li>
                  </ul>
                </div>
                <div class="tw-overflow-x-hidden tw-overflow-y-auto" v-if="exhibitionsLocations && exhibitionsLocations.length>0">
                  <ul class="tw-px-[20px] tw-list-none tw-flex tw-flex-col tw-flex-wrap" v-if="exhibitionsLocations[locationActiveIndex].CountryList && exhibitionsLocations[locationActiveIndex].CountryList.length>0">
                    <li class="tw-list-none tw-mb-[20px]"><a
                        :href="localePath(`/exhibition?region=${exhibitionsLocations[locationActiveIndex].CountryList[cityActiveIndex].CountryID}`)"
                        class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
                        $t('All')}}</a>
                    </li>
                    <template v-if="exhibitionsLocations[locationActiveIndex].CountryList[cityActiveIndex].CityList && exhibitionsLocations[locationActiveIndex].CountryList[cityActiveIndex].CityList.length>0">
                    <li
                      v-for="(cities,index) in exhibitionsLocations[locationActiveIndex].CountryList[cityActiveIndex].CityList"
                      :key="index" class="tw-list-none tw-mb-[20px]"><a
                        :href="localePath(`/exhibition?city=${cities.CityID}`)"
                        class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
                        cities.CityName }}</a>
                    </li></template>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </v-container>
      <!-- exhibition -->

      <!-- service -->
      <!-- <v-container
        class="search-result tw-px-[30px] tw-py-[20px] tw-bg-white tw-rounded-[16px] tw-hidden  xl:tw-px-[20px] xl:tw-py-[20px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)] xl:tw-block"
        v-if="service" v-click-outside="">
        <div class="">
          <div class="tw-mb-[20px]">
            <div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('History') }} </div>
            <div class="tw-flex tw-flex-wrap">
              <nuxt-link
                class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
                v-for="(servicesSearch, idx) in servicesSearchs" :key="idx"
                :to="localePath(`/service?q=${servicesSearch}`)">
                {{ servicesSearch }}
              </nuxt-link>
            </div>
          </div>
          <div>
            <div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('Location') }} </div>
            <div class="tw-flex tw-flex-wrap">
              <nuxt-link
                class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
                v-for="(servicesLocation, idx) in servicesLocations" :key="idx"
                :to="localePath(`/service?q=${servicesLocation}`)">
                {{ servicesLocation }}
              </nuxt-link>
            </div>
          </div>
        </div>
      </v-container> -->
      <!-- service -->
    </v-card>
    <loading :isLoading="isPageLoading"></loading>
  </div>
</template>

<script>
import loading from "@/components/newComponent/loading/loading.vue";
export default {
  props: {
    servicesSearchs: {
      type: Array,
      default: () => []
    },
    servicesLocations: {
      type: Array,
      default: () => []
    },
    exhibitionsSearchs: {
      type: Array,
      default: () => []
    },
    exhibitionsLocations: {
      type: Array,
      default: () => []
    },
    exhibitionsCategories: {
      type: Array,
      default: () => []
    },
    serviceKeywords: {
      type: Array,
      default: () => []
    },
    exhibitionsKeywords: {
      type: Array,
      default: () => []
    },
    populars: {
      type: Object,
      default: () => { }
    },
    type: {
      type: String,
      default:() => "exhibition"
    },
  },
  components: {
    loading
  },
  data() {
    return {
      toggle_exclusive: 1,
      inputs: "",
      keywords: [],
      exhibitionTabTitles: ["Location", "Exhibition Categories"],
      tabToggle: 0,
      tab: null,
      tab2: null,
      tabs: 'exhibitionsCategories',
      exhibition: false,
      service: false,
      keyword: false,
      locationsIdx: 0,
      countriesIdx: 0,
      categoriesIdx: 0,
      exhibitionActiveIndex: 0,
      locationActiveIndex: 0,
      cityActiveIndex: 0,
      isPageLoading: false,
      WindowsWidth: undefined,
      customPlaceholder: 'Search exhibitions or services...',
    };
  },
  created() {
    if (process.client) {
      this.WindowsWidth = window.innerWidth;
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
      if (this.WindowWidth >= 1366) {
        this.customPlaceholder = 'Explore global exhibitions';
      } else {
        this.customPlaceholder = 'Search exhibitions or services...';
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  computed: {
    WindowWidth() {
      if (process.client) {
        this.WindowsWidth = window.innerWidth;
      }
      return this.WindowsWidth;
    },
  },
  watch: {
    WindowsWidth: {
      handler: function () {
        if (this.WindowWidth >= 1366) {
          this.customPlaceholder = 'Explore global exhibitions';
        } else {
          this.customPlaceholder = 'Search exhibitions or services...';
        }
      }
    }
  },
  methods: {
    onResize() {
      if (process.client) {
        this.WindowsWidth = window.innerWidth;
      }
    },
    handleClick() {
      if (this.tabToggle == 0) {
        this.exhibition = true;
        // this.service = false;
      } 
      // else {
      //   this.exhibition = false;
      //   this.service = true;
      // }
      if (this.inputs.length > 0) {
        this.keyword = true;
        this.exhibition = false;
        // this.service = false;
      }
      if (this.WindowsWidth < 1366) {
        this.$store.dispatch('toggleSearchDialog', true);
      }
    },
    async handleInput() {
      this.keyword = true;
      this.exhibition = false;
      this.service = false;
      this.keywords = []
    },
    clickOutSide() {
      this.exhibition = false;
      this.service = false;
      this.tabs = 'exhibitionsCategories';
      this.exhibitionActiveIndex = 0;
      this.locationActiveIndex = 0;
      this.cityActiveIndex = 0;

    },
    clickExhibition() {
      let oringalToggle = this.tabToggle;
      if (this.tabToggle != 0) {
        this.tabToggle = 0;
      }
      // if (this.service == true) {
      //   this.service = false;
      //   this.exhibition = true;
      // }
      if (this.keyword == true) {
        this.keyword = false;
      }
      if (this.inputs.length > 0) {
        this.exhibition = false;
        this.service = false;
        this.keyword = true;
      } else {
        if (oringalToggle == 0) {
          this.exhibition = false;
        }
      }
      this.keywords = this.exhibitionsKeywords;
      this.$emit('type', 'exhibition');
      if (this.WindowWidth >= 1366) {
        this.customPlaceholder = 'Explore global exhibitions';
      }
    },
    clickService() {
      let oringalToggle = this.tabToggle;
      if (this.tabToggle != 1) {
        this.tabToggle = 1;
      }
      if (this.exhibition == true) {
        this.service = true;
        this.exhibition = false;
      }
      if (this.keyword == true) {
        this.keyword = false;
      }
      if (this.inputs.length > 0) {
        this.exhibition = false;
        this.service = false;
        this.keyword = true;
      } else {
        if (oringalToggle == 1) {
          this.service = false;
        }
      }
      this.keywords = this.serviceKeywords;
      this.$emit('type', 'service');
      if (this.WindowWidth >= 1366) {
        this.customPlaceholder = 'Search exhibition services';
      }
    },
    goToSearch() {
      this.isPageLoading = true;
      if (this.WindowsWidth >= 1366) {
        this.$router.push(this.localePath(`/${this.type}?q=${this.inputs}`));
      }
      this.$nextTick(()=>{
        this.isPageLoading = false;
      });
      
    }
  },
};
</script>

<style lang="scss" scoped>
.search-result {
  position: absolute;
  left: 0px;
  top: 70px;
  width: 100%;
  z-index: 5;
}

.v-tab {
  margin: 0;
}

:deep() {
  .above {
    z-index: 99 !important;
  }
}

input[type="search"] {
  background-image: url('~/assets/svg/icon-search-small.svg');
  background-position: right 20px center;
  background-size: 24px;
  background-repeat: no-repeat;
}

.custom-control:focus {
  outline: none !important;
}

.nuxt-link-active {
  color: #232323;
  text-decoration: none;
}

.nuxt-link-active:hover {
  color: primary;
  text-decoration: underline;
  text-decoration-style: dashed;
}

.nuxt-link-exact-active {
  color: #232323;
  text-decoration: none;
}

.tabs {
  .tab {
    position: relative;
    padding-bottom: 15px;

    &.active {
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: #f48800;
      }
    }
  }
}

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

@media screen and (min-width:1366px) {
  .btn-group {
    position: relative;

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      height: 16px;
      background-color: #f5cda8;
      margin: auto;
    }
  }
}
</style>