<script setup lang="ts">
import { setToken } from 'libs/token'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const progress = ref(0) // 进度条数值
let timer: any = null // 定时器标识

// 登录成功后开始随机进度条动画
const startProgress = () => {
  timer = setInterval(() => {
    // 生成1-5%的随机步长
    const randomStep = Math.floor(Math.random() * 9 + 1) // 1-5之间的随机整数

    // 计算新进度（不超过100%）
    progress.value = Math.min(progress.value + randomStep, 100)

    // 达到100%时停止并跳转
    if (progress.value >= 100) {
      clearInterval(timer)
      router.push('/')
    }
  }, 100) // 每500ms更新一次
}
onMounted(() => {
  setToken('111')
  startProgress()
})

// login({ username: 'admin', password: '12345' }).then((res: any) => {
//   setToken(res)
//
// })

// 组件卸载时清理定时器
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<template>
  <div>
    <!-- 进度条容器 -->
    <div class="progress-container">
      <div class="progress-bar" :style="{ width: `${progress}%` }" />
      <div class="progress-text">
        v1.0.1系统初始化中 {{ progress }}%
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f0f2f5;
}
img {
  width: 600px;
  position: absolute;
  top: 40%;
  right: 20%;
}

.progress-container {
  width: 50%;
  height: 50px;
  background: #e4e7ed;
  border-radius: 30px;
  position: relative;
  top: 90%;
  margin: 0 auto;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #096ae0, #0657c0);
  border-radius: 30px;
  transition: width 0.3s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
</style>
