<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const errorMessages: Record<string, { icon: string; title: string; message: string }> = {
  '400': {
    icon: '❓',
    title: '哦豁！请求有点问题',
    message: '请求似乎有点小问题，服务器君有点摸不着头脑呢！',
  },
  '403': {
    icon: '🔒',
    title: '哎呀！大门被锁住了',
    message: '你没有权限访问这个角落，试试返回首页吧！',
  },
  '404': {
    icon: '🌌',
    title: '哎呀！你发现了超级基地的秘密角落',
    message: '看起来你找的页面藏到了未知的时空层里！',
  },
  '500': {
    icon: '🚀',
    title: '糟糕！超级基地出了一点故障',
    message: '服务器君正在努力解决问题，请稍等片刻！',
  },
  '502': {
    icon: '👽',
    title: '糟糕！基地信号被外星人拦截了',
    message: '网络通道似乎遇到了问题，请稍后再试！',
  },
  default: {
    icon: '⚠️',
    title: '哦豁！此时遇到了点小麻烦',
    message: '请求在穿越洋葱星球时迷路了，请返回首页重新探索！',
  },
};

const errorContent = computed(() => errorMessages[props.error!.statusCode] || errorMessages['default']);
console.error(props.error)

onMounted(() => {
  emitter.emit("startLoading", false)
})
</script>

<template>
  <div class="relative flex min-h-screen flex-col overflow-hidden bg-blue-50">
    <nav-bar :nav-color="true"/>
    <alert :title="errorContent.title" :message="errorContent.message" :icon="errorContent.icon"/>
    <footer-main/>
    <alert-notification/>
  </div>
</template>

<style scoped>

</style>