<template>
  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu">
    <!-- 预报A -->
    <predictionA
      v-if="prediction.predictionAData.name.length > 0"
      :predictionData="prediction.predictionAData"
      :title="pageTitle"
      :nodeId="'predictionA'"
    />

    <!-- 预报B -->
    <predictionA
      v-if="prediction.predictionBData.name.length > 0"
      :predictionData="prediction.predictionBData"
      :title="pageTitle2"
      :nodeId="'predictionB'"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { useMapStore } from '/@/store/modules/map';
const mapStore = useMapStore();
import predictionA from './components/predictionA.vue';
import eventBus from '/@/utils/eventBus';
let pageTitle = reactive({
  titleText: '雨洪对照图',
  pageTitle: '',
  lat:null,
  lng:null
});
let pageTitle2 = reactive({
  titleText: '雨洪对照图',
  pageTitle: '',
  lat:null,
  lng:null
});
let prediction = reactive({
  predictionAData: {
    name: [],
    qf: [],
    qs: [],
    rain: [],
  },
  predictionBData: {
    name: [],
    qf: [],
    qs: [],
    rain: [],
  },
});
function setPredictionAData(data) {
  prediction.predictionAData = {
    name: [],
    qf: [],
    qs: [],
    rain: [],
  };
  pageTitle.pageTitle = data[2].st_name;
  pageTitle.lat = data[2].lat;
  pageTitle.lng = data[2].lng;
  let dataList = data[2].detail;
  dataList.forEach((element) => {
    prediction.predictionAData.name.push(element.time);
    prediction.predictionAData.qf.push(element.qf);
    prediction.predictionAData.qs.push(element.qs);
    prediction.predictionAData.rain.push(element.rain);
  });
}

function setPredictionBData(data) {
  prediction.predictionBData = {
    name: [],
    qf: [],
    qs: [],
    rain: [],
  };
  pageTitle2.pageTitle = data[3].st_name;
  pageTitle2.lat = data[3].lat;
  pageTitle2.lng = data[3].lng;
  let dataList = data[3].detail;
  dataList.forEach((element) => {
    prediction.predictionBData.name.push(element.time);
    prediction.predictionBData.qf.push(element.qf);
    prediction.predictionBData.qs.push(element.qs);
    prediction.predictionBData.rain.push(element.rain);
  });
}
eventBus.on('stormFlood', (e) => {
  // console.log('stormFlood', e);
  setPredictionAData(e);
  setPredictionBData(e);
});
</script>
<style lang="less" scoped>
.xtjc-left-side {
  // position: fixed;
  position: absolute;
  right: 20px;
  top: 90px;
  z-index: 3;
  width: 400px;
  // height: 100%;
}
.xtjc-left-side {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes move {
  0% {
    right: -400px;
  }
  100% {
    right: 20px;
  }
}
</style>
