<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 colorPart">
      <p><span></span>0.05-0.15</p>
      <p><span></span>0.15-0.3</p>
      <p><span></span>0.3-0.5</p>
      <p><span></span>0.5-1.0</p>
      <p><span></span>>1.0</p>
    </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: 180px;
    }
    .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;
    }
  }
  .colorPart {
    justify-content: center;
    align-items: center;
    p {
      width: 120px;
      text-align: center;
      span {
        width: 23px;
        height: 12px;
        display: inline-block;
        border-radius: 6px;
        margin-right: 8px;
      }
      &:nth-of-type(1) span {
        background: #3afff8;
      }
      &:nth-of-type(2) span {
        background: #2bd2ff;
      }
      &:nth-of-type(3) span {
        background: #ffed52;
      }
      &:nth-of-type(4) span {
        background: #ffaa6b;
      }
      &:nth-of-type(5) span {
        background: #ff4545;
      }
    }
  }
}
</style>