<template>
  <div class="box-border">
    <div class="flex items-center">
      <div class="flex items-center">
        <div class="box-border h-[100%] h-[55px] w-[221px] flex items-center rd-[2px] bg-[#1A65FF] pl-[24px] text-white">
          <img src="~/assets/images/1.png" alt="" srcset="" />
          <span class="ml-[12px] text-[16px]">全部资源分类</span>
        </div>
        <div class="item-center ml-[45px] w-[660px] flex justify-between">
          <nuxt-link
            v-for="(item, index) in tdkList"
            :key="index"
            :to="item.path"
            class="parent-links relative rounded-lg px-3 py-2 text-[#1A65FF]"
          >
            {{ item.remark }}
            <img v-if="item.path === '/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-12px] top-[0px]" />
          </nuxt-link>
        </div>
      </div>
      <div v-if="isLogin" class="flex flex-1 items-center justify-end">
        <div class="h-[36px] w-[36px] cursor-pointer border-rd-[50%] bg-[#F5F5F5] text-center flex items-center justify-center" @click="handleUserCenter">
          <img src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px]" />
        </div>
        <div class="ml-[8px] h-[36px] w-[36px] cursor-pointer border-rd-[50%] text-center line-height-[44px]" @click="handleMessageCenter">
          <el-icon size="20px" color="#999999"><BellFilled /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import useUserStore from '~/stores/user'
  import { getTDKList } from '~/api/home/index'
  const userStore = useUserStore()
  import { BellFilled } from '@element-plus/icons-vue'
  import { ref, computed } from 'vue'
  // const menuItems = ref([
  //   { name: '首页', path: '/' },
  //   { name: '图纸', path: '/drawe' },
  //   { name: '文本', path: '/text' },
  //   { name: '模型', path: '/model' },
  //   { name: '国外专区', path: '/foreign' },
  //   { name: '工具箱', path: '/toolbox' },
  //   { name: '交流频道', path: '/channel' },
  //   // { name: '牛人社区', path: '/community' },
  // ])

  const { data: tdkList } = await useAsyncData('get-tdk-list-home', async () => {
    const res = await getTDKList()
    // 添加首页
    if (!res.data.find((c) => c.remark === '首页')) {
      res.data.unshift({ remark: '首页', path: '/' })
    }
    return res.data
  })

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

  // 用户中心
  const handleUserCenter = () => {
    navigateTo('/personal-center/info')
  }

  // 消息中心
  const handleMessageCenter = () => {
    navigateTo('/personal-center/message-center')
  }
</script>
<style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  /* 覆盖默认的input number样式 */
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* 自定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  .parent-links {
    text-decoration: none;
    font-size: 16px;
    color: #1a65ff;
    &:hover {
    }
  }
</style>
