<template>
  <div>
    <h1 class="text-2xl mb-5 text-blue-600">远程自检</h1>
    <el-button @click="showLoader">空开远程自检</el-button>
    <div v-loading="spinning" :element-loading-text="tip" element-loading-background="rgba(0, 0, 0, 0.7)">
      <!-- 这里放置需要被 loading 覆盖的内容 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElMessage } from 'element-plus';

const spinning = ref(false);
const tip = ref('远程自检中...');

const showLoader = () => {
  spinning.value = true;
  let ptg = -10;

  const interval = setInterval(() => {
    ptg += 10;

    if (ptg > 120) {
      clearInterval(interval);
      spinning.value = false;
      ElMessage.success('远程自检成功,暂未发现异常');
    }
  }, 100);
};
</script>
