<template>
  <el-affix>
    <div class="p-header">
      <div v-if="route.path !== '/' && !noReturn.includes(route.path)" class="return">
        <img src="@/assets/img/h_return.png" @click="returnFun" />
      </div>
      <NuxtLink v-if="route.path === '/' || noReturn.includes(route.path)" to="/" class="logo">
        <img src="@/assets/img/logo.png" />
      </NuxtLink>
      <div
        v-if="noReturn.includes(route.path) || route.path.indexOf('/detail') > -1 || route.path.indexOf('/category/list') > -1"
        class="head-title"
      >
        {{ headerTitle }}
      </div>
      <div class="user-href">
        <i v-if="route.path === '/' || noReturn.indexOf(route.path) > -1 || route.path == '/news/detail' || route.path == '/application/detail'" class="user-icon" @click="openFun"></i>
      </div>
    </div>
  </el-affix>
  <div v-if="!isClient" class="seo-nav">
    <h-Header-seo></h-Header-seo>
  </div>
  <el-drawer v-model="open.user" size="55%" direction="ltr" append-to-body class="user-drawer">
    <template #header="{ titleId, titleClass }">
      <NuxtLink :id="titleId" :class="titleClass" to="/" class="logo">
        <img src="@/assets/img/logo.png" />
      </NuxtLink>
    </template>
    <template v-if="isClient">
      <div class="a-nav">
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink :to="{ path: '/category' }">Products</NuxtLink>
        <NuxtLink :to="{ path: '/pdtion/finfo' }">Assembly &amp; Test Services</NuxtLink>
        <NuxtLink :to="{ path: '/pdtion/encapsulation' }">Package Types</NuxtLink>
        <NuxtLink :to="{ path: '/pdtion/pktx' }">Quality System</NuxtLink>
        <NuxtLink :to="{ path: '/pdtion/sysb' }">Laboratory Center</NuxtLink>
        <!-- <NuxtLink :to="{ path: '/pdtion/finfo' }">智能制造中心</NuxtLink> -->
        <NuxtLink :to="{ path: '/application' }">Applications</NuxtLink>
        <NuxtLink :to="{ path: '/suppliers' }">Supplier Search</NuxtLink>
        <NuxtLink :to="{ path: '/news' }">News Center</NuxtLink>
        <NuxtLink :to="{ path: '/about' }">About Us</NuxtLink>
        <NuxtLink :to="{ path: '/about/zzzl' }">Qualifications &amp; Patents</NuxtLink>
        <NuxtLink :to="{ path: '/contact' }">Contact Us</NuxtLink>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
const route = useRoute();
const router = useRouter();
const user = useUserStore();
const tokenKey: any = useCookie("tokenKey");
const searchShow = ref(false);
const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;

const noReturn = ref([
  "/about",
  "/category",
  "/application",
  "/news",
  "/contact",
  "/information",
  "/search",
  "/pdtion",
  "/pdtion/encapsulation",
  "/pdtion/pktx",
  "/pdtion/sysb",
  "/pdtion/finfo",
  "/about",
  "/about/zzzl",
  "/category/list",
  "/suppliers"
]);

const open: any = ref({
  user: false,
  announcement: false,
});

const categoryId = ref("");
const clubFalg: any = useCookie("clubFalg", {
  maxAge: 60 * 5,
  sameSite: "strict",
});

/**
 * 计算头部标题，优先为固定页面路由返回明确标题，
 * 这样 `pdtion` 页面可以直接复用默认头部展示而不依赖外部状态。
 * @returns {string} 当前页面头部标题。
 * @throws {Error} 不主动抛出异常。
 */
const headerTitle = computed(() => {
  const titleMap: Record<string, string> = {
    "/pdtion": "Assembly & Test Services",
    "/pdtion/encapsulation": "Package Types",
    "/pdtion/pktx": "Quality System",
    "/pdtion/sysb": "Laboratory Center",
    "/pdtion/finfo": "Assembly & Test Services",
    "/about": "About Us",
    "/about/zzzl": "Qualifications & Patents",
    "/contact": "Contact Us",
    "/news": "Company News",
    "/information": "Industry News",
    "/suppliers": "Supplier Search",
  };

  return titleMap[route.path] || user.value.adminTitle ;
});

watch(
  () => route.path,
  async () => {
    setTimeout(() => {
      searchShow.value = false;
    }, 100);
    open.value.user = false;
    if (route.path !== "/category") {
      categoryId.value = "";
    }
    user.value.searchFalg = false;
  },
  { deep: true }
);

/**
 * 返回上一页。
 * @returns {Promise<void> | void} 返回首页或回退历史记录。
 * @throws {Error} 不主动抛出异常。
 */
function returnFun() {
  if (route.fullPath.indexOf("/login") > -1) {
    return navigateTo("/");
  }
  router.go(-1);
}

/**
 * 根据滚动位置切换搜索栏显示状态。
 * @returns {void} 无返回值。
 * @throws {Error} 不主动抛出异常。
 */
function scrollFun() {
  if (route.path === "/home/user") {
    return;
  }
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  if (scrollTop >= 43) {
    searchShow.value = true;
  } else {
    searchShow.value = false;
  }
}

onBeforeUnmount(() => {
  window.removeEventListener("scroll", scrollFun);
});

/**
 * 打开或关闭左侧抽屉菜单。
 * @returns {void} 无返回值。
 * @throws {Error} 不主动抛出异常。
 */
function openFun() {
  open.value.user = !open.value.user;
}

onMounted(() => {});
</script>

<style scoped lang="scss">
.seo-nav {
  position: absolute;
  left: -200px;
  top: -500px;
}

.user-icon {
  width: 24px;
  min-width: 24px;
  height: 40px;
  background: url("@/assets/img/category.png") no-repeat center center;
  background-size: 24px auto;
  display: block;
}

.p-header {
  height: 44px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;

  .return {
    min-width: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 12px;
  }

  .logo {
    width: 94px;
    min-width: 94px;
    position: absolute;
    left: 12px;
  }

  .user-href {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
  }
}

.head-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  margin: 0 auto;
}
</style>

<style lang="scss">
.el-affix--fixed {
  .p-header {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  }
}

.user-drawer {
  .logo {
    width: 120px;
    max-width: 120px;
  }

  .el-drawer__header {
    margin-bottom: 0;
    padding-right: 17px;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
  }

  .el-drawer__body {
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
  }

  .el-drawer__close-btn {
    padding: 0;
  }

  .a-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    justify-content: space-between;
    flex-direction: column;

    a {
      font-size: 14px;
      color: #222222;
      width: 100%;
      font-weight: bold;
      margin: 15px 0;
      text-align: center;
    }
  }
}
</style>
