<template>
  <div class="main">
    <div class="main_in">
      <weatherTitle
        :title="'雨情信息'"
        :isSelect="true"
        :keywords="keywords"
        fnName="rainConditionBus"
        refreshName="rainRefreshName"
        :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="height-1">
        <div class="main-title">
          <div> 累积降雨量统计 </div>
        </div>
        <div v-show="isSwitch">
          <div class="chart-box">
            <div>
              <div id="chartR1" style="width: 100%; height: 100%"></div>
            </div>
            <div class="rainfall-data">
              <div @click="tabSwitch(1)">
                <div>0~10<span>mm</span></div>
                <div>{{ rainData.rain.cum_rain.r_light.length }} <span>个</span></div>
              </div>
              <div @click="tabSwitch(2)">
                <div>10-25<span>mm</span></div>
                <div>{{ rainData.rain.cum_rain.r_moderate.length }} <span>个</span></div>
              </div>
              <div @click="tabSwitch(3)">
                <div>25-50<span>mm</span></div>
                <div>{{ rainData.rain.cum_rain.r_heavy.length }} <span>个</span></div>
              </div>
              <div @click="tabSwitch(4)">
                <div>50-100<span>mm</span></div>
                <div>{{ rainData.rain.cum_rain.r_storm.length }} <span>个</span></div>
              </div>
              <div @click="tabSwitch(5)">
                <div>100-250<span>mm</span></div>
                <div>{{ rainData.rain.cum_rain.r_downpour.length }} <span>个</span></div>
              </div>
              <div @click="tabSwitch(6)">
                <div>>250<span>mm</span></div>
                <div>{{ rainData.rain.cum_rain.r_super_dp.length }} <span>个</span></div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="!isSwitch">
          <div class="qx-table">
            <div class="qx-title">
              <span>{{ rainData.activeRainName }}</span>
              <span>{{ rainData.activeRain.length }}个</span>
            </div>
            <div class="qx-table-box">
              <div v-for="(item, index) in rainData.activeRain" :key="index" @click="openModal(item)">
                <div style="width: 24%; text-align: center">
                  <a-popover>
                    <template #content>
                      <p>{{ item.st_name }}</p>
                    </template>
                    {{ getNewName(item.st_name, 10) }}
                  </a-popover>
                </div>
                <div style="width: 60%">
                  <div
                    :style="{
                      width: (item.rain / rainData.activeRainWidth) * 100 + '%',
                      background: `linear-gradient(-90deg, ${rainData.activeRainColor}, ${rainData.activeRainColorRgba})`,
                    }"
                    class="columnar"
                  ></div>
                </div>
                <div style="width: 16%; text-align: center"> {{ item.rain }}mm </div>
              </div>
            </div>
            <div class="deviceBack" @click="tabSwitch">
              <img :src="doubleScreenBack" class="toolImage" />
            </div>
          </div>
        </div>
        <div class="main-title">
          <div> 分区降雨量统计 </div>
        </div>
        <div v-show="isSwitch2">
          <rpList
            :maxBox="rainData.activeRainmax"
            :dataObj="rainData.rain.arel_rain"
            @subIsSwitch="tabSwitch2"
            @activeRainfallData="activeRainfallData"
          />
        </div>
        <div v-show="!isSwitch2">
          <div class="qx-table qx-table2">
            <div class="qx-title">
              <span>{{ rainData.rainfallData.key }}</span>
              <span> {{ rainData.rainfallData.value.detail.length }}个</span>
            </div>
            <div class="qx-table-box">
              <div v-for="(item, index) in rainData.rainfallData.value.detail" :key="index" @click="openModal(item)">
                <div style="width: 24%; text-align: center">
                  <a-popover>
                    <template #content>
                      <p>{{ item.st_name }}</p>
                    </template>
                    {{ getNewName(item.st_name, 10) }}
                  </a-popover>
                </div>
                <div style="width: 56%">
                  <div :style="{ width: ((item.rain / rainData.rainfallMax) * 100?(item.rain / rainData.rainfallMax) * 100:0) + '%' }" class="columnar columnar-color"></div>
                </div>
                <div style="width: 20%; text-align: center">
                  <span v-if="item.rain != 0">{{ item.rain }}mm</span>
                  <span v-else>暂无降雨</span>
                </div>
              </div>
            </div>
            <div class="deviceBack" @click="tabSwitch2">
              <img :src="doubleScreenBack" class="toolImage" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';
import rpList from './rpList.vue';
import { postRainStatsInfo } from '/@/api/swHome/index';
import eventBus from '/@/utils/eventBus';
import { getNewName } from '/@/utils/fnUtils.ts';
import { useMapStore } from '/@/store/modules/map';

const mapStore2 = useMapStore();
const openModal = (item) => {
  mapStore2.setstInfo(item);
};
let isSwitch = ref(true);
let isSwitch2 = ref(true);
let keywords = ref('今日');
// 刷新监听
eventBus.on('rainRefreshName', () => {
  keywords.value = '今日';
  getPostRainStatsInfo(0);
  // 重置弹窗
  isSwitch.value = true;
  isSwitch2.value = true;
});
// 引入图表插件
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
function echarts1() {
  const chart = echarts.init(document.getElementById('chartR1'));
  var option;

  option = {
    title: [
      {
        text: rainData.rain.rain_st_num, //主标题
        left: '38%', //标题的位置 默认是left，其余还有center、right属性
        top: '30%',
        textStyle: {
          color: '#287EFF',
          fontSize: 34,
          fontWeight: 'normal',
          fontFamily: 'AgencyFB',
        },
      },
      {
        subtext: '降雨站点', //副标题
        itemGap: 20, //主副标题间距
        left: '30%', //标题的位置 默认是left，其余还有center、right属性
        top: '40%',
        subtextStyle: {
          color: '#85C4ED',
          fontSize: 14,
          fontWeight: 'normal',
          textAlign: 'center',
          fontFamily: 'AlimamaShuHeiTi',
        },
      },
    ],
    tooltip: {
      trigger: 'item',
      confine: true,
    },
    series: [
      {
        name: '累积降雨量统计图',
        type: 'pie',
        radius: ['80%', '90%'],
        label: {
          show: false,
          position: 'center',
        },
        splitLine: {
          length: 20,
          lineStyle: {
            width: 3,
            color: '#fff',
          },
        },
        data: [
          {
            value: rainData.rain.cum_rain.r_light.length,
            name: '0-10mm',
            itemStyle: {
              color: '#00aaff',
            },
          },
          {
            value: rainData.rain.cum_rain.r_moderate.length,
            name: '10-25mm',
            itemStyle: {
              color: '#4fff2f',
            },
          },
          {
            value: rainData.rain.cum_rain.r_heavy.length,
            name: '25-50mm',
            itemStyle: {
              color: '#ff9900',
            },
          },
          {
            value: rainData.rain.cum_rain.r_storm.length,
            name: '50-100mm',
            itemStyle: {
              color: '#00eaff',
            },
          },
          {
            value: rainData.rain.cum_rain.r_downpour.length,
            name: '100-250mm',
            itemStyle: {
              color: '#a556e2',
            },
          },
          {
            value: rainData.rain.cum_rain.r_super_dp.length,
            name: '>250mm',
            itemStyle: {
              color: '#f2ff00',
            },
          },
        ],
      },
    ],
  };

  option && chart.setOption(option);
}
// 获取水情数据
let rainData = reactive({
  rain: {
    cum_rain: {
      r_light: [],
      r_moderate: [], //中雨
      r_heavy: [], //大雨
      r_storm: [], //暴雨
      r_downpour: [], //大暴雨
      r_super_dp: [], //特大暴雨
    },
    arel_rain: {},
  },
  activeRain: [],
  activeRainName: '',
  activeRainWidth: 10,
  activeRainColor: '',
  activeRainColorRgba: '',
  activeRainmax: 100,
  rainfallData: {
    key: '',
    value: {
      detail: [],
    },
  },
  rainfallMax: 0,
});
function tabSwitch(type) {
  switch (type) {
    case 1:
      rainData.activeRain = rainData.rain.cum_rain.r_light;
      rainData.activeRainName = '0-10mm';
      rainData.activeRainWidth = 10;
      rainData.activeRainColor = '#00aaff';
      rainData.activeRainColorRgba = 'rgba(0,170,255,0.4)';
      break;
    case 2:
      rainData.activeRain = rainData.rain.cum_rain.r_moderate;
      rainData.activeRainName = '10-25mm';
      rainData.activeRainWidth = 25;
      rainData.activeRainColor = '#4fff2f';
      rainData.activeRainColorRgba = 'rgba(79,255,47,0.4)';
      break;
    case 3:
      rainData.activeRain = rainData.rain.cum_rain.r_heavy;
      rainData.activeRainName = '25-50mm';
      rainData.activeRainWidth = 50;
      rainData.activeRainColor = '#ff9900';
      rainData.activeRainColorRgba = 'rgba(255,153,0,0.4)';
      break;
    case 4:
      rainData.activeRain = rainData.rain.cum_rain.r_storm;
      rainData.activeRainName = '50-100mm';
      rainData.activeRainWidth = 100;
      rainData.activeRainColor = '#00eaff';
      rainData.activeRainColorRgba = 'rgba(0,234,255,0.4)';
      break;
    case 5:
      rainData.activeRain = rainData.rain.cum_rain.r_downpour;
      rainData.activeRainName = '100-250mm';
      rainData.activeRainWidth = 250;
      rainData.activeRainColor = '#a556e2';
      rainData.activeRainColorRgba = 'rgba(165,86,226,0.4)';
      break;
    case 6:
      rainData.activeRain = rainData.rain.cum_rain.r_super_dp;
      rainData.activeRainName = '>250mm';
      rainData.activeRainWidth = 350;
      rainData.activeRainColor = '#f2ff00';
      rainData.activeRainColorRgba = 'rgba(242,255,0,0.4)';
      break;

    default:
      break;
  }
  isSwitch.value = !isSwitch.value;
}
// 子页面传参获取分区降雨列表
function activeRainfallData(val) {
  rainData.rainfallData = val;
  rainData.rainfallMax = setMax(val.value.detail);
}
// 获取分区降雨量最大值
function setMax(obj) {
  let max = 0;
  Object.entries(obj).forEach(([k, v]) => {
    if (v.rain * 1 > max) {
      max = v.rain;
    }
  });
  return max;
}
function tabSwitch2() {
  isSwitch2.value = !isSwitch2.value;
}
function getPostRainStatsInfo(stepSize) {
  postRainStatsInfo({
    step_size: stepSize,
  }).then((res) => {
    rainData.rain = res.data;
    rainData.activeRainmax = setMax(rainData.rain.arel_rain);
    echarts1();
  });
}
// let rainStats = 0;
eventBus.on('rainConditionBus', async (value) => {
  keywords.value = value.name;
  // rainStats = value.value;
  getPostRainStatsInfo(value.value);
});
onMounted(async () => {
  // 获取雨情数据
  getPostRainStatsInfo(0);
});
</script>

<style lang="less" scoped>
.main {
  margin-top: 20px;
  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);
}
.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;
}
.chart-box {
  margin: 0 10px;
  display: flex;
  & > div:nth-child(1) {
    width: 160px;
    height: 160px;
    margin-top: 40px;
  }
}
.rainfall-data {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  & > div {
    cursor: pointer;
    width: 50%;
    margin-top: 20px;
    div:nth-child(1) {
      border-left: 2px solid #00aaff;
      padding-left: 6px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
    }
    div:nth-child(2) {
      border-left: 2px solid rgba(0, 170, 255, 0.3);
      padding-left: 6px;
      font-size: 20px;
      color: #fff;
      span {
        font-size: 12px;
      }
    }
  }
  & > div:nth-child(2) {
    div:nth-child(1) {
      border-left: 2px solid #4fff2f;
    }
    div:nth-child(2) {
      border-left: 2px solid rgba(79, 255, 47, 0.3);
    }
  }
  & > div:nth-child(3) {
    div:nth-child(1) {
      border-left: 2px solid #ff9900;
    }
    div:nth-child(2) {
      border-left: 2px solid rgba(255, 153, 0, 0.3);
    }
  }
  & > div:nth-child(4) {
    div:nth-child(1) {
      border-left: 2px solid #00eaff;
    }
    div:nth-child(2) {
      border-left: 2px solid rgba(0, 234, 255, 0.3);
    }
  }
  & > div:nth-child(5) {
    div:nth-child(1) {
      border-left: 2px solid #a556e2;
    }
    div:nth-child(2) {
      border-left: 2px solid rgba(165, 86, 226, 0.3);
    }
  }
  & > div:nth-child(6) {
    div:nth-child(1) {
      border-left: 2px solid #f2ff00;
    }
    div:nth-child(2) {
      border-left: 2px solid rgba(242, 255, 0, 0.3);
    }
  }
}
// 表格数据

.qx-table {
  height: 214px;
  padding-left: 20px;
  .qx-table-top {
    display: flex;
  }
  .qx-title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.87);
    font-weight: 500;
    margin: 6px 0;
    span:nth-child(2) {
      margin-left: 10px;
    }
  }
  .qx-table-box {
    height: 150px;
    overflow: scroll;
    & > div {
      cursor: pointer;
      width: 100%;
      line-height: 33px;
      display: flex;
      box-sizing: border-box;
      flex-wrap: wrap;
      /* 面板线性渐变 */
      border: 0px solid;
      margin-top: 2px;
      padding-left: 14px;
      flex-wrap: wrap;
      // height: 20px;
      // border-image: linear-gradient(261deg, rgba(40, 165, 255, 0.9) 20%, rgba(100, 255, 255, 0) 40%, rgba(40, 126, 255, 0) 66%, #28a5ff 89%) 1;
      & > div:nth-child(1) {
        // padding-left: 10px;
        text-align: left !important;
        // height: 20px !important;
      }
      & > div:nth-child(2) {
        border: 1px solid #0097ae;
        height: 11px;
        // width: 100%;
        border-radius: 10px;
        position: relative;
        top: 10px;
      }
    }
    & > div:nth-child(2n) {
      background-color: rgba(0, 170, 255, 0.08);
    }
    & > div:hover {
      background: rgba(0, 238, 255, 0.15);
      color: #00d8f0;
    }
    & > div:hover {
      padding-left: 10px;
      border-left: 4px solid #00eeff;
    }
    // .columnar {
    //   border: 1px solid #00eeff;
    // }
  }
  .deviceBack {
    -webkit-transform: rotateY(180deg);
    padding-left: 10px;
  }
  .columnar {
    border-radius: 4px;
    opacity: 1;
    // background: linear-gradient(90deg, #0097ae 0%, #06c7ed 100%);
    height: 9px;
    width: 100%;
    position: relative;
    top: 0px;
  }
  .columnar-color {
    background: linear-gradient(90deg, #0097ae 0%, #06c7ed 100%);
    position: relative;
    top: 0px;
  }
}
.qx-table2 {
  height: 284px;
  .qx-table-box {
    height: 220px;
  }
}
.height-1 {
  // height: 53vh;
  height: 590px;
}
</style>
