<script lang="ts" setup>
import { BasicLayout, LockScreen, UserDropdown } from "/@/vben/layouts";

import { computed, onErrorCaptured, onMounted } from "vue";
import { preferences } from "/@/vben/preferences";
import { useAccessStore } from "/@/vben/stores";
import { useUserStore } from "/@/store/user";
import VipButton from "/@/components/vip-button/index.vue";
import TutorialButton from "/@/components/tutorial/index.vue";
import { useSettingStore } from "/@/store/settings";
import PageFooter from "./components/footer/index.vue";
import { useRouter } from "vue-router";
const userStore = useUserStore();
const accessStore = useAccessStore();

const router = useRouter();
const menus = computed(() => [
  {
    handler: () => {
      router.push("/certd/mine/user-profile");
    },
    icon: "fa-solid:book",
    text: "账号信息"
  }
]);

const avatar = computed(() => {
  const avt = userStore.getUserInfo?.avatar;
  return avt ? `/api/basic/file/download?key=${avt}` : "";
});

async function handleLogout() {
  await userStore.logout(true);
}

const settingStore = useSettingStore();

const sysPublic = computed(() => {
  return settingStore.sysPublic;
});
const siteInfo = computed(() => {
  return settingStore.siteInfo;
});

onErrorCaptured((e) => {
  console.error("ErrorCaptured:", e);
  // notification.error({ message: e.message });
  //阻止错误向上传递
  return false;
});

onMounted(async () => {
  await settingStore.checkUrlBound();
});
</script>

<template>
  <BasicLayout @clear-preferences-and-logout="handleLogout">
    <template #user-dropdown>
      <UserDropdown :avatar="avatar" :menus="menus" :text="userStore.userInfo?.nickName || userStore.userInfo?.username" description="" tag-text="" @logout="handleLogout" />
    </template>
    <template #lock-screen>
      <LockScreen :avatar @to-login="handleLogout" />
    </template>
    <template #header-right-0>
      <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full hidden md:block">
        <tutorial-button v-if="!settingStore.isComm" class="flex-center header-btn" />
      </div>
      <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full">
        <vip-button class="flex-center header-btn" mode="nav" />
      </div>
    </template>
    <template #footer>
      <PageFooter></PageFooter>
    </template>
  </BasicLayout>
</template>

<style lang="less">
.header-btn {
  font-size: 14px;
  padding: 5px;
}
</style>
