<template>
  <header class="header w-full">
    <div class="container header-height flex items-center">
      <NuxtLink :to="localePath('/')" class="logo-box flex items-center">
        <img class="logo" :src="siteInfo.logo"/>
      </NuxtLink>
      <div class="flex-1 flex">
        <NuxtLink :class="{active: activeKey.startsWith('index') }" class="nav-item items-center flex px-4 hover:text-yellow" :to="localePath('/')">
          {{ $t('homePage') }}
        </NuxtLink>
        <NuxtLink :class="{active: activeKey.startsWith('news')}" class="nav-item items-center flex px-4" :to="localePath('/news')">
          {{ $t('news') }}
        </NuxtLink>
        <NuxtLink :class="{active: activeKey.startsWith('african-video')}" class="nav-item items-center flex px-4" :to="localePath('/african-video')" >
          {{ $t('africanVideo') }}
        </NuxtLink>
        <NPopover trigger="hover" placement="bottom">
          <template #trigger>
            <span :style="{color: (activeKey.startsWith('service') || activeKey.startsWith('product')? '#896B34':'')}" class="nav-item items-center flex px-4 cursor-pointer">
              {{$t('serviceAndProduct')}}
            </span>
          </template>
         <div class="p-2">
           <NuxtLink :class="{active: activeKey.startsWith('service')}"  class="nav-item items-center flex py-2" :to="localePath('/service')">
             {{ $t('service') }}
           </NuxtLink>
           <NuxtLink :class="{active: activeKey.startsWith('product')}"  class="nav-item items-center flex py-2" :to="localePath('/product')">
             {{ $t('product') }}
           </NuxtLink>
         </div>
        </NPopover>


        <NuxtLink :class="{active: activeKey.startsWith('about')}" class="nav-item items-center flex px-4" :to="localePath('/about')">
          {{ $t('aboutUs') }}
        </NuxtLink>
      </div>
      <NSpace class="items-center">
          <NInput @keydown="searchFunc" :placeholder="$t('search')" size="medium" v-model:value="keyword">
            <template #prefix>
              <n-icon :component="SearchOutline" color="#E5E5E5" />
            </template>
          </NInput>
        <NButton size="medium"  text type="default" @click="switchLanguage" tertiary>{{ $t('language') }}</NButton>
      </NSpace>
    </div>
  </header>
</template>
<script setup lang="ts">
import {MenuOption, NIcon, NInput, NButton, NSpace,NDropdown,NPopover} from "naive-ui";
import {NuxtLink} from "#components";
import {SearchOutline} from "@vicons/ionicons5";
// 站点信息
const siteInfo = useSiteInfo()

// 当前页面高亮
const activeKey = ref<String>('index')
const route = useRoute()
activeKey.value = route.name?route.name.toString(): ''
watch(
    () => route.name,
    (name) => {
      console.log(name)
      activeKey.value = name?name.toString(): ''
    }
)

const serviceAndProduct = ref<any[]>([
  {
    label: '布朗酒店，伦敦',
    key: "brown's hotel, london"
  },
])

// 切换语言
const { locale, locales, setLocale } = useI18n()
const localePath = useLocalePath()
const switchLanguage = () => {
  locale.value = locale.value == 'zh' ? 'en' : 'zh'
  useCookie('lang').value = locale.value
}
// 搜索
const keyword = ref<String>('')
const searchFunc = (e: any) => {
 if(e.key === 'Enter'){
   const path = localePath({
     path: '/search',
     query: {
       word: keyword.value
     }
   })
   navigateTo(path)
 }
}

</script>
<style scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255, .7);
  color: #333333;

}

.logo-box{
  max-width: 300px;
  height: 60px;
  overflow: hidden;
  display: flex;
  align-content: center;
}
.logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.nav-item {
  font-size: 18px;
  position: relative;
}

.nav-item:hover {
  color: #896B34;
}

.nav-item.active {
  color: #896B34;
}
</style>
