<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="text-center">
      <div class="mb-8">
        <h1 class="text-9xl font-bold text-gray-800">{{ errorCode }}</h1>
        <p class="text-2xl text-gray-600 mt-4">{{ errorMessage }}</p>
      </div>
      <p class="text-gray-500 mb-8">{{ errorDescription }}</p>
      <router-link to="/" 
                   class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition">
        返回首页
      </router-link>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'ErrorPage',
  setup() {
    const route = useRoute()
    
    const errorCode = computed(() => route.params.code || '404')
    
    const errorMessage = computed(() => {
      switch (errorCode.value) {
        case '403':
          return '访问被拒绝'
        case '404':
          return '页面未找到'
        case '500':
          return '服务器错误'
        default:
          return '未知错误'
      }
    })
    
    const errorDescription = computed(() => {
      switch (errorCode.value) {
        case '403':
          return '抱歉，您没有权限访问此页面'
        case '404':
          return '抱歉，您访问的页面不存在'
        case '500':
          return '抱歉，服务器出现了问题'
        default:
          return '发生了一些错误，请稍后再试'
      }
    })

    return {
      errorCode,
      errorMessage,
      errorDescription
    }
  }
}
</script>
