<template>
  <section>
    <!-- navbar -->
    <div class="nav__container navbar">
      <div class="nav__box navbar__box">
        <!-- left -->
        <div class="nav__left navbar__left">
          <ul v-if="textLinkList" class="text-link__list">
            <li
              v-for="(item, index) in textLinkList"
              :key="index"
              class="text-link__item"
              @click="handleTextLinkClick(item, item.id ? item.id : '')"
            >
              <span
                class="text_hover_underline"
                :class="[
                  (currentId && currentId == item.id && currentPath == item.path) ||
                  (!currentId && currentPath == item.path)
                    ? 'text_hover_underline--active'
                    : '',
                ]"
                >{{ $t(`textLink["${item.text}"]`) }}</span
              >
            </li>
          </ul>
        </div>

        <!-- right -->
        <div class="nav__right navbar__right">
          <a-dropdown>
            <div class="language-toggle">
              <img src="@/public/images/icons/language-toggle__icon.png" />
              <span>{{ localeInfo && localeInfo.title }}</span>
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item v-for="(item, index) in systemStore.localeList" :key="index">
                  <div @click="onLocaleChange(item)">
                    <span class="text_hover_underline">{{ item.title }}</span>
                  </div>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <!-- <div class="login-btn" @click="goLogin">
            <span>{{ $t('system["登录"]') }}</span>
          </div> -->
          <!-- <div class="download-btn-normal">
            <a-popconfirm placement="bottom" :showCancel="false">
              <template #okButton></template>
              <template #icon><question-circle-outlined style="color: red" /></template>
              <template #title>
                <div style="display: flex; flex-direction: column; align-items: center">
                  <img
                    src="@/public/images/download_qrcode.png"
                    style="width: 10rem; height: 10rem"
                  />
                  <span>VavaBuy App</span>
                </div>
              </template>
              <div class="download-btn">
                <img src="@/public/images/icons/download_icon.png" alt="" />
                <span>{{ $t('system["download"]') }}</span>
              </div>
            </a-popconfirm>
          </div> -->
          <!-- <div class="download-btn-768">
            <div class="download-btn" @click="handleDownload('apkLinks')">
              <img src="@/public/images/icons/download_icon.png" alt="" />
              <span>{{ $t('system["download"]') }}</span>
            </div>
          </div> -->

          <div
            class="store-download-btn"
            style="margin-right: 10px"
            @click="handleDownload('appleLink')"
          >
            <img
              src="@/public/images/icons/app_store_icon.png"
              alt=""
              class="store-download-btn__icon"
            />
            <span>App Store</span>
          </div>
          <div class="store-download-btn" @click="handleDownload('googleLink')">
            <img src="@/public/images/icons/play_store_icon.png" alt="" />
            <span>Play Store</span>
          </div>
        </div>
      </div>
    </div>

    <!-- subnav -->
    <div class="nav__container subnav">
      <div class="nav__box subnav__box">
        <!-- left -->
        <div class="nav__left subnav__left">
          <img src="@/public/images/logo.png" @click="goHome" />
        </div>

        <!-- right -->
        <div class="nav__right subnav__right">
          <!-- link list -->
          <ul v-if="textLinkList" class="text-link__list">
            <li
              v-for="(item, index) in textLinkList2"
              :key="index"
              class="text-link__item"
              @click="handleTextLinkClick(item, item.id ? item.id : '')"
            >
              <span
                class="text_hover_underline"
                :class="[
                  (currentId && currentId == item.id && currentPath == item.path) ||
                  (!currentId && currentPath == item.path)
                    ? 'text_hover_underline--active'
                    : '',
                ]"
                :style="{
                  color: item.textColor ? item.textColor : '',
                }"
                >{{ $t(`textLink["${item.text}"]`) }}</span
              >
            </li>
          </ul>

          <!-- menu -->
          <div class="nav-menus">
            <a-dropdown>
              <div class="menus__btn">
                <MenuOutlined style="font-size: 20px; font-size: 1.25rem; color: #000" />
              </div>
              <template #overlay>
                <a-menu>
                  <a-menu-item
                    v-for="(item, index) in textLinkList2"
                    :key="index"
                    @click="handleTextLinkClick(item, item.id ? item.id : '')"
                  >
                    <div>
                      <span
                        class="text_hover_underline"
                        :class="[
                          (currentId && currentId == item.id && currentPath == item.path) ||
                          (!currentId && currentPath == item.path)
                            ? 'text_hover_underline--active'
                            : '',
                        ]"
                        >{{ $t(`textLink["${item.text}"]`) }}</span
                      >
                    </div>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item
                    v-for="(item, index) in textLinkList"
                    :key="index"
                    @click="handleTextLinkClick(item, item.id ? item.id : '')"
                  >
                    <div>
                      <span
                        class="text_hover_underline"
                        :class="[
                          (currentId && currentId == item.id && currentPath == item.path) ||
                          (!currentId && currentPath == item.path)
                            ? 'text_hover_underline--active'
                            : '',
                        ]"
                        >{{ $t(`textLink["${item.text}"]`) }}</span
                      >
                    </div>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>




<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { storeToRefs } from 'pinia'
import { MenuOutlined, HomeOutlined } from '@ant-design/icons-vue'
import useSystemStore from '@/stores/useSystemStore'
import type { ILangs } from '@/stores/useSystemStore'
import useLinkList from './hooks/useLinkList'
import { reactive } from 'vue'

// 国际化
const i18n = useI18n()
const systemStore = useSystemStore()
const { localeInfo, localeList, locale } = storeToRefs(systemStore)

// 文本链接
const { textLinkList, textLinkList2, route, router, currentPath, currentId, handleTextLinkClick } =
  useLinkList()

// 下载连接
const downloadLinks = reactive({
  apkLinks: '',
  googleLink: 'https://play.google.com/store/apps/details?id=uni.UNI1899660',
  appleLink: 'https://apps.apple.com/app/vavabuy/id6748591418',
})

// 语言切换回调
const onLocaleChange = function (info: ILangs) {
  systemStore.toggleLocale(info)
  i18n.locale.value = info.code
  const historyLength = window.history.length
  if (historyLength > 1) {
    window.history.go(-historyLength + 2)
  }
  router.replace('/')
  setTimeout(() => {
    window.location.reload()
  })
}

// 跳转首页回调
const goHome = function () {
  router.push({
    path: '/',
  })
}

// 登录跳转
const goLogin = function () {
  window.open('https://vavabuy.net/#/pages/login/login', '__blank')
}

// App 下载
function handleDownload(key) {
  if (!key) return
  let link = downloadLinks[key]
  if (!link) return
  window.open(link)
}
</script>


<style lang="less" scoped>
.nav__container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.nav__box {
  min-width: 1200px;
  min-width: 75rem;
  width: var(--layout-width-1200);
  padding: 0 15px;
  padding: 0 0.9375rem;
}

.navbar__box,
.subnav__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  height: 3.75rem;
}

.nav__left {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__right {
  display: flex;
  align-items: center;
  color: #000;
  font-size: 14px;
  font-size: 0.875rem;
}

.subnav__left {
  img {
    width: 150px;
    width: 9.375rem;
    cursor: pointer;
  }
}

.language-toggle {
  display: flex;
  align-items: center;
  margin-right: 30px;
  margin-right: 1.875rem;
  cursor: pointer;
  min-width: 84px;
  min-width: 5.25rem;

  img {
    margin-right: 6px;
    margin-right: 0.375rem;
    width: 20px;
    height: 20px;
    width: 1.25rem;
    height: 1.25rem;
  }
}

.login-btn {
  width: 76px;
  width: 4.75rem;
  height: 30px;
  height: 1.875rem;
  background: #000000;
  border-radius: 6px;
  border-radius: 0.375rem;
  text-align: center;
  color: #fff;
  line-height: 30px;
  line-height: 1.875rem;
  cursor: pointer;
}

.store-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-width: 4.75rem;
  height: 30px;
  height: 1.875rem;
  padding: 0 8px;
  padding: 0 0.5rem;
  background: #000000;
  border-radius: 6px;
  border-radius: 0.375rem;
  text-align: center;
  color: #fff;
  line-height: 30px;
  line-height: 1.875rem;
  cursor: pointer;

  img {
    width: 18px;
    width: 1.125rem;
    height: 18px;
    height: 1.125rem;
    margin-right: 4px;
  }

  .store-download-btn__icon {
    width: 20px;
    width: 1.25rem;
    height: 20px;
    height: 1.25rem;
  }
}

.download-btn-768 {
  display: none;
}

.download-btn-normal {
  display: block;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 30px;
  height: 1.875rem;
  margin-left: 16px;
  margin-left: 1rem;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #555;
  border-radius: 6px;
  border-radius: 0.375rem;
  text-align: center;
  cursor: pointer;

  img {
    width: 20px;
    width: 1.25rem;
    margin-right: 8px;
    margin-right: 0.5rem;
  }
}

.text-link__list {
  display: flex;
  align-content: center;
  margin: 0;

  .text-link__item {
    padding-right: 30px;
    padding-right: 1.875rem;
    color: #767676;
    font-size: 14px;
    font-size: 0.875rem;
    text-transform: uppercase;
    cursor: pointer;
  }

  .text-link__item:hover {
    color: var(--color-active);
  }
}

.subnav__right .text-link__item {
  padding: 0 0 0 1.875rem;
}

.nav-menus {
  display: none;

  .menus__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    width: 2.875rem;
    height: 38px;
    height: 2.375rem;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    border-radius: 0.375rem;
    cursor: pointer;
  }
}
</style>

<style>
:where(.css-dev-only-do-not-override-1p3hq3p).ant-popconfirm .ant-popconfirm-message-title {
  margin-inline-start: 0;
}
</style>

<style lang="less" scoped>
@import url(./css/header@1200.less);
@import url(./css/header@1024.less);
@import url(./css/header@768.less);
</style>