<template>
  <div class="s-header">
    <t-head-menu :theme="mode">
      <template #logo>
        <NuxtLink to="/">
          <HomeLogo v-if="mode !== 'dark'" class="home-logo"></HomeLogo>
          <HomeLogo2 v-else class="home-logo"></HomeLogo2>
        </NuxtLink>
        <div class="header-operate-left" v-if="true">
          <Search v-if="route.meta.hasSearch"></Search>
        </div>
        <a class="join-us" :href="tgUrl" target="_blank">
          <img src="/images/img/Vector.png" alt="" />
          <span>加入我们</span>
        </a>
      </template>
      <template #operations>
        <ClientOnly>
          <div class="operations-container">
            <ChangeTheme></ChangeTheme>
            <SwitchLanguage></SwitchLanguage>
            <Foxwallet></Foxwallet>
            <LoginDropdown></LoginDropdown>
          </div>
        </ClientOnly>
      </template>
    </t-head-menu>
  </div>
</template>

<script setup lang="ts">
import LoginDropdown from './LoginDropdown.vue';
import Foxwallet from './Foxwallet.vue';
import Search from './Search.vue';
import HomeLogo from '/public/images/svg/header/homeLogoLight.svg';
import HomeLogo2 from '/public/images/svg/header/homeLogoDark.svg';
import { tgUrl } from '@/utils/open';
const mode = useCurTheme();
const route = useRoute();
</script>
<style lang="less">
@import '../style/flex.less';
.s-header {
  height: 100%;
  border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
  .home-logo {
    width: 190px;
    height: 70px;
  }
  .join-us {
    margin-left: 1vw;
    color: var(--td-Search-info-color-1);
    .dja();
    text-decoration: none;
    span {
      padding-left: 10px;
    }
  }
  :hover .home-logo {
    cursor: pointer;
  }
  .t-menu {
    height: 100%;
    .t-head-menu__inner {
      height: 100%;
      .t-menu__operations {
        height: 100%;
      }
      .t-menu__logo {
        .router-link-active {
          height: 100%;
        }
      }
    }
  }
  .operations-container {
    .da();
    height: 70px;
    line-height: 70px;
  }
}
</style>
