<!-- 页脚 -->
<template>
  <div class="footer">
    <div class="footer-content">
      <!-- 备案信息 -->
      <p class="footer-beian">
        备案号：
        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
          皖ICP备2025105428号-1 || 皖公网安备34120202001634号
        </a>
      </p>
      
      <!-- 版权信息 -->
      <p class="footer-copyright">
        网站所有权利保留 &copy; {{ new Date().getFullYear() }} <a href="https://www.qf1121.top" target="_blank">清疯不颠</a>
      </p>
      
      <!-- 运行时间 -->
      <p class="footer-runtime">
        运行时间：<span>{{ runtime }}</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 运行时间响应式状态
const runtime = ref('计算中...')
// 网站上线时间 (时间戳)
const LAUNCH_DATE = new Date('2025-12-01T00:00:00').getTime()
// 定时器引用
let runtimeTimer: number | null = null

/**
 * 更新网站运行时间
 */
const updateRuntime = () => {
  const now = Date.now()
  const diff = now - LAUNCH_DATE
  
  // 计算天、时、分、秒
  const days = Math.floor(diff / 86400000)
  const hours = Math.floor((diff % 86400000) / 3600000)
  const minutes = Math.floor((diff % 3600000) / 60000)
  const seconds = Math.floor((diff % 60000) / 1000)
  
  // 更新运行时间显示
  runtime.value = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`
}

// 组件挂载时初始化
onMounted(() => {
  // 立即更新一次
  updateRuntime()
  // 每秒更新一次
  runtimeTimer = window.setInterval(updateRuntime, 1000)
})

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

<style scoped>
/* 页脚容器 */
.footer {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem 0;
  width: 100%;
  position: relative;
  bottom: 0;
}

/* 页脚内容 */
.footer-content {
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* 通用段落样式 */
.footer-content p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}

/* 备案信息 */
.footer-beian a {
  color: #409eff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-beian a:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 版权信息 */
.footer-copyright {
  font-weight: 500;
  color: #333;
}

/* 运行时间 */
.footer-runtime {
  font-family: 'Courier New', monospace;
  color: #67c23a;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer {
    margin-top: 2rem;
    padding: 1rem 0;
  }
  
  .footer-content {
    padding: 1rem;
    margin: 0 1rem;
  }
  
  .footer-content p {
    font-size: 0.8rem;
  }
}
</style>
