<template>
<div class="search tw-w-full">
<div v-click-outside="clickOutSide" @click="open()"
:class="['tw-relative tw-flex tw-rounded-[16px] tw-border-solid tw-border tw-transition-all tw-duration-200 tw-delay-75 tw-ease-in-out',bigSearch ? 'tw-border-primary-default tw-w-full tw-px-[16px] tw-py-[11px]' :'tw-border-neutrals-200 tw-w-[320px] tw-px-[16px] tw-py-[11px]']">
<div v-if="bigSearch" 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"
:class="tabToggle == 0 ? 'white--text primary' : 'primary--text'" 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 ? 'white--text primary' : 'primary--text'" style="font-size: 14px" text height="40"
@click="clickService">{{ $t('Service')}}</v-btn> -->
</div>
<input v-show="!bigSearch"
class="custom-control flex-grow-1 tw-placeholder-text-[14px] md:tw-placeholder-text-[16px]"
:placeholder="$t(customPlaceholder)" />
<input v-show="bigSearch" ref="search"
class="custom-control flex-grow-1 tw-placeholder-text-[14px] md:tw-placeholder-text-[16px]" v-model="inputs"
:placeholder="$t(customPlaceholder)" @input="handleInput" @click="handleClick"
@keyup.enter="goToSearch()" />
<svg width="24" height="24" class="tw-my-auto tw-cursor-pointer" 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="(item, idx) in servicesSearchs" :key="idx" :to="localePath(`/exhibition?q=${item}`)">
{{ item }}
</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-flex tw-justify-start tw-items-center tw-z-10"
@mouseleave="exhibitionActiveIndex=0">
<div class="customDropMenu exhibition tw-w-full tw-overflow-hidden">
<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-block tw-flex tw-items-center tw-break-words tw-pr-[20px]">{{
$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-x-hidden 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="(item, idx) in servicesSearchs" :key="idx" :to="localePath(`/service?q=${item}`)">
{{ item }}
</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 -->
</div>
</div>
</template>
<script>
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: () => { }
},
},
data() {
return {
type: 'exhibition',
toggle_exclusive: 1,
inputs: "",
keywords: [],
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,
WindowsWidth: undefined,
bigSearch: false,
customPlaceholder: 'Search exhibitions or services...',
};
},
created() {
if (process.client) {
this.WindowsWidth = window.innerWidth;
}
},
methods: {
onResize() {
if (process.client) {
this.WindowsWidth = window.innerWidth;
}
},
open() {
let vm = this;
vm.bigSearch = true;
vm.$nextTick(() => {
vm.$refs.search.focus();
setTimeout(function () {
vm.handleClick();
}, 300)
}
);
},
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);
}
},
handleInput() {
this.keyword = true;
this.exhibition = false;
// this.service = false;
this.keywords = [];
},
clickOutSide() {
this.exhibition = false;
// this.service = false;
this.bigSearch = false;
this.tabs = 'exhibitionsCategories';
this.exhibitionActiveIndex = 0;
this.locationActiveIndex = 0;
this.cityActiveIndex = 0;
this.tabToggle = 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.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.type = 'service';
if (this.WindowWidth >= 1366) {
this.customPlaceholder = 'Search exhibitions or services...';
}
},
goToSearch() {
this.$emit('loaading', true);
this.$router.push(this.localePath(`/${this.type}?q=${this.inputs}`));
this.$nextTick(()=>{
this.$emit('loaading', false);
});
},
},
computed: {
WindowWidth() {
if (process.client) {
this.WindowsWidth = window.innerWidth;
}
return this.WindowsWidth;
},
},
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);
},
};
</script>
<style lang="scss" scoped>
.search-result {
position: absolute;
left: 0px;
top: 70px;
width: 100%;
z-index: 10;
}
.v-tab {
margin: 0;
}
:deep() {
.above {
z-index: 99 !important;
}
}
.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>