<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 timeCont">
        <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" style="height: 30px">
      <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(); // 定时器开启
  newfiberMap.setCenter({
    lng: 114.312,
    lat: 32.502,
    heading: 2.281299097855777,
    zoom: 136358.12942752382,
    pitch: -25.2508969308367,
    roll: 0.005453465256790101,
  });
  setTimeout(() => {
    newfiberMap.setLayersVisible(['weather_cloud'], true);
  }, 2000);
}
// 开启定时器
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();
  newfiberMap.setLayersVisible(['weather_cloud'], false);
  newfiberMap.setCenter({
    lng: 114.312,
    lat: 34.442,
    heading: 2.281299097855777,
    zoom: 16358.12942752382,
    pitch: -25.2508969308367,
    roll: 0.005453465256790101,
  });
}
// 定时器清除
function stopTimer() {
  if (timer.value) {
    clearInterval(timer.value);
  }
}

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

<style lang="scss">
.rainFuturePage {
  width: 100%;
  padding: 10px 20px;
  .centerCont {
    justify-content: space-around;
    align-items: center;
    .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;
    }
    .timeCont {
      width: 100%;
      height: 30px;
      margin-right: 50px;
      margin-top: -20px;
    }
  }
  .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>