<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 style="background: #18b1f3; border: none" @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 v-for="i in timeContList">{{ i }}</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>
import { query24hourRainToYuAn } from '@/api/floodSys/floodYP';
const { proxy } = getCurrentInstance();
const timeContList = ref([]);
const processVal = ref(0);
const ifStart = ref(true);
const isdisabled = ref(false);
const timer = ref(null);
const timelineList = ref([]);
const featureStep = ref(0);
const gisJsonData = ref({});
const gisParams = ref({
  rainFall: '',
  ybTime: '',
  category: 'duration',
  type: 'depth',
  realTime: false,
  hours: '24h',
  scenario: 'P1',
});
let maxPoint = '114.4022666731237,34.84413283884892,0.0';
let minPoint = '114.29210083997283,34.7401307666175,0.0';
//内涝风险评估 地图内涝渲染模拟
const gisModuleData = () => {
  query24hourRainToYuAn(gisParams.value).then(res => {
    stopImitate();
    gisJsonData.value = res.data.result;
    let timeContStart = gisJsonData.value[0].createTime.split(' ')[1].split(':').map(Number)[0];
    if (timeContStart < 10) {
      timeContStart = '0' + timeContStart;
    }
    timeContList.value.push(timeContStart + ':00');
    for (let i = 0; i < 5; i++) {
      let index = (i + 1) * 6;
      let timeCont = Number(timeContStart) + index;
      if (timeCont > 24) {
        timeCont = timeCont - 24;
      }
      timeContList.value.push(timeCont + ':00');
    }
    timelineList.value = gisJsonData.value.map((i, idx) => ({
      id: idx,
      name: `${(((idx + 1) * 5) / 60).toFixed(0).padStart(2, 0)}:${((((idx + 1) * 5) % 60) + '').padStart(2, 0)}`,
    }));
    newfiberMapbox.map.ogcLayers
      .filter(i => i.newfiberId == 'newfiber-CanvasLayer')[0]
      .setInitializeParams({
        images: gisJsonData.value.map(i => i.url).reverse(),
        bbox: [...minPoint, ...maxPoint].map(Number).filter(Boolean),
        width: 8360,
        height: 5000,
      });
    if (!!gisJsonData.value.length && gisJsonData.value.length > 1) {
      isdisabled.value = false;
      !!newfiberMapbox.map.getLayer('riskAssesImage') && newfiberMapbox.map.removeLayer('riskAssesImage');
      !!newfiberMapbox.map.getSource('riskAssesImage') && newfiberMapbox.map.removeSource('riskAssesImage');
      addImageLayer(minPoint.split(',').map(Number), maxPoint.split(',').map(Number));
    } else {
      isdisabled.value = true;
      !!newfiberMapbox.map.getLayer('riskAssesImage') && newfiberMapbox.map.removeLayer('riskAssesImage');
      !!newfiberMapbox.map.getSource('riskAssesImage') && newfiberMapbox.map.removeSource('riskAssesImage');
    }
  });
};
//添加模型图
const addImageLayer = (minPoint, maxPoint) => {
  let coordinates;
  newfiberMapbox.map.addSource('riskAssesImage', {
    type: 'image',
    url: gisJsonData.value[gisJsonData.value.length - 1].url,
    coordinates: [
      [Number(minPoint[0]), Number(maxPoint[1])],
      [Number(maxPoint[0]), Number(maxPoint[1])],
      [Number(maxPoint[0]), Number(minPoint[1])],
      [Number(minPoint[0]), Number(minPoint[1])],
    ],
  });
  newfiberMapbox.map.addLayer({
    id: 'riskAssesImage',
    type: 'raster',
    source: 'riskAssesImage',
    layout: {
      visibility: 'none',
    },
    paint: {
      'raster-fade-duration': 0,
    },
  });
};
// 开始
function startImitate() {
  ifStart.value = false;
  startTimer(); // 定时器开启
}
// 开启定时器
function startTimer() {
  if (processVal.value == 100) processVal.value = 0;
  if (gisJsonData.value.length < 1) {
    return;
  }
  if (gisJsonData.value.length > 1) {
    newfiberMapbox.map.setLayoutProperty('riskAssesImage', 'visibility', 'visible');
    let proStept = Math.round(100 / gisJsonData.value.length);
    timer.value = setInterval(() => {
      console.log('timer------');
      featureStep.value += 1;
      newfiberMapbox.map
        .getSource('riskAssesImage')
        .updateImage({ url: gisJsonData.value[gisJsonData.value.length - 1 - featureStep.value].url });

      processVal.value += proStept;

      let setp_play = `step${featureStep.value}`;
      if (processVal.value > 100) {
        processVal.value = 100;
        stopImitate();
        return;
      }
      if (featureStep.value == gisJsonData.value.length - 1) {
        featureStep.value = 0;
        processVal.value = 100;
        stopImitate();
      }
      //changeFeatureColor(setp_play);
    }, 1000);
  } else {
    timer.value = setInterval(() => {
      processVal.value += 100;
      if (processVal.value > 100) {
        processVal.value = 0;
        stopImitate();
      }
    }, 1000);
  }
}

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

onMounted(() => {
  let riskTimer = setInterval(() => {
    if (!newfiberMapbox) return;
    gisModuleData();
    clearInterval(riskTimer);
  }, 100);
});
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: #fff;
      }
    }
    .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>