<template>
  <div class="main">
    <div class="main_in">
      <weatherTitle :title="'卫星云图-风云四号'" refreshName="metRefreshName" />
      <div style="width: 100%; height: 214px">
        <div @click="subNode()" id="mo-map1">
          <img :src="onHour.activeObj.img" />
          <div class="mo-map1-title"> 真色彩：{{ onHour.activeObj.time }} </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeUnmount, reactive, getCurrentInstance, onMounted } from 'vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import { getAppEnvConfig } from '/@/utils/env';
const { VITE_GLOB_BASE_IMG } = getAppEnvConfig();
let activeKey = ref('1');
import eventBus from '/@/utils/eventBus';
function subNode() {
  eventBus.emit('nophogramClick', onHour.activeArr, All);
}
let onHour = reactive({
  activeObj: {},
  activeArr: [],
});
function rainfallClick() {
  eventBus.emit('rainfallClick');
}
function setImg(value) {
  return `${VITE_GLOB_BASE_IMG}${value}`;
}
let setIntervalOut = null;
function setActiveImg() {
  let index = 1;
  setIntervalOut = setInterval(() => {
    if (onHour.activeArr.length - 1 == index) {
      onHour.activeObj = JSON.parse(JSON.stringify(onHour.activeArr[index]));
      onHour.activeObj.img = setImg(onHour.activeArr[index].img);
      index = 0;
    } else {
      onHour.activeObj = JSON.parse(JSON.stringify(onHour.activeArr[index]));
      onHour.activeObj.img = setImg(onHour.activeArr[index].img);
      index++;
    }
  }, 3000);
}
eventBus.on('onHourSatellite', (e) => {
  onHour.activeArr = e;
  onHour.activeObj = JSON.parse(JSON.stringify(onHour.activeArr[0]));
  onHour.activeObj.img = setImg(onHour.activeArr[0].img);
  // 设置循环事件
  setActiveImg();
});
let All = {};
eventBus.on('onHourAll', (e) => {
  All = e;
});
onBeforeUnmount(() => {
  // 清空定时器
  clearInterval(setIntervalOut);
  // alert(1);
});
</script>

<style lang="less" scoped>
.main {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 0px 30px 0px 30px;
  background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
}

.main_in {
  width: 100%;
  height: 100%;
  border-radius: 0px 30px 0px 30px;
  background: rgba(6, 37, 70, 0.9);
}
// 修改组件样式结束
#mo-map1 {
  // background-color: red;
  width: 95%;
  height: 190px;
  margin: 0 auto;
  padding-top: 10px;
  position: relative;
  .mo-map1-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    line-height: 40px;
    color: #fff;
    text-align: center;
  }
  img {
    margin: 0px auto;
    width: 100%;
    height: 100%;
  }
}
</style>
