<script setup>
import { computed } from 'vue'
import { useTheme } from 'vuetify'
import ErrorHeader from '@/components/ErrorHeader.vue'
import misc404 from '@/assets/img/404.png'
import miscMaskDark from '@/assets/img/misc-mask-dark.png'
import miscMaskLight from '@/assets/img/misc-mask-light.png'
import tree from '@/assets/img/tree.png'

const vuetifyTheme = useTheme()

const authThemeMask = computed(() => {
  return vuetifyTheme.global.name.value === 'light' ? miscMaskLight : miscMaskDark
})
</script>

<template>
  <div class="misc-wrapper">
    <ErrorHeader
      status-code="401"
      title="登录错误"
      description="授权登录错误，用户令牌不能为空，请关闭页面后重试！"
    />

    <!-- 👉 Image -->
    <div class="misc-avatar w-100 text-center">
      <v-img
        :src="misc404"
        alt=""
        :max-width="700"
        class="mx-auto"
      />
      <!-- <v-btn
        to="/"
        class="mt-10"
        color="primary"
      >
        Back to Home
    </v-btn> -->
    </div>

    <!-- 👉 Footer -->
    <v-img
      :src="tree"
      class="misc-footer-tree d-none d-md-block"
    />

    <v-img
      :src="authThemeMask"
      class="misc-footer-img d-none d-md-block"
    />
  </div>
</template>

<style lang="scss">

  .misc-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;

    .misc-footer-img {
      position: absolute;
      inline-size: 100%;
      inset-block-end: 0;
      inset-inline-start: 0;
      pointer-events: none;
    }

    .misc-footer-tree, .misc-footer-tree-1 {
      position: absolute;
      pointer-events: none;
    }

    .misc-footer-tree {
      inset-block-end: 3.75rem;
      inset-inline-start: 3.75rem;
    }

    .misc-footer-tree-1 {
      inset-block-end: 5rem;
      inset-inline-end: 4.75rem;
    }
  }

  .misc-avatar {
    z-index: 1;
  }

.misc-footer-tree {
  inline-size: 15.625rem;
  inset-block-end: 3.5rem;
  inset-inline-start: 0.375rem;
}
</style>
