<template>
  <div class="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
    <div class="text-center">
      <p class="text-base font-semibold text-red-600">{{ code }}</p>
      <h1 class="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">{{ errorTitle }}</h1>
      <p class="mt-6 text-base leading-7">{{ errorDescription }}</p>
      <div class="mt-10 flex items-center justify-center gap-x-6">
        <UButton to="/" size="lg">返回首页</UButton>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  code: {
    type: Number,
    default: 404
  },
  title: {
    type: String,
    default: ''
  },
  description: {
    type: String,
    default: ''
  }
})
const errorTitle = computed(() => {
  let title = props.title
  if (!title) {
    const code = props.code
    if (code === 404) title = 'Not found'
    else if (code === 500 || code === 502) title = 'Error'
    else if (code === 403) title= 'Forbidden'
  }
  return title
})
const errorDescription = computed(() => {
  let description = props.description
  if (!description) {
    const code = props.code
    if (code === 404) description = '抱歉，当前访问的内容不存在或被删除'
    else if (code === 500 || code === 502) description = '抱歉，当前内容出现错误'
    else if (code === 403) description= '抱歉，您没有权限访问当前内容'
  }
  return description
})
</script>