<template>
  <div class="nav-top">
    <div class="nav-top-download" v-if="showTop">
      <div class="left">
        <h2>18N.COM APP</h2>
        <p>Baixe o APP e ganhe um bônus grátis de R$9,00</p>
      </div>
      <div class="flex-ct effect" @click="goPage('/download')">
        <h-img type="local" src="base/Android.png" />
      </div>
      <div class="nav-top-download-close" @click="close">
        <van-icon name="cross" size=".3rem" color="#000" />
      </div>
    </div>
    <menu-list v-model="showMenu" />
    <div class="flex-sb">
      <div class="nav-top-text">
        <h-img width=".8rem" @click="openMenu" src="home/genduo2.png" />
        <h-img width="3rem" style="margin-left: 0.1rem" src="base/2logo.png" type="local" />
      </div>
      <div class="flex-end nav-top-text" v-if="!userStore.userInfo.uid">
        <div @click="goPage('/login')">Entrar</div>
        <div class="flex-btn" @click.stop="goPage('/register')">
          Cadastre-se
        </div>
      </div>
      <div v-else class="avatar flex-ct">
        <div class="img-box">
          <img
            :src="getImage(userStore.userInfo.headUrl)"
            @click="goPage('/perfil')"
          />
          <span>
            R$
            {{
              formatDigit(Number(userStore.userInfo.coins / 10000).toFixed(2))
            }}
          </span>
        </div>
        <div class="flex-btn" @click="goPage('/deposit')">+</div>
      </div>
      <div class="lingdang" v-if="userStore.userInfo.uid" @click="openEmile">
        <h-img
          width=".5rem"
          type="local"
          class="imgBox"
          src="base/icon_ld.png"
        />
        <div class="num" v-show="emailShow">
          {{ emailShow }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { noticeStore } from "@/stores/modules/notice";
import menuList from "./menu/index.vue";
import { getImage, formatDigit, getLocationParams } from "@/utils";
import { ref, computed } from "vue";
import socketApi from "@/socket/socketApi";
const userStore = useUserStore();
const userNoticeStore = noticeStore();
const router = useRouter();
const route = useRoute();
const showTop = computed(() => {
  if (getLocationParams(window.location.href).appType == 1) {
    return false;
  } else {
    return userNoticeStore.showTopDownload && route.path === "/";
  }
});
const emailShow = computed(() => {
  console.log(userStore);
  
  return userStore.noticesShow + userStore.newMail
});
const showMenu = ref(false);
const openMenu = () => {
  showMenu.value = true;
};

const close = () => {
  userNoticeStore.closeShowTopDownload();
};
const goPage = (path: string) => {
  router.push(path);
};
const openEmile = () => {
  router.push("/email");
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
