<script setup lang="ts">
import NavHomeSelect from '@/assets/images/nav-home.select.png?url';
import { useAccountStore } from '@/stores';

const router = useRouter();
const Account = useAccountStore();

const logout = () => {
  Account.logout();
  router.replace('/login');
};
</script>

<template>
  <div class="page-container">
    <div class="page-header flex py-4 px-4 overflow-hidden">
      <div class="grow shrink-0 h-full min-w-16"></div>
      <div class="grow-[3] shrink mx-2 flex flex-col justify-center overflow-hidden"></div>
      <div class="grow shrink-0 h-full min-w-16 flex items-center justify-end overflow-hidden">
        <router-link :to="{ path: '/screen' }" replace>
          <img class="size-8 object-scale-down" :src="NavHomeSelect" alt="返回首页">
        </router-link>
      </div>
    </div>
    <div class="page-content flex flex-col justify-center items-center px-6" style="min-height: 60vh">
      <van-empty image="error" description="您暂无权限访问该页面，请先登录" />
      <div class="flex flex-col gap-4 w-full max-w-xs mt-4">
        <van-button round block type="default" @click="logout"> 退出 </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page-container {
  --van-empty-description-font-size: 24px;
  --van-empty-description-color: hsl(var(--primary-hover) / 0.5);
}
</style>
