<template>
  <!-- 页面容器使用flex垂直布局，简单静态内容无需滚动容器 -->
  <view class="page">
				<!-- <view class="back-btn" hover-class="hover_btn" @click="handleBack">
					<image class="back-icon" src="/static/icon_back.png" mode="aspectFill"></image>
				</view> -->
    <view class="content">
      <image class="icon" src="/static/icon_guaqi.png" mode="aspectFill"></image>
      <!-- <text class="title">设备挂起</text> -->
      <text class="desc">请稍等，我很快恢复...</text>
    </view>

    <!-- 底部联系方式，绝对定位固定在页面底部 -->
    <view class="footer">
      <!-- <text class="contact">请联系管理员</text> -->
       <view class="refresh-btn" hover-class="hover_btn" @click="handlerefresh">刷新</view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { getMachineApp } from '../../utils/reques.uts'
import type { ResponseData } from '../../utils/reques.uts'
// 1分钟倒计时，结束后自动返回首页
// 严格类型：定时器id为 number，可为空
let countdownTimer: number | null = null
let remainingSeconds: number = 60

// 页面加载时启动倒计时
onLoad((): void => {
  remainingSeconds = 60
  // 每秒减少一次，直到为0
  countdownTimer = setInterval(() => {
    remainingSeconds = remainingSeconds - 1
    if (remainingSeconds <= 0) {
      // 结束倒计时并跳转首页
      if (countdownTimer != null) {
        clearInterval(countdownTimer as number)
        countdownTimer = null
      }
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  }, 1000) as number
})

// 页面卸载时清理定时器，避免内存泄漏
onUnload((): void => {
  if (countdownTimer != null) {
    clearInterval(countdownTimer as number)
    countdownTimer = null
  }
})

const getMachineinfo = async () : Promise<void> => {
		const params = {} as object
		try {
			const res : ResponseData = await getMachineApp(params) as ResponseData
			if (res.code == 0) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		} catch (error) {
			console.log('获取机器信息失败:', error)
		}
	}

const handlerefresh = () => {
    getMachineinfo()
}
</script>

<style>
  .page {
    /* 页面背景与布局 */
    flex: 1;
    background-color: #F7F7F7;
    align-items: center;
  }


	.back-btn {
        position: absolute;
        left: 50rpx;
        top: 50rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		background-color: rgba(255, 255, 255, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back-icon {
		width: 45rpx;
		height: 45rpx;
	}

  .content {
    /* 通过 flex 垂直居中内容，不使用 margin 顶起 */
    flex: 1;
    justify-content: center;
    align-items: center;
  }

  .icon {
    width: 426rpx;
    height: 426rpx;
  }

  .title {
font-size: 48rpx;
color: #000000;
    margin-top: 28rpx;
  }

  .desc {
    font-size: 42rpx;
color: #000000;
    margin-top: 12px;
  }

  .footer {
    position: absolute;
    left: 50%;
  transform: translateX(-50%);
    bottom: 100rpx;
    align-items: center;
  }

  .refresh-btn {
    width: 160rpx;
    height: 80rpx;
    border-radius: 40rpx 0 40rpx 0;
    color: #000000ff;
    border: 2rpx solid #FF86C3;
    font-size: 42rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .contact {
    font-size: 30rpx;
color: #000000;
  }
</style>