<template>
  <div>
    <div class="main" v-show="mapStore.leftSideMenu">
      <div class="main_in">
        <weatherTitle
          :title="'雨情监控'"
          :isSelect="true"
          :keywords="keywords"
          fnName="getRainMonitoringDataBus"
          refreshName="rainCondiRefreshName"
          :selectList="[
            { name: '今日', value: 0 },
            { name: '近1小时', value: 1 },
            { name: '近3小时', value: 3 },
            { name: '近6小时', value: 6 },
            { name: '近12小时', value: 12 },
            { name: '近24小时', value: 24 },
            { name: '近48小时', value: 48 },
          ]"
        />
        <div class="rain">
          <div @click="setRankingList(rainData.rain.cum_rain.r_light)" class="rain-list">
            <div> 0-10mm : {{ rainData.rain.cum_rain.r_light.length }}个</div>
            <div>
              <div>
                <progressBar
                  :width="
                    rainData.rain.cum_rain.r_light.length == 0 ? '0' : ((rainData.rain.cum_rain.r_light.length / rainData.rainTotal) * 100).toFixed(2)
                  "
                  :iconType="2"
                  :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
                  :backgroundColorInner="'linear-gradient(270deg, #3ce5ff 2%, #00a2ff 102%)'"
                />
              </div>
              <div>
                {{
                  rainData.rain.cum_rain.r_light.length == 0 ? '0' : ((rainData.rain.cum_rain.r_light.length / rainData.rainTotal) * 100).toFixed(2)
                }}%
              </div>
            </div>
          </div>
          <div @click="setRankingList(rainData.rain.cum_rain.r_moderate)" class="rain-list">
            <div> 10-25mm : {{ rainData.rain.cum_rain.r_moderate.length }}个</div>
            <div>
              <div>
                <progressBar
                  :width="((rainData.rain.cum_rain.r_moderate.length / rainData.rainTotal) * 100).toFixed(2)"
                  :iconType="2"
                  :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
                  :backgroundColorInner="'linear-gradient(270deg, #3ce5ff 2%, #00a2ff 102%)'"
                />
              </div>
              <div>
                {{
                  rainData.rain.cum_rain.r_moderate.length == 0
                    ? '0'
                    : ((rainData.rain.cum_rain.r_moderate.length / rainData.rainTotal) * 100).toFixed(2)
                }}%
              </div>
            </div>
          </div>
          <div @click="setRankingList(rainData.rain.cum_rain.r_heavy)" class="rain-list">
            <div> 25-50mm : {{ rainData.rain.cum_rain.r_heavy.length }}个</div>
            <div>
              <div>
                <progressBar
                  :width="
                    rainData.rain.cum_rain.r_heavy.length == 0 ? '0' : ((rainData.rain.cum_rain.r_heavy.length / rainData.rainTotal) * 100).toFixed(2)
                  "
                  :iconType="2"
                  :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
                  :backgroundColorInner="'linear-gradient(270deg, #3ce5ff 2%, #00a2ff 102%)'"
                />
              </div>
              <div>
                {{
                  rainData.rain.cum_rain.r_heavy.length == 0 ? '0' : ((rainData.rain.cum_rain.r_heavy.length / rainData.rainTotal) * 100).toFixed(2)
                }}%
              </div>
            </div>
          </div>
          <div @click="setRankingList(rainData.rain.cum_rain.r_storm)" class="rain-list">
            <div> 50-100mm : {{ rainData.rain.cum_rain.r_storm.length }}个</div>
            <div>
              <div>
                <progressBar
                  :width="
                    rainData.rain.cum_rain.r_storm.length == 0 ? '0' : ((rainData.rain.cum_rain.r_storm.length / rainData.rainTotal) * 100).toFixed(2)
                  "
                  :iconType="2"
                  :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
                  :backgroundColorInner="'linear-gradient(270deg, #3ce5ff 2%, #00a2ff 102%)'"
                />
              </div>
              <div>
                {{
                  rainData.rain.cum_rain.r_storm.length == 0 ? '0' : ((rainData.rain.cum_rain.r_storm.length / rainData.rainTotal) * 100).toFixed(2)
                }}%
              </div>
            </div>
          </div>
          <div @click="setRankingList(rainData.rain.cum_rain.r_downpour)" class="rain-list">
            <div> 100-250mm : {{ rainData.rain.cum_rain.r_downpour.length }}个</div>
            <div>
              <div>
                <progressBar
                  :width="((rainData.rain.cum_rain.r_downpour.length / rainData.rainTotal) * 100).toFixed(2)"
                  :iconType="2"
                  :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
                  :backgroundColorInner="'linear-gradient(270deg, #3ce5ff 2%, #00a2ff 102%)'"
                />
              </div>
              <div>
                {{
                  rainData.rain.cum_rain.r_downpour.length == 0
                    ? '0'
                    : ((rainData.rain.cum_rain.r_downpour.length / rainData.rainTotal) * 100).toFixed(2)
                }}%
              </div>
            </div>
          </div>
          <div @click="setRankingList(rainData.rain.cum_rain.r_super_dp)" class="rain-list">
            <div> >250mm : {{ rainData.rain.cum_rain.r_super_dp.length }}个</div>
            <div>
              <div>
                <progressBar
                  :width="((rainData.rain.cum_rain.r_super_dp.length / rainData.rainTotal) * 100).toFixed(2)"
                  :iconType="2"
                  :backgroundColorBox="'rgba(255, 255, 255, 0.1)'"
                  :backgroundColorInner="'linear-gradient(270deg, #3ce5ff 2%, #00a2ff 102%)'"
                />
              </div>
              <div>
                {{
                  rainData.rain.cum_rain.r_super_dp.length == 0
                    ? '0'
                    : ((rainData.rain.cum_rain.r_super_dp.length / rainData.rainTotal) * 100).toFixed(2)
                }}%
              </div>
            </div>
          </div>
        </div>
        <div class="main-title">
          <div>
            降雨排行榜(雨量站<span>{{ rainData.rainfallNumber }}</span
            >个/共<span>{{ rainData.rain.top_rain.length }}</span
            >个)
          </div>
        </div>
        <div class="top-list">
          <div v-show="index == 0" v-for="(item, index) in rainData.rankingList" :key="index" @click="openModal(item)">
            <div> <img src="../../../assets/images/weatheHome/top1-icon.png" /> </div>
            <div> {{ item.st_name }} </div>
            <div>
              <div :style="{ width: (item.rain / rainData.rankingMax) * 100 + '%' }" class="columnar-rc"></div>
            </div>
            <div> {{ item.rain }}mm </div>
          </div>
          <div v-show="index == 1" v-for="(item, index) in rainData.rankingList" :key="index" @click="openModal(item)">
            <div> <img src="../../../assets/images/weatheHome/top2-icon.png" /> </div>
            <div> {{ item.st_name }} </div>
            <div>
              <div :style="{ width: (item.rain / rainData.rankingMax) * 100 + '%' }" class="columnar-rc"></div>
            </div>
            <div> {{ item.rain }}mm </div>
          </div>
          <div v-show="index == 2" v-for="(item, index) in rainData.rankingList" :key="index" @click="openModal(item)">
            <div> <img src="../../../assets/images/weatheHome/top3-icon.png" /> </div>
            <div> {{ item.st_name }} </div>
            <div>
              <div :style="{ width: (item.rain / rainData.rankingMax) * 100 + '%' }" class="columnar-rc"></div>
            </div>
            <div> {{ item.rain }}mm </div>
          </div>
          <div v-show="index >= 3" v-for="(item, index) in rainData.rankingList" :key="index" @click="openModal(item)">
            <div>
              <span>{{ index + 1 }}</span>
            </div>
            <div> {{ item.st_name }} </div>
            <div>
              <div :style="{ width: (item.rain / rainData.rankingMax) * 100 + '%' }" class="columnar-rc"></div>
            </div>
            <div> {{ item.rain }}mm </div>
          </div>
          <!-- <div>
            <div> <img src="../../../assets/images/weatheHome/top2-icon.png" /> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <img src="../../../assets/images/weatheHome/top3-icon.png" /> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>4</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>5</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>6</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>7</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>8</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>9</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>10</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>11</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div>
          <div>
            <div> <span>12</span> </div>
            <div> 雨量站1 </div>
            <div>
              <div class="columnar-rc"></div>
            </div>
            <div> 125mm </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import progressBar from '../../../components/progressBar/index.vue';
import { useMapStore } from '/@/store/modules/map';
import { fontSize } from '../../../utils/util';
import { getRainMonitoring } from '/@/api/swHome/index';
import eventBus from '/@/utils/eventBus';

const mapStore = useMapStore();
const openModal=(item)=>{
  mapStore.setstInfo(item)
}
let keywords = ref('今日');
// 监听title传入参数
eventBus.on('rainCondiRefreshName', () => {
  keywords.value = '今日';
  getRainMonitoringData(0);
});
eventBus.on('getRainMonitoringDataBus', async (value) => {
  keywords.value = value.name;
  await getRainMonitoringData(value.value);
});
let rainData = reactive({
  rain: {
    cum_rain: {
      r_light: [],
      r_moderate: [], //中雨
      r_heavy: [], //大雨
      r_storm: [], //暴雨
      r_downpour: [], //大暴雨
      r_super_dp: [], //特大暴雨
    },
    top_rain: [],
  },
  rainTotal: 0,
  rankingList: [],
  rankingMax: 0,
  //降雨站点数量
  rainfallNumber: 0,
});
function setRainData(cumRain) {
  rainData.rainTotal = 0;
  for (let key in cumRain) {
    rainData.rainTotal += cumRain[key].length;
  }
}
function setRankingList(list) {
  rainData.rankingMax = 0;
  rainData.rainfallNumber = 0;
  // 需要做一个排序
  rainData.rankingList = bubble(list);
  // 计算最大值
  list.forEach((element) => {
    if (element.rain * 1 > rainData.rankingMax) {
      rainData.rankingMax = element.rain * 1;
    }
    if (element.rain * 1 > 0) {
      rainData.rainfallNumber++;
    }
  });
}
// 冒泡排序

function bubble(arr) {
  // 1:套一个函数的壳子，将参数传入
  //外层循环，控制趟数，每一次找到一个最大值
  for (var i = 0; i < arr.length - 1; i++) {
    // 内层循环,控制比较的次数，并且判断两个数的大小
    for (var j = 0; j < arr.length - 1 - i; j++) {
      // 白话解释：如果前面的数大，放到后面(当然是从小到大的冒泡排序)
      if (arr[j].rain * 1 < arr[j + 1].rain * 1) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr; //2: 将执行完的结果返回就可以
}
async function getRainMonitoringData(stepSize) {
  await getRainMonitoring({
    step_size: stepSize,
  }).then((res) => {
    rainData.rain = res.data;
    // let isarr = [];
    // res.data.top_rain.forEach((element) => {
    //   if (element.rain > 0) {
    //     isarr.push(element);
    //   }
    // });
    setRankingList(res.data.top_rain);
    // 获取报警总数
    setRainData(rainData.rain.cum_rain);
  });
}
onMounted(async () => {
  // 获取雨情数据
  await getRainMonitoringData(0);
  // echarts1();
});
</script>
<style lang="less" scoped>
.main {
  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);
}
.rain-list {
  cursor: pointer;
  & > div:nth-child(1) {
    font-size: 16px;
    color: #fff;
  }
  & > div:nth-child(2) {
    margin-top: 10px;
    display: flex;
    div:nth-child(1) {
      width: 314px;
    }
    div:nth-child(2) {
      font-size: 16px;
      color: #fff;
      position: relative;
      top: -8px;
      margin-left: 20px;
    }
  }
}
.rain {
  padding: 0px 0px 10px 22px;
  // height: 29vh;
  height: 366px;
}

.main-title {
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  color: #dffeff;
  font-size: 16px;
  background: linear-gradient(90deg, rgba(40, 126, 255, 0.16) 0%, rgba(40, 126, 255, 0) 100%);
  margin-left: 8px;
  span {
    color: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 20px;
  }
}
.top-list {
  padding-bottom: 20px;
  // height: 48vh;
  height: 477px;
  overflow: auto;
  & > div {
    display: flex;
    margin-top: 20px;
    height: 24px;
    cursor: pointer;
    div:nth-child(1) {
      text-align: center;
      width: 60px;
      span {
        display: inline-block;
        width: 23px;
        height: 23px;
        border-radius: 23px;
        background: linear-gradient(180deg, rgba(0, 75, 111, 0.5) 0%, rgba(33, 109, 138, 0.5) 100%);
        line-height: 23px;
        text-align: center;
      }
      img {
        position: relative;
        top: -10px;
      }
    }
    div:nth-child(2) {
      width: 70px;
    }
    div:nth-child(3) {
      // flex: 1;
      width: 190px;
      margin-right: 10px;
    }
    div:nth-child(4) {
      width: 60px;
      color: #7296cb;
    }
    .columnar-rc {
      // width: 100%;
      height: 11px;
      background: url('../../../assets/images/weatheHome/tiao.png');
      border-right: 2px solid #0089de;
      position: relative;
      top: 5px;
    }
  }
}
</style>
