<template>
  <div
    class="h-50 bg-white justify-between w-full fixed z-[999] border-b box-border"
  >
    <NuxtLink to="/" class="absolute top-1/2 -translate-y-1/2 left-15">
      <img src="~/assets/img/logo.png" class="h-30 object-contain" />
    </NuxtLink>

    <div
      class="absolute right-15 top-1/2 -translate-y-1/2 flex items-center space-x-20"
    >
      <div v-if="token" class="flex items-center space-x-10">
        <NuxtLink to="/profile" class="flex items-center">
          <van-image
            :src="userInfo.headImageUrl || defaultAvatar"
            round
            height="26"
            width="26"
          />
        </NuxtLink>
        <NuxtLink to="/profile" class="max-w-70 truncate text-black-6">
          我的订单
        </NuxtLink>
      </div>

      <NuxtLink
        v-else-if="!token"
        :to="`/login?redirect=${route.fullPath}`"
        class="flex items-center text-black-6 space-x-5"
      >
        <div
          class="w-26 h-26 rounded-full bg-[#d9d9d9] text-black-6 flex items-center justify-center"
        >
          <span class="iconfont icon-profile"></span>
        </div>
        <span class="text-base">请登录</span>
      </NuxtLink>
      <img
        @click="handleClickMenu"
        src="~/assets/img/navbar/nav_menu.png"
        class="w-24 h-24"
      />
    </div>

    <van-popup
      v-model:show="isMenuShow"
      position="left"
      :style="{ height: '100%', width: '70%' }"
    >
      <NavigationBarLeftMenu
        v-if="isMenuShow"
        v-model:visible="isMenuShow"
        @on-hide="isMenuShow = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import defaultAvatar from "~/assets/img/default_avatar.png";

const isMenuShow = ref(false);

function handleClickMenu() {
  isMenuShow.value = true;
}

const route = useRoute();

const authStore = useAuthStore();
const { token } = storeToRefs(authStore);

const userInfoStore = useUserInfoStore();
const { userInfo } = storeToRefs(userInfoStore);

watch(
  token,
  () => {
    if (token.value) {
      userInfoStore.getUserInfo();
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped></style>
