<template>
  <div class="not-found-container">
    <div class="error-code">404</div>
    <div class="error-message">
      <h2 class="error-title">哎呀，页面走丢了！</h2>
      <p class="error-desc">
        你访问的页面不存在、已被删除或网址输入错误。
        请检查网址是否正确，或返回首页继续浏览。
      </p>
    </div>
    <div class="btn-group">
      <a class="action-btn btn-home" href="/">返回首页</a>
      <button class="action-btn btn-back" @click="backHandler">返回</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter()

/*
 const route = useRoute()
 const props = defineProps<{
 targetPath: string
 targetHash: string
 targetQuery: Record<string, string>
 }>()

 console.log('错误路由', props.targetPath, props.targetHash, props.targetQuery)
 console.log('route ', route)
 console.log('path ', route.path)
 console.log('params ', route.params)
 console.log('hash', route.hash)
 console.log('query', route.query)
 console.log('router', router.getRoutes()) */
function backHandler() {
  router.back()
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.not-found-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #F5F7FA 0%, #C3CFE2 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #333333;
}

.error-code {
  font-size: 12rem;
  font-weight: 900;
  color: #4A6FA5;
  position: relative;
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 错误提示文本 */
.error-message {
  text-align: center;
  margin-bottom: 40px;
  max-width: 600px;
}

.error-title {
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #2C3E50;
}

.error-desc {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #607D8B;
  margin-bottom: 20px;
}

.btn-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-btn {
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-home {
  background-color: #4A6FA5;
  color: white;
}

.btn-home:hover {
  background-color: #395A8C;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(74, 111, 165, 0.2);
}

.btn-back {
  background-color: transparent;
  color: #4A6FA5;
  border: 2px solid #4A6FA5;
}

.btn-back:hover {
  background-color: #4A6FA5;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(74, 111, 165, 0.2);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .error-code {
    font-size: 8rem;
  }

  .error-title {
    font-size: 1.8rem;
  }

  .action-btn {
    padding: 10px 25px;
  }
}

@media (max-width: 480px) {
  .error-code {
    font-size: 5rem;
  }

  .error-title {
    font-size: 1.5rem;
  }

  .btn-group {
    flex-direction: column;
    width: 80%;
  }
}
</style>
