<template>
  <div class="error-page">
    <a-result status="404" title="404" sub-title="抱歉，您访问的页面不存在">
      <template #extra>
        <a-space>
          <a-button type="primary" @click="handleGoHome">
            返回首页
          </a-button>
          <a-button v-if="isAuthenticated" @click="handleLogout">
            退出登录
          </a-button>
        </a-space>
      </template>
    </a-result>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useAuthStore } from "@/stores/auth"

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const isAuthenticated = computed(() => authStore.isAuthenticated)

const handleGoHome = () => {
  const tenantCode = authStore.user?.tenantCode || route.params.tenantCode
  if (tenantCode) {
    router.push(`/${tenantCode}`)
  } else {
    router.push("/")
  }
}

const handleLogout = async () => {
  const tenantCode = authStore.user?.tenantCode || route.params.tenantCode
  await authStore.logout()
  if (tenantCode) {
    router.push(`/${tenantCode}/login`)
  } else {
    router.push("/login")
  }
}
</script>

<style scoped lang="scss">
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
</style>
