<template>
  <!-- 降雨预报 -->
  <div class="rainFuturePage">
    <div class="centerCont flex">
      <p class="title">降雨预报</p>
      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
    </div>
    <div class="centerCont flex">
      <p class="title"></p>
      <div class="flex flex-justcontent-spacebetween" style="width: 100%; margin-right: 50px">
        <p>00:00</p>
        <p>06:00</p>
        <p>12:00</p>
        <p>24:00</p>
      </div>
      <el-button type="warning" style="visibility: hidden"></el-button>
    </div>
    <!-- 颜色块 -->
    <div class="flex">
      
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const processVal = ref(0);
const ifStart = ref(true);
const isdisabled = ref(false);
const timer = ref(null);

// 开始
function startImitate() {
  ifStart.value = false;
  startTimer(); // 定时器开启
}
// 开启定时器
function startTimer() {
  if (processVal.value == 100) processVal.value = 0;
  timer.value = setInterval(() => {
    console.log('timer------');
    processVal.value += 5;
    if (processVal.value > 100) {
      processVal.value = 100;
      stopImitate();
      return;
    }
  }, 1000);
}

// 暂停模拟
function stopImitate() {
  ifStart.value = true;
  stopTimer();
}
// 定时器清除
function stopTimer() {
  if (timer.value) {
    clearInterval(timer.value);
  }
}

onMounted(() => {});
onBeforeMount(() => {
  stopTimer();
});
</script>

<style lang="scss">
.rainFuturePage {
  width: 100%;
  padding: 20px;
  .centerCont {
    justify-content: space-around;
    .title {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 20px;
      color: #3afff8;
      width: 130px;
    }
    .el-progress {
      width: 100%;
      margin-right: 20px;
      .el-progress-bar__outer {
        background: rgba(0, 59, 109, 0.8);
      }
      .el-progress-bar__innerText {
        color: #3afff8;
      }
    }
    .el-progress.is-success .el-progress-bar__inner {
      background: #3afff8;
    }
  }
}
</style>