<template>
  <div class="error-container">
    <div class="text-primary text-[150px] leading-none">404</div>
    <div class="text-3xl font-semibold mt-8">页面不存在</div>
    <div class="text-base mt-2 mb-5">抱歉，您访问的页面不存在或已被删除</div>
    <el-button type="primary" size="large" @click="goBack">
      {{ `${countdown}秒后返回上一页` }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const countdown = ref(5)
let timer: number | null = null

// 返回上一页
const goBack = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  router.back()
}

// 开始倒计时
const startCountdown = () => {
  timer = window.setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      goBack()
    }
  }, 1000)
}

// 组件挂载时开始倒计时
onMounted(() => {
  startCountdown()
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<style lang="scss" scoped>
.error-container {
  @apply min-h-screen bg-white flex flex-col items-center justify-center pb-4;
}
</style>
