<template>
  <div class="w-[100%] border-b-[1px] border-b-[#eee] border-b-solid">
    <div class="relative ma-auto flex items-center py-[20px] w-[1500px]!">
      <img src="~/assets/images/logo5.png" alt="图夕夕" srcset="" class="h-[51px] w-[182px] cursor-pointer" @click="navigateTo('/')" />
      <div class="ml-[60px] flex items-center">
        <span v-for="item in navList" :key="item" class="nav" :class="props.active === item ? 'active' : ''" @click="handleClick(item)">{{ item }}</span>
      </div>
      <div class="relative ml-[30px]">
        <el-input
          v-model="searchQuery"
          placeholder="电子产品"
          :prefix-icon="Search"
          class="search-input h-[40px] w-[328px]"
          @focus="handleHot(), (showHotList = true)"
          @input="handleInput"
        ></el-input>
        <!-- 搜索框 获取到焦点 显示热门列表 -->
        <div
          v-if="showHotList"
          v-loading="loading"
          class="absolute left-[16px] top-[42px] z-100 w-[276px] border-width-[1px] border-color-[#1A65FF] rounded-bl-[4px] rounded-br-[4px] rounded-tl-[0px] rounded-tr-[0px] border-solid bg-[#fff] pa-[10px]"
        >
          <!-- 这里放置热门列表的内容 -->
          <ul class="flex flex-col gap-[6px]">
            <li
              v-for="(item, index) in hotItems"
              :key="index"
              class="flex flex-row cursor-pointer items-center justify-between text-[13px]"
              @click="handleHotItem(item)"
            >
              <span class="color-[#333333]">{{ item.projectTypeName }}</span>
              <span v-if="item.count" class="color-[#999999]">{{ item.count }}份图纸</span>
            </li>
          </ul>
          <div v-if="!hotItems.length" class="text-[12px] color-[#999]">无数据</div>
        </div>
      </div>
      <div class="absolute right-[10px] flex items-center">
        <div class="h-[36px] w-[36px] border-rd-[50%] bg-[#F5F5F5] text-center line-height-[44px]">
          <img v-if="!isLogin" src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px]" />
          <img v-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-[19px] w-[17px] rd-[50%]" />
        </div>
        <span v-if="!isLogin" class="ml-[14px] cursor-pointer text-[14px] text-[#1A65FF] font-normal" @click="handleLogin">立即登录</span>
        <el-dropdown v-else placement="top-start" @command="handleCommand">
          <span class="ml-[14px] cursor-pointer text-[14px] text-[#1A65FF] font-normal">{{ userStore.userInfoRes.nickname || '立即登录' }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="个人中心"
                ><el-icon><Setting /></el-icon>个人中心</el-dropdown-item
              >
              <el-dropdown-item command="退出"
                ><el-icon><SwitchButton /></el-icon>退出</el-dropdown-item
              >
              <!-- <el-dropdown-item>The Action 3st</el-dropdown-item> -->
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance, computed, onMounted } from 'vue'
  import { Setting, SwitchButton } from '@element-plus/icons-vue'
  import { page } from '~/api/upnew/index'
  import { top } from '~/api/home/index'
  import type { ProjectDrawStatisticAppRespVO } from '~/api/home/type'
  import { Search } from '@element-plus/icons-vue'
  import useUserStore from '~/store/user'
  const userStore = useUserStore()
  const { $openLogin } = useNuxtApp()


  const props = defineProps({
    active: {
      type: String,
      default: '',
    },
    type: {
      type: Number, // 1 图纸 2 模型 3 文本
      default: 1,
    },
  })

  const searchQuery = ref('')
  const showHotList = ref(false)
  const hotItems = ref<ProjectDrawStatisticAppRespVO[]>([])

  // 是否登录
  const isLogin = computed(() => {
    return !!userStore.token
  })

  const navList = ref(['首页', '图纸', '文本', '模型', '国外专区', '工具箱', '交流频道'])

  const loading = ref(false)
  const handleHot = async () => {
    loading.value = true
    const res = await top({
      limit: 10,
      type: props.type, // 1 图纸 2 模型 3 文本
    })
    hotItems.value = res.data
    loading.value = false
  }
  handleHot()

  const timer = ref(0)
  const handleInput = (val: string) => {
    searchQuery.value = val
    loading.value = true
    if (timer.value) {
      window.clearTimeout(timer.value)
    }
    timer.value = window.setTimeout(async () => {
      console.log('searchQuery', searchQuery.value)
      const res = await page({
        pageNo: 1,
        pageSize: 10,
        type: props.type, // 1 图纸 2 模型 3 文本
        title: searchQuery.value, // 1 图纸 2 模型 3 文本
      })
      if (res.code === 0) {
        hotItems.value = res.data.list.map((c) => {
          return { ...c, projectTypeName: c.title }
        })
      }
      loading.value = false
    }, 200)
  }

  const handleHotItem = (item: ProjectDrawStatisticAppRespVO) => {
    const normal = { id: '0', name: '图纸库', isChildren: false }
    const level = item.pairs?.filter(Boolean).map((item) => ({ id: item?.id, name: item?.name, isChildren: false })) || []
    level.unshift(normal)
    if (item.type === 1) {
      navigateTo(`/drawe?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
    } else if (item.type === 2) {
      navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
    } else if (item.type === 3) {
      navigateTo(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
    }
  }

  const handleClick = (item: string) => {
    switch (item) {
      case '首页':
        navigateTo({ path: '/'}) // 修改为在新窗口打开
        break
      case '图纸':
        navigateTo('/drawe') // 修改为在新窗口打开
        break
      case '文本':
        navigateTo('/text') // 修改为在新窗口打开
        break
      case '模型':
        navigateTo('/model') // 修改为在新窗口打开
        break
      case '国外专区':
        navigateTo('/foreign') // 修改为在新窗口打开
        break
      case '牛人社区':
        navigateTo('/community') // 修改为在新窗口打开
        break
      case '交流频道':
        navigateTo('/channel') // 修改为在新窗口打开
        break
      case '工具箱':
        navigateTo('/toolbox') // 修改为在新窗口打开
        break
      default:
        break
    }
  }
  const handleLogin = () => {
      // $openLogin()
  }
  const handleCommand = (command: string) => {
    if (command === '退出') {
      userStore.logout()
      userStore.$reset()
    } else if (command === '个人中心') {
      navigateTo('/personal/center/info')
    }
  }

  onMounted(() => {
    // 监听点击事件
    document.addEventListener('click', (event) => {
      const target = event.target as HTMLElement
      if (!target.closest('.search-input')) {
        showHotList.value = false
      }
    })
  })
</script>
<style lang="scss" scoped>
  .active {
    color: #1a65ff !important;
    position: relative;

    &::after {
      position: absolute;
      width: 100%;
      height: 3px;
      border-radius: 3px;
      left: 0px;
      bottom: -8px;
      background-color: #1a65ff !important;
      content: '';
      transition: all 0.3s;
    }
  }
  ::v-deep(.el-input__wrapper) {
    border-radius: 23px !important;
    width: 328px;
    height: 40px;
    // border: 1px solid #d7d7d7;
  }
  .nav {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-right: 40px;
    cursor: pointer;
  }

  /* 添加自定义样式来调整图标大小 */
  ::v-deep(.el-input__prefix .el-icon) {
    font-size: 16px; /* 调整图标大小 */
  }

  /* 修改 placeholder 的字体大小 */
  ::v-deep(.el-input__inner::placeholder) {
    font-size: 14px; // 调整为你想要的字体大小
  }

  /* 添加下拉菜单样式修正 */
  ::v-deep(.el-dropdown__popper) {
    border: none !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;

    .el-dropdown-menu__item {
      padding: 8px 20px;

      &:hover {
        background: #f5f7fa;
      }
    }

    /* 移除聚焦时的蓝色边框 */
    .el-dropdown-menu {
      border: 1px solid #ebeef5 !important;
    }
  }

  /* 移除触发按钮的轮廓线 */
  .el-dropdown span {
    &:focus {
      outline: none !important;
    }
  }
</style>
