<template>
  <!-- 汛情回顾状态框 -->
  <div class="rainMapLeng flex flex-align-center" v-if="showRainLegend">
    <div class="flex flex-align-center" v-for="i in showRainList" :key="i">
      <span :style="{ background: i.color }"></span>{{ i.value }}
    </div>
  </div>
  <div class="timeList">
    <div class="colorRadio flex">
      <div class="btn blue flex flex-align-center">
        <span></span>
        <div>小雨</div>
      </div>
      <div class="btn yellow flex flex-align-center">
        <span></span>
        <div>中雨</div>
      </div>
      <div class="btn orange flex flex-align-center">
        <span></span>
        <div>大雨</div>
      </div>
      <div class="btn read flex flex-align-center">
        <span></span>
        <div>暴雨</div>
      </div>
    </div>
    <div class="rainList flex">
      请选择最大雨强
      <ul class="flex">
        <li @click="changeHourTime(i.key)" :class="hgEndActive == i.key ? 'active' : ''" v-for="i in hgEngList" :key="i.key">
          {{ i.name }}
        </li>
      </ul>
    </div>
  </div>
  <div class="timeScheduleBox flex flex-align-center flex-justcontent-spacebetween">
    <div class="playBtn" @click="(hgEngPlay = !hgEngPlay), runDayTime()">
      <img v-if="hgEngPlay" src="@/assets/images/fhpl/hgp2.png" /><img v-else src="@/assets/images/fhpl/hgp1.png" />
    </div>
    <div class="playBg"><div class="playIn" :style="{ width: stepLin }"></div></div>
  </div>
  <div class="timeScheduleBox flex flex-justcontent-end">
    <ul class="playRadio">
      <li
        v-for="(k, i) in hoursScale"
        :key="i"
        :class="{
          blue: (k.weather == '小雨' && i < stepNum) || (k.weather == '小雨' && k.chuse),
          yellow: (k.weather == '中雨' && i < stepNum) || (k.weather == '中雨' && k.chuse),
          orange: (k.weather == '大雨' && i < stepNum) || (k.weather == '大雨' && k.chuse),
          read:
            (i < stepNum && (k.weather == '暴雨' || k.weather == '大暴雨' || k.weather == '特大暴雨')) ||
            ((k.weather == '暴雨' || k.weather == '大暴雨' || k.weather == '特大暴雨') && k.chuse),
        }"
      >
        <div>{{ k.time }}</div>
      </li>
    </ul>
  </div>
  <div class="timeChart">
    <ChartLs />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import ChartLs from '@/views/oneMap/Echarts/ChartLs.vue';

let hgEngPlay = ref(false);
let stepLin = ref('0');
let hgEndActive = ref('');
let showRainList = ref([]);
let hoursScale = ref([]);
let stepNum = ref(0);
const showRainLegend = ref(false);
const ranLeng = [
  [
    { value: '0-0.2', color: 'rgba(7, 213, 118, 0)' },
    { value: '0.2-5', color: 'rgba(7, 213, 118, 1)' },
    { value: '5-25', color: 'rgba(38, 129, 240,1)' },
    { value: '>25', color: 'rgba(255, 26, 26, 1)' },
  ],
  [
    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
  ],
  [
    { value: '0-5', color: 'rgba(7, 213, 118, 0)' },
    { value: '5-15', color: 'rgba(7, 213, 118, 1)' },
    { value: '15-30', color: 'rgba(38, 129, 240,1)' },
    { value: '30-70', color: 'rgba(247, 223, 56, 1)' },
    { value: '70-140', color: 'rgba(230, 85, 41, 1)' },
    { value: '>140', color: 'rgba(255, 26, 26, 1)' },
  ],
  [
    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
    { value: '>250', color: 'rgba(255, 26, 26, 1)' },
  ],
];
const hgEngList = [
  { key: 1, name: '1小时' },
  { key: 3, name: '3小时' },
  { key: 12, name: '12小时' },
  { key: 24, name: '24小时' },
];
function runDayTime() {
  hgEndActive.value = '';
  showRainLegend.value = true;
  showRainList.value = ranLeng[0];
}
function timeLoop() {
  runDayInterval.value = setTimeout(() => {
    stepNum.value++;

    let levels = ranLeng[0].map((i, idx) => ({
      ...i,
      value: Number(i.value.split('-')[0]),
    }));

    console.log(
      'levels',
      levels.map(i => i.value)
    );
  });
}
function emptyRun() {
  stepLin.value = '0%';
  showRainLegend.value = false;
}

function changeHourTime(num) {
  hgEndActive.value = num;
  showRainLegend.value = true;
  showRainList.value = num == 1 ? ranLeng[0] : num == 3 ? ranLeng[1] : num == 12 ? ranLeng[2] : ranLeng[3];
}
</script>

<style lang="scss" scoped>
.rainMapLeng {
  position: absolute;
  right: 0px;
  bottom: 270px;
  background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
  height: 40px;
  div {
    margin: 0 10px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    &:nth-child(1) {
      span {
        border: 1px solid #fff;
      }
    }
    span {
      display: block;
      width: 16px;
      height: 16px;
      margin-right: 4px;
      border-radius: 4px;
    }
  }
}
.timeList {
  padding: 12px 20px 10px;
  overflow: hidden;
  .colorRadio {
    float: left;
    .btn {
      margin-right: 20px;
      span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
      }
      div {
        width: 42px;
        line-height: 22px;
        border: 1px solid rgba(0, 191, 253, 0);
        border-radius: 4px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
      }
      &.blue {
        span {
          background: rgba(0, 191, 253, 1);
        }
        div {
          border-color: rgba(0, 191, 253, 1);
          color: rgba(0, 191, 253, 1);
          background: linear-gradient(0deg, #08324f 0%, #0b3360 100%);
        }
      }
      &.yellow {
        span {
          background: rgba(222, 230, 0, 1);
        }
        div {
          border-color: rgba(222, 230, 0, 1);
          color: rgba(222, 230, 0, 1);
          background: linear-gradient(0deg, #4f4b06 0%, #4f4e06 98%);
        }
      }
      &.orange {
        span {
          background: rgba(255, 184, 15, 1);
        }
        div {
          border-color: rgba(255, 184, 15, 1);
          color: rgba(255, 184, 15, 1);
          background: linear-gradient(0deg, #4f3d06 0%, #4f3d06 98%);
        }
      }
      &.read {
        span {
          background: rgba(255, 26, 26, 1);
        }
        div {
          border-color: rgba(255, 26, 26, 1);
          color: rgba(255, 26, 26, 1);
          background: linear-gradient(0deg, #3e0808 0%, #420808 100%);
        }
      }
    }
  }
  .playBg {
    width: calc(100% - 30px);
    height: 18px;
    background: rgba(77, 149, 217, 0.15);
    border-radius: 9px;
    padding: 3px;
    overflow: hidden;
  }
  .playIn {
    height: 100%;
    background: linear-gradient(90deg, #1890ff, #1ee7e7);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    &::before {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      left: 0;
      height: 12px;
      border-radius: 6px;
      // background: url(@/assets/images/oneMap/hgpx.png) repeat-x;
      background-size: 16px 12px;
    }
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 72px;
      height: 12px;
      // background: url(@/assets/images/oneMap/hgpr.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .rainList {
    float: right;
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        width: 54px;
        text-align: center;
        background: #00344fff;
        margin-left: 10px;
        cursor: pointer;
        &.active {
          background: #002d44;
          border-radius: 2px;
          border: 1px solid #1cf5fc;
        }
      }
    }
  }
}
.timeScheduleBox {
  padding: 0 20px;
  overflow: hidden;
  .playBtn {
    width: 22px;
    height: 22px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .playBg {
    width: calc(100% - 30px);
    height: 18px;
    background: rgba(77, 149, 217, 0.15);
    border-radius: 9px;
    padding: 3px;
    overflow: hidden;
  }
  .playIn {
    height: 100%;
    background: linear-gradient(90deg, #1890ff, #1ee7e7);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    &::before {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      left: 0;
      height: 12px;
      border-radius: 6px;
      background: url(@/assets/images/oneMap/hgpx.png) repeat-x;
      background-size: 16px 12px;
    }
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 72px;
      height: 12px;
      background: url(@/assets/images/oneMap/hgpr.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .playRadio {
    display: flex;
    width: calc(100% - 30px);
    padding-top: 34px;
    position: relative;
    li {
      width: 4.1666%;
      padding-top: 10px;
      display: flex;
      justify-content: center;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        width: 2px;
        height: 7px;
        background: #799fc8;
        top: -7px;
        left: 50%;
        margin-left: -1px;
      }
      &::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background: #799fc8;
        top: -20px;
        left: 50%;
        margin-left: -4px;
        border-radius: 50%;
        display: none;
      }
      div {
        width: 22px;
        line-height: 22px;
        background: #799fc8;
        font-family: DINPro;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
      }
      &.blue {
        &::before {
          background: #00bffd;
        }
        &::after {
          background: #00bffd;
          display: block;
        }
        div {
          background: #00bffd;
        }
      }
      &.yellow {
        &::before {
          background: #dee600;
        }
        &::after {
          background: #dee600;
          display: block;
        }
        div {
          background: #dee600;
        }
      }
      &.orange {
        &::before {
          background: #ffb80f;
        }
        &::after {
          background: #ffb80f;
          display: block;
        }
        div {
          background: #ffb80f;
        }
      }
      &.read {
        &::before {
          background: #ff1a1a;
        }
        &::after {
          background: #ff1a1a;
          display: block;
        }
        div {
          background: #ff1a1a;
        }
      }
    }
    &::before {
      content: '';
      position: absolute;
      right: 0;
      top: 34px;
      left: 0;
      height: 2px;
      background: #799fc8;
    }
  }
}
.timeChart {
  height: calc(100% - 140px);
  overflow: hidden;
  // background: red;
}
</style>