<template>
  <div class="main">
    <div class="she-home">
      <div class="menu-img" v-if="activeKey != 4"><img :src="setImg(activeData.data.img)" /> </div>
      <!-- <div class="menu-img" v-if="activeKey != 4"
        ><img src="../../../assets/images/sw-home/img-icon-1.png" />
      </div> -->
      <div class="menu-img" v-if="activeKey == 4">
        <div>
          <weatherForecast
            v-if="weather.weatherData.weatherData"
            :weatherData="weather.weatherData"
          />
        </div>
      </div>
      <div class="menu-box">
        <a-tabs @change="(key) => changeTabs(key)" v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="雷达图">
            <div>
              <div class="btn-list-type">
                雷达类别：<span
                  @click="setRadarType(1)"
                  :class="{ active: radarData.type == 1, 'pg-btn': true, 'chang-width': true }"
                  >单站雷达</span
                >
                <span
                  @click="setRadarType(2)"
                  :class="{ active: radarData.type == 2, 'pg-btn': true, 'chang-width': true }"
                  >自建雷达</span
                >
              </div>
              <div class="btn-list-time">
                播放速度：<span
                  @click="setSatelliteTime(500)"
                  :class="{ active: radarData.activeTime == 500, 'pg-btn': true }"
                  >0.5s</span
                >
                <span
                  @click="setSatelliteTime(3000)"
                  :class="{ active: radarData.activeTime == 3000, 'pg-btn': true }"
                  >3s</span
                >
                <span
                  @click="setSatelliteTime(5000)"
                  :class="{ active: radarData.activeTime == 5000, 'pg-btn': true }"
                  >5s</span
                >
                <span
                  @click="setSatelliteTime(10000)"
                  :class="{ active: radarData.activeTime == 10000, 'pg-btn': true }"
                  >10s</span
                >
              </div>
              <div>
                <div class="box-time">
                  <div
                    @click="sendProgress(item, index)"
                    :class="{ 'progress-active': activeData.activeIndex == index }"
                    v-for="(item, index) in radarData.arrData"
                    :key="index"
                  >
                    <i></i>
                    <i></i>
                    {{ item.time }}
                  </div>
                </div>
              </div>
              <div class="progress-btn">
                <div v-if="isPay" @click="play()">
                  <img src="../../../assets/images/sw-home/play-icon-active.png" />
                </div>
                <div v-if="!isPay">
                  <img src="../../../assets/images/sw-home/play-icon.png" />
                </div>
                <div v-if="!isPay" @click="stop()">
                  <img src="../../../assets/images/sw-home/stop-icon-active.png" />
                </div>
                <div v-if="isPay">
                  <img src="../../../assets/images/sw-home/stop-icon.png" />
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="卫星云图-风云四号">
            <div>
              <div>
                <div class="btn-list-type btn-list-type4">
                  云图类别：<span
                    @click="setFxType(1)"
                    :class="{ active: radarData.type == 1, 'pg-btn': true, 'chang-width': true }"
                    >真彩色</span
                  >
                  <span
                    @click="setFxType(2)"
                    :class="{ active: radarData.type == 2, 'pg-btn': true, 'chang-width': true }"
                    >红外</span
                  >
                  <span
                    @click="setFxType(3)"
                    :class="{ active: radarData.type == 3, 'pg-btn': true, 'chang-width': true }"
                    >可见光</span
                  >
                  <span
                    @click="setFxType(4)"
                    :class="{ active: radarData.type == 4, 'pg-btn': true, 'chang-width': true }"
                    >水汽</span
                  >
                </div>
                <div class="btn-list-time">
                  播放速度：<span
                    @click="setSatelliteTime(500)"
                    :class="{ active: radarData.activeTime == 500, 'pg-btn': true }"
                    >0.5s</span
                  >
                  <span
                    @click="setSatelliteTime(3000)"
                    :class="{ active: radarData.activeTime == 3000, 'pg-btn': true }"
                    >3s</span
                  >
                  <span
                    @click="setSatelliteTime(5000)"
                    :class="{ active: radarData.activeTime == 5000, 'pg-btn': true }"
                    >5s</span
                  >
                  <span
                    @click="setSatelliteTime(10000)"
                    :class="{ active: radarData.activeTime == 10000, 'pg-btn': true }"
                    >10s</span
                  >
                </div>
                <div>
                  <div class="box-time">
                    <div
                      @click="sendProgress(item, index)"
                      :class="{ 'progress-active': activeData.activeIndex == index }"
                      v-for="(item, index) in radarData.arrData"
                      :key="index"
                    >
                      <i></i>
                      <i></i>
                      {{ item.time }}
                    </div>
                  </div>
                </div>
                <div class="progress-btn">
                  <div v-if="isPay" @click="play()">
                    <img src="../../../assets/images/sw-home/play-icon-active.png" />
                  </div>
                  <div v-if="!isPay">
                    <img src="../../../assets/images/sw-home/play-icon.png" />
                  </div>
                  <div v-if="!isPay" @click="stop()">
                    <img src="../../../assets/images/sw-home/stop-icon-active.png" />
                  </div>
                  <div v-if="isPay">
                    <img src="../../../assets/images/sw-home/stop-icon.png" />
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="天气实况">
            <div>
              <div>
                <div class="btn-list-type btn-list-type5">
                  实况类别：<span
                    @click="setQwType(1)"
                    :class="{ active: radarData.type == 1, 'pg-btn': true, 'chang-width': true }"
                    >全国气温实况图</span
                  >
                  <span
                    @click="setQwType(2)"
                    :class="{ active: radarData.type == 2, 'pg-btn': true, 'chang-width': true }"
                    >全国降雨实况图</span
                  >
                </div>
                <div class="btn-list-time">
                  播放速度：<span
                    @click="setSatelliteTime(500)"
                    :class="{ active: radarData.activeTime == 500, 'pg-btn': true }"
                    >0.5s</span
                  >
                  <span
                    @click="setSatelliteTime(3000)"
                    :class="{ active: radarData.activeTime == 3000, 'pg-btn': true }"
                    >3s</span
                  >
                  <span
                    @click="setSatelliteTime(5000)"
                    :class="{ active: radarData.activeTime == 5000, 'pg-btn': true }"
                    >5s</span
                  >
                  <span
                    @click="setSatelliteTime(10000)"
                    :class="{ active: radarData.activeTime == 10000, 'pg-btn': true }"
                    >10s</span
                  >
                </div>
                <div>
                  <div class="box-time">
                    <div
                      @click="sendProgress(item, index)"
                      :class="{ 'progress-active': activeData.activeIndex == index }"
                      v-for="(item, index) in radarData.arrData"
                      :key="index"
                    >
                      <i></i>
                      <i></i>
                      {{ item.time }}
                    </div>
                  </div>
                </div>
                <div class="progress-btn">
                  <div v-if="isPay" @click="play()">
                    <img src="../../../assets/images/sw-home/play-icon-active.png" />
                  </div>
                  <div v-if="!isPay">
                    <img src="../../../assets/images/sw-home/play-icon.png" />
                  </div>
                  <div v-if="!isPay" @click="stop()">
                    <img src="../../../assets/images/sw-home/stop-icon-active.png" />
                  </div>
                  <div v-if="isPay">
                    <img src="../../../assets/images/sw-home/stop-icon.png" />
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="天气预报">
            <div class="weather-hei">
              <div
                :class="{ 'weather-inner': true, 'active-weather': activetype == key }"
                v-for="(value, key) in forecastData.weatherData"
                :key="key"
              >
                <div> {{ key }} </div>
                <div @click="weatherFn(value, key)" class="weather-box">
                  <div>
                    <div>今天</div>
                    <div>{{ value.predict.detail[0].date }}</div>
                    <div>{{
                      value.predict.detail[0].day.weather.temperature < 999
                        ? value.predict.detail[0].day.weather.info
                        : ''
                    }}</div>
                    <div>
                      <img
                        style="width: 30px;"
                        v-if="value.predict.detail[0].day.weather.temperature < 999"
                        :src="showImg(value.predict.detail[0].day.weather.info)"
                      />
                    </div>
                    <div
                      >{{
                        value.predict.detail[0].day.weather.temperature < 999
                          ? value.predict.detail[0].day.weather.temperature
                          : ''
                      }}<span v-if="value.predict.detail[0].day.weather.temperature < 999"
                        >°C</span
                      ></div
                    >
                  </div>
                  <div>
                    <div>明天</div>
                    <div>{{ value.predict.detail[1].date }}</div>
                    <div>{{ value.predict.detail[1].day.weather.info }}</div>
                    <div> <img style="width: 30px;" :src="showImg(value.predict.detail[1].day.weather.info)" /> </div>
                    <div>{{ value.predict.detail[1].day.weather.temperature }}°C</div>
                  </div>
                  <div>
                    <div>后天</div>
                    <div>{{ value.predict.detail[2].date }}</div>
                    <div>{{ value.predict.detail[2].day.weather.info }}</div>
                    <div> <img style="width: 30px;" :src="showImg(value.predict.detail[2].day.weather.info)" /> </div>
                    <div>{{ value.predict.detail[2].day.weather.temperature }}°C</div>
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineComponent, ref, reactive, onMounted } from 'vue';
  import { getRainLiveImg, getWeathForecast } from '/@/api/swHome/index';
  import { getAppEnvConfig } from '/@/utils/env';
  import weatherForecast from './components/weatherForecast.vue';
  import eventBus from '/@/utils/eventBus';
  const { VITE_GLOB_BASE_IMG } = getAppEnvConfig();
  // import { useTitle as usePageTitle } from '@vueuse/core';
  // const pageTitle = usePageTitle();
  // setTimeout(() => {
  //   pageTitle.value = `YX水文气象监测系统`;
  // },1000)
  let activeKey = ref('1');
  let activetype = ref(1);
  let activeData = reactive({
    data: {},
    activeIndex: 0,
  });
  let rainLiveData = reactive({
    data: {},
  });
  let radarData = reactive({
    activeTime: 500,
    arrData: [],
    type: 1,
  });
  let isPay = ref(true);
  let forecastData = reactive({
    weatherData: {},
  });
  let weather = reactive({
    weatherData: {},
  });
  function showImg(value) {
    // return require(`../../assets/images/weatherIcon/${value}.png`);
    return new URL(`../../../assets/images/weatherIcon/${value}.gif`, import.meta.url).href;
  }
  function getRainLiveImgData() {
    getRainLiveImg().then((res) => {
      rainLiveData.data = res.data;
      activeData.data = res.data.Radar_xz_linzhi[0];
      radarData.arrData = res.data.Radar_xz_linzhi;
    });
  }
  function sendProgress(item, index) {
    activeData.data = item;
    activeData.activeIndex = index;
  }
  function setImg(value) {
    return `${VITE_GLOB_BASE_IMG}${value}`;
  }
  function setSatelliteTime(time) {
    radarData.activeTime = time;
  }
  function setRadarType(data) {
    if (activeKey.value == 1) {
      if (data == 2) {
        return false;
      }
      radarData.type = data;
    }
  }
  function setFxType(type) {
    radarData.type = type;
    if (type == 1) {
      activeData.data = rainLiveData.data.FY4A_true_color[0];
      radarData.arrData = rainLiveData.data.FY4A_true_color;
    }
    if (type == 2) {
      activeData.data = rainLiveData.data.FY4A_infrared[0];
      radarData.arrData = rainLiveData.data.FY4A_infrared;
    }
    if (type == 3) {
      activeData.data = rainLiveData.data.FY4A_visible[0];
      radarData.arrData = rainLiveData.data.FY4A_visible;
    }
    if (type == 4) {
      activeData.data = rainLiveData.data.FY4A_water_vapour[0];
      radarData.arrData = rainLiveData.data.FY4A_water_vapour;
    }
  }
  function setQwType(type) {
    radarData.type = type;
    if (type == 1) {
      activeData.data = rainLiveData.data['hourly-temperature'][0];
      radarData.arrData = rainLiveData.data['hourly-temperature'];
    }
    if (type == 2) {
      activeData.data = rainLiveData.data['hourly-precipitation'][0];
      radarData.arrData = rainLiveData.data['hourly-precipitation'];
    }
  }
  let setIntervalFn = null;
  function play() {
    isPay.value = false;
    setIntervalFn = setInterval(() => {
      activeData.activeIndex++;
      if (activeData.activeIndex == radarData.arrData.length) {
        activeData.activeIndex = 0;
        isPay.value = true;
        clearInterval(setIntervalFn);
        return;
      }
      activeData.data = radarData.arrData[activeData.activeIndex];
    }, radarData.activeTime);
  }

  function stop() {
    isPay.value = true;
    clearInterval(setIntervalFn);
  }
  function changeTabs(e) {
    activeKey.value = e;
    radarData.type = 1;
    activeData.activeIndex = 0;
    radarData.activeTime = 500;
    if (e == 1) {
      activeData.data = rainLiveData.data.Radar_xz_linzhi[0];
      radarData.arrData = rainLiveData.data.Radar_xz_linzhi;
    }
    if (e == 2) {
      activeData.data = rainLiveData.data.FY4A_true_color[0];
      radarData.arrData = rainLiveData.data.FY4A_true_color;
    }
    if (e == 3) {
      activeData.data = rainLiveData.data['hourly-temperature'][0];
      radarData.arrData = rainLiveData.data['hourly-temperature'];
    }
    if (e == 4) {
      //
      weather.weatherData = { weatherData: forecastData.weatherData['墨脱'], key: '墨脱' };
      activetype.value = '墨脱';
    }
  }
  function getWeathForecastData() {
    getWeathForecast().then((res) => {
      forecastData.weatherData = res.data;
    });
  }
  function weatherFn(value, key) {
    weather.weatherData = { weatherData: value, key: key };
    eventBus.emit('weather');
    activetype.value = key;
  }
  onMounted(() => {
    // 获取雷达等数据
    getRainLiveImgData();
    // 获取天气数据
    getWeathForecastData();
  });
</script>

<style lang="scss" scoped>
  .main {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
  }
  .menu-img {
    flex: 1;
    overflow: hidden;
    // width: 500px;
    img {
      height: 100%;
      margin: 0 auto;
    }
  }
  .she-home {
    display: flex;
    .menu-box {
      width: 420px;
      padding-left: 20px;
      box-shadow: -3px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .weather-hei{
      height: calc(100vh - 170px);
      overflow: auto;
    }
  }
  ::v-deep .menu-box .ant-tabs-nav .ant-tabs-tab {
    margin: 0;
  }
  .btn-list-type {
    span {
      background: #e8e8e8;
      display: inline-block;
      border-radius: 3px;
      width: 90px;
      text-align: center;
      height: 38px;
      line-height: 38px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .btn-list-type4 {
    span {
      background: #e8e8e8;
      display: inline-block;
      border-radius: 3px;
      width: 70px;
      text-align: center;
      height: 38px;
      line-height: 38px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .btn-list-type5 {
    span {
      width: 140px;
    }
  }
  .btn-list-time {
    span {
      background: #e8e8e8;
      display: inline-block;
      line-height: 38px;
      margin-left: 10px;
      width: 60px;
      text-align: center;
      margin-top: 10px;
      border-radius: 3px;
      cursor: pointer;
    }
  }
  .box-time {
    border: 1px solid #dedede;
    margin-top: 10px;
    height: calc(100vh - 300px);
    overflow: auto;
    & > div {
      line-height: 50px;
      margin-left: 20px;
      border-left: 4px solid #dedede;
      padding-left: 20px;
      position: relative;
      cursor: pointer;
      i:nth-child(1) {
        width: 13px;
        height: 4px;
        background-color: #dedede;
        position: absolute;
        left: 0px;
        top: 22px;
      }
      i:nth-child(2) {
        width: 14px;
        height: 14px;
        border-radius: 14px;
        position: absolute;
        left: -10px;
        top: 17px;
      }
    }
  }
  .progress-btn {
    display: flex;
    // flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 56px;
    div:nth-child(1) {
      margin-right: 60px;
    }
  }
  .progress-active {
    color: #2083e8;
    font-size: 14px;
    i:nth-child(1) {
      background-color: #2083e8;
    }
    i:nth-child(2) {
      background-color: #2083e8;
    }
  }
  .active {
    background-color: #2083e8 !important;
    color: #fff;
  }
  .pg-btn:hover {
    background-color: #2083e8 !important;
    color: #fff;
  }
  .weather-box {
    display: flex;
    // background-color: #ccc;
    & > div:nth-child(1) {
      border-right: 1px solid #fff;
    }
    & > div:nth-child(2) {
      border-right: 1px solid #fff;
    }
    & > div {
      flex: 1;
      text-align: center;
      div:nth-child(1) {
        font-size: 16px;
        color: #474747;
      }
      div:nth-child(3),
      div:nth-child(5) {
        font-size: 16px;
        color: #474747;
        font-weight: 500;
      }
      img {
        display: inline-block;
      }
      div {
        margin-top: 10px;
      }
    }
  }
  .weather-inner {
    background-color: #eee;
    margin-bottom: 20px;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 4px;
    padding: 10px;
    & > div:nth-child(1) {
      font-size: 16px;
      color: #474747;
      font-weight: 500;
    }
  }
  .active-weather {
    background-color: #dcebfa;
    box-shadow: -3px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
</style>
