<template>
  <header class="w-full bg-white shadow box-border">
    <div class="mx-full flex items-center justify-between pl-4 ">
      <!-- 左侧 Logo 和菜单 -->
      <div class="flex items-center space-x-6">
        <nuxt-img src="/nav/logo.png" alt="Logo" class="h-8" />
        
        <nav class="flex space-x-4">
          <qi-link
            v-for="item in navList"
            :href="item.link"
            @mouseenter="showDropdown(item)"
            @mouseleave="hideDropdown"
            :key="item.name"
          >
            {{ item.name }}
          </qi-link>
        </nav>
      </div>

      <!-- 中间 搜索框 -->

      <!-- 右侧菜单 -->
      <div class="flex items-center space-x-4">
        <div class="flex-1">
          <t-input placeholder="Search Input" clearable>
            <template #suffixIcon>
              <search-icon :style="{ cursor: 'pointer' }" />
            </template>
          </t-input>
        </div>
        <t-dropdown :options="siteOptions" placement="bottom-right">
          <span class="cursor-pointer text-gray-700">中国站</span>
        </t-dropdown>
        <a href="#" class="text-gray-700 hover:text-blue-600">文档</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">备案</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">控制台</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">登录</a>
        <a class="h-full bg-blue-600 cursor-pointer text-white px-4 py-3  text-center">免费注册</a>
        <!-- <t-button theme="primary">免费注册</t-button> -->
      </div>
    </div>

    <!-- 下拉弹窗内容 -->
    <div
      v-if="dropdownVisible"
      class="absolute bg-white shadow rounded p-4 z-10 mt-2 w-full mx-auto"
      @mouseenter="cancelHide"
      @mouseleave="hideDropdown"
    >
      <div >
        <h3 class="text-lg font-bold mb-2">{{currentDropdown.name}}</h3>
        <p>这里是最新活动的相关内容。</p>
      </div>
      <div v-if="currentDropdown === 'products'">
        <h3 class="text-lg font-bold mb-2">产品</h3>
        <p>这里是产品的相关内容。</p>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
// import searchIcon from 'tdesign-icons-vue-next/Search'
import { SearchIcon } from 'tdesign-icons-vue-next';
const siteOptions = [
  { content: '中国站', value: 'cn' },
  { content: '国际站', value: 'global' },
]
const navList = ref([
  { name: '最新活动', link: '#' },
  { name: '产品', link: '#' },
  { name: '解决方案', link: '#' },
  { name: '定价', link: '#' },
  { name: '企业中心', link: '#' },
  { name: '开发者', link: '#' },
  { name: '客户支持', link: '#' },
  { name: '合作与生态', link: '/about2' },
  { name: '关于我们', link: '/about' },
])
const dropdownVisible = ref(false)
const currentDropdown = ref({})
let hideTimeout: ReturnType<typeof setTimeout> | null = null

function showDropdown(type: string) {
  currentDropdown.value = type
  dropdownVisible.value = true
  if (hideTimeout) {
    clearTimeout(hideTimeout)
    hideTimeout = null
  }
}

function hideDropdown() {
  hideTimeout = setTimeout(() => {
    dropdownVisible.value = false
    currentDropdown.value = {}
  }, 200)
}

function cancelHide() {
  if (hideTimeout) {
    clearTimeout(hideTimeout)
    hideTimeout = null
  }
}
</script>

<style>
/* 可以根据需要定制 TailwindCSS 配置 */
</style>
