<template>
  <!-- <div class="xtjc-left-side" v-show="mapStore.rightSideMenu" :style="{
    transform: `scale(${transformNum})`,
    top: `${transformTop}px`,
    'margin-right': `${transformRight}px`
  }"> -->
  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu">
    <!-- 气象一览 -->
    <!-- <meteorologicalOverview :oneHourPrecipitation="rainLiveImg.rainLiveImgData['hourly-precipitation']" /> -->
    <meteorologicalOverview />
    <!-- 卫星云图 -->
    <nephogram />
    <!-- 雷达图 -->
    <radar />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import meteorologicalOverview from './components/meteorologicalOverview.vue';
import nephogram from './components/nephogram.vue';
import radar from './components/radar.vue';
import { useMapStore } from '/@/store/modules/map';
import { getRainLiveImg } from '/@/api/swHome/index';
import { useDebounceFn } from '@vueuse/core';
import eventBus from '/@/utils/eventBus';
eventBus.on('metRefreshName', () => {
  getRainLiveImgData();
});
eventBus.on('metRefreshName2', () => {
  getRainLiveImgData();
});
const mapStore = useMapStore();
// 获取云图，气象，雷达反射率
let rainLiveImg = reactive({
  rainLiveImgData: {},
});
function getRainLiveImgData() {
  getRainLiveImg().then((res) => {
    rainLiveImg.rainLiveImgData = res.data;
    eventBus.emit('onHourPrecipitation', res.data['hourly-precipitation']);
    eventBus.emit('onHourSatellite', res.data['FY4A_true_color']);
    eventBus.emit('onHourAll', res.data);
    eventBus.emit('onHourRadar', res.data['Radar_xz_linzhi']);
  });
}
let transformNum = ref(0.8)
let transformTop = ref(0)
let transformRight = ref(-40)
const getWindowSize = (e) => {
  let visualHeight = window.innerHeight
  transformNum.value = visualHeight/1080
  transformTop.value = 90-((1080-visualHeight)*0.53)
  transformRight.value = (1080-visualHeight)*-0.26
  // transformNum.value = visualHeight/1080
  // if(visualHeight>911){
  //   transformTop.value = 90
  //   transformRight.value = 0
  //   transformNum.value = 1
  // }else{
  //   transformTop.value = 0
  //   transformRight.value = -40
  //   transformNum.value = 0.8
  // }
}
onMounted(() => {
  window.addEventListener('resize', useDebounceFn(function (event) {
    getWindowSize(event)
  }, 300));
  getRainLiveImgData();
  getWindowSize()
});

</script>
<style lang="less" scoped>
.xtjc-left-side {
  // position: fixed;
  position: absolute;
  right: 0px;
  top: 60px;
  z-index: 3;
  width: 400px;
  // height: 100%;
  margin-right: 0px;
  // transform: scale(0.86);
}
.xtjc-left-side {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes move {
  0% {
    right: -400px;
  }
  100% {
    right: 20px;
  }
}
</style>
