<template>
  <!-- 汛情回顾头部日历 -->
  <div class="reviewTopTime flex flex-justcontent-spacebetween">
    <div class="time">
      当前回顾：从<span>{{ huiguActiveTime }} 8:00</span>到<span
        >{{ moment(huiguActiveTime).add(1, "days").format("YYYY-MM-DD") }} 8:00</span
      >
    </div>
    <div class="select">
      更多回顾
      <el-date-picker
        class="selectPick"
        v-model="huiguActiveTime"
        value-format="YYYY-MM-DD"
        type="date"
        :disabled-date="hgDisabledDate"
        @panel-change="yueChange"
        @change="dayChange"
        popper-class="dayListPop"
      >
        <template #default="cell">
          <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
            <div class="day">{{ cell.text }}</div>
            <div v-if="isHoliday(cell)" class="num">{{ isHoliVal(cell) }}mm</div>
          </div>
        </template>
      </el-date-picker>
    </div>
  </div>
  <!-- 左侧 -->
  <Transition name="fade_left">
    <MonitoringWarningLeft v-show="!showPanel" :day="huiguActiveTime" @changeCar='changeCar'/>
  </Transition>
  <!-- 右侧 -->
  <Transition name="fade_right">
    <MonitoringWarningRigh v-show="!showPanel" :day="huiguActiveTime" />
  </Transition>
  <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>

  <!-- 汛情回顾状态框 -->
  <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>

  <Transition name="fade_bottom">
    <div class="reviewTypeBox" v-show="!showPanel">
      <div class="dataLoad flex flex-align-center flex-justcontent-center" v-if="dataLoad">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
      </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">
          请选择最大雨强
          <div class="flex">
            <div
              class="li"
              @click="changeHourTime(i.key)"
              :class="hgEndActive == i.key ? 'active' : ''"
              v-for="i in hgEngList"
              :key="i.key"
            >
              {{ i.name }}
            </div>
          </div>
        </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/pictureOnMap/hgp2.png" /><img
            v-else
            src="@/assets/images/pictureOnMap/hgp1.png"
          />
        </div>
        <div class="playBg">
          <div class="playIn" :style="{ width: stepLin }"></div>
        </div>
      </div>
      <div class="timeScheduleBox flex flex-justcontent-end">
        <div class="playRadio">
          <div
            class="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>
          </div>
        </div>
      </div>
      <div class="timeChart">
        <ChartLs :echartData="hoursList" :refresh="refresh" />
      </div>
    </div>
  </Transition>
</template>

<script setup name="pailaohuigu">
import bus from "@/bus";
import MonitoringWarningLeft from "./MonitoringWarningLeft/index.vue";
import MonitoringWarningRigh from "./MonitoringWarningRigh/index.vue";
import * as reviewApi from "@/api/FloodControlAndDrainage.js";
import ChartLs from "./MonitoringWarningRigh/components/chartLs.vue";
const { proxy } = getCurrentInstance();
// 面板控制组件
import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
const showPanel = ref(false); //面板展开收起
const PanelChange = (val) => {
  showPanel.value = val;
};
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)" },
  ],
];
// 回顾降雨日历
let refresh = ref(1);
let huiguListTime = ref([]);
let huiguActiveTime = ref("");
let huiguActiveMoon = ref("");
let hoursList = ref({});
let hoursScale = ref([]);

// 降雨轮播
let showRainLegend = ref(false);
let runDayInterval = ref();
let showRainList = ref([]);

let dataLoad = ref(false);

const hgEngList = [
  { key: 1, name: "1小时" },
  { key: 3, name: "3小时" },
  { key: 12, name: "12小时" },
  { key: 24, name: "24小时" },
];
let hgEndActive = ref("");
let hgEngPlay = ref(false);
let stepLin = ref("0");
let stepNum = ref(0);
let rainPicture = ref([]);

// 降雨日历代码
function getRainTime() {
  reviewApi.rainCalendarLately().then((res) => {
    huiguActiveTime.value = res;
    huiguActiveMoon.value = proxy.moment(res).format("YYYY-MM");
    if (huiguActiveTime.value != "") {
      getRainData();
      getRainDay();
    }
  });
}
function getRainData() {
  let parms = { queryTime: huiguActiveMoon.value };
  reviewApi.rainCalendar(parms).then((res) => {
    let array = [];
    res.forEach((i, d) => {
      if (i.weather != "无雨") {
        array.push(i);
      }
    });
    huiguListTime.value = array;
  });
}
// 日历切换
const yueChange = (time) => {
  huiguActiveMoon.value = proxy.moment(time).format("YYYY-MM");
  getRainData();
};
const dayChange = (time) => {
  // hgEndActive.value = "";
  hoursScale.value.forEach((e) => {
    e.chuse = false;
  });
  getRainDay();
};
// 日历过滤
const hgDisabledDate = (time) => {
  return time.getTime() > Date.now() - 8.64e7;
  // let dd=moment(time).format('YYYY-MM-DD')
  // if(huiguListTime.value.length>0){
  //   let isDay=huiguListTime.value.find(i=>{return proxy.moment(proxy.moment(i.date).format('YYYY-MM-DD')).valueOf()==Number(proxy.moment(dd).valueOf())})
  //   return isDay?false:true
  // }else{
  //   return true
  // }
};
const isHoliday = ({ dayjs }) => {
  let array = [];
  huiguListTime.value.forEach((i) => {
    array.push(proxy.moment(i.date).format("YYYY-MM-DD"));
  });
  return array.includes(dayjs.format("YYYY-MM-DD"));
};
const isHoliVal = ({ dayjs }) => {
  let val = huiguListTime.value.find((i) => {
    return (
      proxy.moment(proxy.moment(i.date).format("YYYY-MM-DD")).valueOf() ==
      Number(proxy.moment(dayjs.format("YYYY-MM-DD")).valueOf())
    );
  });
  return val.value;
};

// 降雨折线图
function getRainDay() {
  dataLoad.value=true
  let parms = { time: huiguActiveTime.value };
  reviewApi.rainMapDataBack(parms).then((res) => {

    if (res.code == 200) {
      hoursList.value = res.data;
      hoursList.value.activeIndex = 0;
      let array = [];
      rainPicture.value = [];
      let list = JSON.parse(JSON.stringify(hoursList.value.rainTrend));
      list.forEach((e, i) => {
        let obj = {
          weather: e,
          time: proxy.moment(hoursList.value.date[i]).format("H"),
          rain: hoursList.value.history[i],
          chuse: true,
        };
        array.push(obj);
      });
      hoursList.value.resultList.forEach(e=>{
        rainPicture.value.push(e.url)
      })
      hoursScale.value = array;
      refresh.value = Math.random();
      hgEngPlay.value = false;


      !(newfiberMap.RainsLayer) && (newfiberMap.RainsLayer = new mapboxgl1.RainsLayer(
        [114.359445, 30.26976, 114.635417, 30.578213],
        rainPicture.value,
        self => {
          self.addTo(newfiberMap.map);
          self.hide();
          dataLoad.value=false;
          console.log('8888888888888888',dataLoad.value);
        }
      ));
      newfiberMap.RainsLayer.init(rainPicture.value);
    }
  })
}
function runDayTime() {
  bus.emit('clearTrajectory')
  hgEndActive.value = "";
  showRainLegend.value = true;
  showRainList.value = ranLeng[0];
  hoursScale.value.forEach((e) => {
    e.chuse = false;
  });
  if (hgEngPlay.value) {
    timeLoop();
  } else {
    hgEngPlay.value = false;
    clearInterval(runDayInterval.value);
  }
  newfiberMap.RainsLayer.init(rainPicture.value,(self)=> self.show())
}

function timeLoop() {
  let runTime = 500;
  if (hoursList.value.rainTrend[Number(stepNum.value)] == "无雨") {
    runTime = 500;
  } else {
    runTime = 3000;
  }

  runDayInterval.value = setTimeout(() => {
    stepNum.value++;
    if (stepNum.value <= 24) {
      stepLin.value = `${stepNum.value * 4.1666}%`;
      newfiberMap.RainsLayer.next()
      timeLoop();
    } else {
      emptyRun();
    }
    changeChartData();
  }, runTime);
}
// 事件清除
function emptyRun() {
  stepLin.value = "0%";
  stepNum.value = 0;
  hgEngPlay.value = false;
  showRainLegend.value = false;
  hoursList.value.activeIndex = stepNum.value;
  clearInterval(runDayInterval.value);
  if (runDayInterval.value) {
    runDayInterval.value = null;
    refresh.value = Math.random();
  }
  newfiberMap.RainsLayer.hide()
}

function changeChartData() {
  hoursList.value.activeIndex = stepNum.value;
  refresh.value = Math.random();
}

function changeHourTime(num) {
  dataLoad.value=true
  hgEndActive.value = num;
  bus.emit('clearTrajectory')
  emptyRun();
  showRainLegend.value = true;
  showRainList.value =
    num == 1 ? ranLeng[0] : num == 3 ? ranLeng[1] : num == 12 ? ranLeng[2] : ranLeng[3];
  let parms = {
    type: num,
    time: huiguActiveTime.value,
  };
  reviewApi.rainMapDataListBack(parms).then((res) => {
    if (res.code == 200) {
      // 24小时前端处理
      if (hgEndActive.value == 24) {
        hoursScale.value.forEach((e) => {
          e.chuse = true;
        });
      } else {
        hoursScale.value.forEach((e) => {
          e.chuse = false;
        });
        res.data.max.forEach((s) => {
          hoursScale.value.forEach((e) => {
            if (e.time == proxy.moment(s).format("H")) {
              e.chuse = true;
            }
          });
        });
      }

      // newfiberMap.RainsLayer.init([ 'https://server1.wh-nf.cn:9000/newfiber-donghugaoxin/2024/11/27/2024-07-02-4%E5%B0%8F%E6%97%B6-4_20241127201053A060.tif'])
      newfiberMap.RainsLayer.init([res.data.weatherwarningFileurl.fileUrl],(self)=> self.show())
      dataLoad.value=false
      // debugger
      console.log("shangtu", res.data);
    }
  }).catch(() => {
    dataLoad.value = false
  })
}

function changeCar(){
  hgEndActive.value = "";
  showRainLegend.value = true;
  showRainList.value = ranLeng[0];
  hoursScale.value.forEach((e) => {
    e.chuse = false;
  });
  emptyRun();
}

onMounted(() => {
  getRainTime();
});

onUnmounted(() => {
  emptyRun();

  if(newfiberMap.RainsLayer)newfiberMap.RainsLayer.destroy();
  newfiberMap.RainsLayer = null;
});
</script>

<style lang="scss" scoped>
.reviewTopTime {
  width: 694px;
  position: fixed;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  .time {
    width: 550px;
    line-height: 38px;
    // background: url(@/assets/images/oneMap/hgsj.png) no-repeat;
    // background-size: 100% 100%;
    background: linear-gradient(
      90deg,
      rgba(10, 36, 121, 0.8) 0%,
      rgba(1, 28, 71, 0.6) 100%
    );
    border-radius: 6px;
    border: 1px solid;
    border-image: linear-gradient(0deg, #47afff, #47afff) 10 10;

    font-weight: 500;
    font-size: 16px;
    color: #f2f6ff;
    text-align: center;
    span {
      font-weight: 500;
      font-size: 16px;
      color: #39f7ff;
      margin: 0 20px;
    }
  }
  .select {
    width: 134px;
    line-height: 38px;
    // background: url(@/assets/images/oneMap/hgan.png) no-repeat;
    // background-size: 100% 100%;
    background: linear-gradient(
      90deg,
      rgba(10, 36, 121, 0.8) 0%,
      rgba(1, 28, 71, 0.6) 100%
    );
    border-radius: 6px;
    border: 1px solid;
    border-image: linear-gradient(0deg, #47afff, #47afff) 10 10;

    font-weight: 500;
    font-size: 16px;
    color: #f2f6ff;
    text-align: center;
    cursor: pointer;
    position: relative;
    :deep(.selectPick) {
      position: absolute;
      left: 0;
      top: 0;
      width: 134px;
      height: 38px;
      opacity: 0;
    }
  }
}

.reviewTypeBox {
  height: 270px;
  // background: rgba(11, 52, 116, 0.78);
  position: fixed;
  left: 510px;
  right: 510px;
  bottom: 20px;
  z-index: 999;
  background: linear-gradient(
    90deg,
    rgba(10, 36, 121, 0.8) 0%,
    rgba(1, 28, 71, 0.6) 100%
  );
  border: 1px solid rgba(71, 175, 255, 1);
  border-radius: 10px;
  box-shadow: 0 0 10px #47afff inset;
  overflow: hidden;
  .dataLoad{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(1, 28, 71, 0.6);
    z-index: 11;
    font-size:30px;
  }
  .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%);
          }
        }
      }
    }
    .rainList {
      float: right;
      line-height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      .li {
        width: 54px;
        text-align: center;
        background: linear-gradient(0deg, rgba(0,98,183,0.8) 0%, rgba(0,98,183,0.1) 100%);
        border-radius: 1px;
        border: 1px solid #0B9BFF;
        margin-left: 10px;
        cursor: pointer;
        &.active {
          color: #FFFFFF;
          background: linear-gradient(0deg, rgba(6,227,209,0.8) 0%, rgba(12,59,85,0.1) 100%);
          border-color:#2FF6E8;
        }
      }
    }
  }
  .timeScheduleBox {
    padding: 0 20px;
    overflow: hidden;
    .playBtn {
      width: 22px;
      height: 22px;
      cursor: pointer;
      img {
        display: block;
        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/pictureOnMap/hgpx.png) repeat-x;
        background-size: 16px 12px;
      }
      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 72px;
        height: 12px;
        background: url(@/assets/images/pictureOnMap/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% - 150px);
    overflow: hidden;
  }
}

.rainMapLeng {
  position: fixed;
  right: 520px;
  bottom: 300px;
  background: rgba(11, 52, 116, 0.78);
  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;
    }
  }
}
</style>