<template>
  <div>
    <leftPage />
    <rightPage />
    <!-- 页面弹窗卫星云图区域 -->
    <Dialog :width="'1300px'" :height="900" :dialogVisable="dialogvisable" :title="title" @visible-change="closeModal">
      <div class="dialog-box-satellite">
        <div class="satellite-img-box" :style="{ height: data.progressHeight + 'px' }">
          <img :style="{ height: data.progressHeight - 50 + 'px' }" :src="satelliteImg" />
        </div>

        <div :style="{ height: data.progressHeight + 'px' }" class="progress-box">
          <div class="progress-box-title">
            <div>类别：</div>
            <div @click="setSatelliteType(1)" :class="{ active: satelliteData.type == 1, 'pg-btn': true }">真色彩</div>
            <div @click="setSatelliteType(2)" :class="{ active: satelliteData.type == 2, 'pg-btn': true }">红外</div>
            <div @click="setSatelliteType(3)" :class="{ active: satelliteData.type == 3, 'pg-btn': true }">可见光</div>
            <div @click="setSatelliteType(4)" :class="{ active: satelliteData.type == 4, 'pg-btn': true }">水汽</div>
          </div>
          <div class="progress-box-title">
            <div>播放速度：</div>
            <div @click="setSatelliteTime(500)" :class="{ active: satelliteData.activeTime == 500, 'pg-btn': true }">0.5s</div>
            <div @click="setSatelliteTime(3000)" :class="{ active: satelliteData.activeTime == 3000, 'pg-btn': true }">3s</div>
            <div @click="setSatelliteTime(5000)" :class="{ active: satelliteData.activeTime == 5000, 'pg-btn': true }">5s</div>
            <div @click="setSatelliteTime(10000)" :class="{ active: satelliteData.activeTime == 10000, 'pg-btn': true }">10s</div>
          </div>

          <myProgress :rainfallData="satelliteData" @sendProgress="sendSatellite" />
        </div>
      </div>
    </Dialog>
    <!-- 页面弹窗卫星云图区域结束 -->
    <!-- 页面弹窗雷达区域开始 -->
    <Dialog :width="'1300px'" :height="900" :dialogVisable="dialogvisable2" :title="title2" @visible-change="closeModal">
      <div class="dialog-box-satellite">
        <div class="satellite-img-box" :style="{ height: data.progressHeight + 'px' }">
          <img :style="{ height: data.progressHeight - 50 + 'px' }" :src="radarImg" />
        </div>

        <div :style="{ height: data.progressHeight + 'px' }" class="progress-box">
          <div class="progress-box-title">
            <div>雷达类别：</div>
            <div @click="setRadarType(1)" :class="{ active: radarData.type == 1, 'pg-btn': true, 'chang-width': true }">单站雷达</div>
            <div @click="setRadarType(2)" :class="{ active: radarData.type == 2, 'pg-btn': true, 'chang-width': true }">自建雷达</div>
            <!-- <div class="pg-btn chang-width">单站雷达</div>
            <div class="pg-btn chang-width">自建雷达</div> -->
          </div>
          <div class="progress-box-title">
            <div>播放速度：</div>
            <div @click="setRadarTime(500)" :class="{ active: radarData.activeTime == 500, 'pg-btn': true }">0.5s</div>
            <div @click="setRadarTime(3000)" :class="{ active: radarData.activeTime == 3000, 'pg-btn': true }">3s</div>
            <div @click="setRadarTime(5000)" :class="{ active: radarData.activeTime == 5000, 'pg-btn': true }">5s</div>
            <div @click="setRadarTime(10000)" :class="{ active: radarData.activeTime == 10000, 'pg-btn': true }">10s</div>
          </div>
          <myProgress :rainfallData="radarData" @sendProgress="sendRadarData" />/>
        </div>
      </div>
    </Dialog>
    <!-- 页面弹窗雷达区域结束 -->
    <!-- 页面天气预报区域开始 -->
    <Dialog
      :width="'1200px'"
      :selectAll="weather.weatherData.weatherDataAll"
      :isSelectAll="true"
      :height="900"
      :dialogVisable="dialogvisable3"
      :title="title3"
      @visible-change="closeModal"
      :resettingName="'weatherReset'"
    >
      <div>
        <!-- {{ weather.weatherData.weatherDataAll }} -->
        <weatherForecast :weatherData="weather.weatherData" />
      </div>
    </Dialog>
    <!-- 页面天气预报区域结束 -->
    <!-- 降雨实况弹窗开始 -->
    <Dialog :width="'1300px'" :height="900" :dialogVisable="dialogvisable4" :title="title4" @visible-change="closeModal">
      <div class="dialog-box-satellite">
        <div class="satellite-img-box" :style="{ height: data.progressHeight + 'px' }">
          <img :style="{ height: data.progressHeight - 50 + 'px' }" :src="progressImg" />
        </div>

        <div :style="{ height: data.progressHeight + 50 + 'px' }" class="progress-box">
          <!-- <div class="progress-box-title">
            <div>雷达类别：</div>
            <div class="pg-btn chang-width">单站雷达</div>
            <div class="pg-btn chang-width">自建雷达</div>
          </div> -->
          <div class="progress-box-title">
            <div>播放速度：</div>
            <div @click="setActiveTime(500)" :class="{ active: rainfallData.activeTime == 500, 'pg-btn': true }">0.5s</div>
            <div @click="setActiveTime(3000)" :class="{ active: rainfallData.activeTime == 3000, 'pg-btn': true }">3s</div>
            <div @click="setActiveTime(5000)" :class="{ active: rainfallData.activeTime == 5000, 'pg-btn': true }">5s</div>
            <div @click="setActiveTime(10000)" :class="{ active: rainfallData.activeTime == 10000, 'pg-btn': true }">10s</div>
          </div>
          <myProgress :rainfallData="rainfallData" @sendProgress="sendProgress" />
        </div>
      </div>
    </Dialog>
    <!-- 降雨实况弹窗结束 -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import leftPage from './leftPage.vue';
import rightPage from './rightPage.vue';
import myProgress from './components/myProgress.vue';
import weatherForecast from './components/weatherForecast.vue';
import Dialog from '/@/components/Dialog/index.vue';
import eventBus from '/@/utils/eventBus';
import { getAppEnvConfig } from '/@/utils/env';
const { VITE_GLOB_BASE_IMG } = getAppEnvConfig();
// 监听天气预报
const dialogvisable3 = ref(false);
const data = reactive({
  progressHeight: 880,
});
function closeModal(i) {
  dialogvisable3.value = false;
  dialogvisable2.value = false;
  dialogvisable.value = false;
  dialogvisable4.value = false;
}
// 监听弹窗组件高度事件
eventBus.on('progressHeight', (e) => {
  console.log(e);
  if (e != 600) {
    e -= 70;
  }
  data.progressHeight = e;
});
// ---------------------卫星云图模块开始------------------
let satelliteImg = ref('');
let satelliteData = reactive({
  activeTime: 500,
  arrData: [],
  type: 1,
});
let allData = {};
const dialogvisable = ref(false);
const title = ref('卫星云图-风云四号');
// 监听是否点击卫星云图
eventBus.on('nophogramClick', (arr, All) => {
  allData = All;
  satelliteData.arrData = arr;
  dialogvisable.value = !dialogvisable.value;
  satelliteData.type = 1;
  satelliteData.activeTime = 500;
});
function setSatelliteTime(time) {
  satelliteData.activeTime = time;
}
function sendSatellite(data) {
  satelliteImg.value = setImg(data.img);
}
function setSatelliteType(data) {
  satelliteData.type = data;
  switch (data) {
    case 1:
      satelliteData.arrData = allData['FY4A_true_color'];
      sendSatellite(allData['FY4A_true_color'][0]);
      break;
    case 2:
      satelliteData.arrData = allData['FY4A_infrared'];
      sendSatellite(allData['FY4A_infrared'][0]);
      break;
    case 3:
      satelliteData.arrData = allData['FY4A_visible'];
      sendSatellite(allData['FY4A_visible'][0]);
      break;
    case 4:
      satelliteData.arrData = allData['FY4A_water_vapour'];
      sendSatellite(allData['FY4A_water_vapour'][0]);
      break;

    default:
      break;
  }
}

// ---------------------卫星云图模块结束------------------

// ---------------------雷达模块开始------------------
let radarImg = ref('');
let radarData = reactive({
  activeTime: 500,
  arrData: [],
  type: 1,
});
function setRadarTime(time) {
  radarData.activeTime = time;
}

function sendRadarData(data) {
  radarImg.value = setImg(data.img);
}
function setRadarType(data) {
  if (data == 2) {
    return false;
  }
  satelliteData.type = data;
  switch (data) {
    case 1:
      satelliteData.arrData = allData['Radar_xz_linzhi'];
      sendSatellite(allData['Radar_xz_linzhi'][0]);
      break;
    case 2:
      satelliteData.arrData = allData['FY4A_infrared'];
      sendSatellite(allData['FY4A_infrared'][0]);
      break;
    default:
      break;
  }
}
// 监听是否点击卫星云图
eventBus.on('radarClick', (arr, All) => {
  allData = All;
  radarData.arrData = arr;
  dialogvisable2.value = !dialogvisable2.value;
  radarData.type = 1;
  radarData.activeTime = 500;
});

const dialogvisable2 = ref(false);
const title2 = ref('雷达图');
// ---------------------雷达模块结束------------------

// ---------------------天气模块开始------------------
// 天气预报开始
let weather = reactive({
  weatherData: {},
});
// 监听是否点击天气预报
const title3 = ref('灵芝天气预报');
let selectAll = ref([]);
eventBus.on('weatherClick', (data) => {
  console.log(data);
  if (data) {
    weather.weatherData = data;
    title3.value = data.key + '天气预报';
  }
  dialogvisable3.value = true;
});

//降雨实况开始
const dialogvisable4 = ref(false);
const title4 = ref('降雨实况');
//监听降雨实况弹窗
let progressImg = ref('');
function setImg(value) {
  return `${VITE_GLOB_BASE_IMG}${value}`;
}
function sendProgress(data) {
  progressImg.value = setImg(data.img);
}
function setActiveTime(time) {
  rainfallData.activeTime = time;
}
//降雨数据
let rainfallData = reactive({
  activeTime: 500,
  arrData: [],
});
eventBus.on('rainfallClick', (arr) => {
  if (arr) {
    rainfallData.arrData = arr;
  }
  dialogvisable4.value = !dialogvisable4.value;
  rainfallData.activeTime = 500;
});
// ---------------------天气模块结束------------------
</script>

<style lang="less" scoped>
.dialog-box-satellite {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  display: flex;
}
.satellite-img-box {
  width: 75%;
  position: relative;
  img {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }
}
.progress-box {
  height: 100%;
  flex: 1;
  // background-color: #fff;
  color: #fff;
  padding-top: 10px;
}
.progress-box-title {
  display: flex;
  // justify-content: space-around;
  // justify-content: flex-start;
  line-height: 36px;
  margin-top: 10px;
  div {
    margin-left: 1%;
  }
}
.pg-btn {
  border-radius: 3px;
  background-color: #06305e;
  width: 50px;
  // padding: 0px 10px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  color: #1e83ff;
}
.chang-width {
  width: 70px;
}
.pg-btn:hover {
  background-color: rgba(0, 216, 240, 0.2);
  color: #00d8f0;
}
.active {
  background-color: rgba(0, 216, 240, 0.2);
  color: #00d8f0;
}
</style>
