<template>
  <!-- 典型项目设施分析 -->
  <div class="projectDXPage">
    <!-- 分析结果建议 -->
    <div class="suggest">
      <div class="autoCont">
        <div class="center">
          {{ rainDate }}分析：降雨起止时间
          <span v-for="(item, index) in detailDataRain.rainfallPeriods" :key="index">
            {{ item.rainStartTime }}-{{ item.rainEndTime }},
          </span>
          累计降雨时长:{{ rainTime }},小时最大降雨量是{{ hourMaxRain }}mm, 24小时累计降雨量{{ detailDataRain.rainfallIntensity }}mm,
          降雨等级
          <span class="green">
            {{
              detailDataRain.rainfallIntensity <= 10
                ? '小雨'
                : detailDataRain.rainfallIntensity > 10 && detailDataRain.rainfallIntensity <= 25
                ? '中雨'
                : '大雨'
            }},
          </span>
          总收水量: {{ ((detailDataRain.rainfallIntensity * 3374.888 * 0.15) / 1000).toFixed(2) }}m³
        </div>
        <div class="cont">
          <span class="numBg">1</span>
          项目设计降雨量为19.8mm对应的年径流总量控制率为68%;年径流污染削减率(以SS计)不低于40%;本场降雨径流总量控制率:
          <span class="green"> 达标 </span>

          ；本场降雨污染削减率（以SS计）:
          <span class="green">达标</span>
        </div>
        <div class="cont">
          <span class="numBg">2</span>
          雨水管网产流开始时间{{ detailDataRain.flowStartTime }}，结束时间{{ detailDataRain.flowEndTime }}，累计出口流量
          <span class="green">85.23m³</span>
        </div>
      </div>
    </div>

    <!-- 降雨效果 -->
    <CanvasRainSS :width="1382" :height="800"></CanvasRainSS>

    <!-- 水位 水流 -->
    <img
      src="@/assets/newImgs/pumpGY/water.png"
      class="waterFlow"
      style="transform: rotateY(180deg)"
      :style="{ height: (80 * waterHeight) / 1.1 + 'px' }"
    />

    <!-- 实时数据 -->
    <div class="realData">
      <p style="left: 700px; bottom: 95px">管径：2.4 x 1.1米</p>
      <p style="left: 500px; bottom: 95px" :class="[nameToData(station2.propertyMonitorList, '水位')[rainIndex] >= 1.1 ? 'red' : '']">
        出口水深：{{ nameToData(station2.propertyMonitorList, '水位')[rainIndex] || '--' }} 米
      </p>
      <p style="right: 230px; bottom: 65px">进口流速：{{ nameToData(station1.propertyMonitorList, '流速')[rainIndex] }} m/s</p>
      <p style="right: 230px; bottom: 25px" :class="[nameToData(station1.propertyMonitorList, 'SS')[rainIndex] >= 300 ? 'red' : '']">
        进口SS：{{ nameToData(station1.propertyMonitorList, 'SS')[rainIndex] || '--' }} mg/L
      </p>
      <p style="left: 60px; bottom: 65px">出口流速：{{ nameToData(station2.propertyMonitorList, '流速')[rainIndex] || '--' }} m/s</p>
      <p style="left: 60px; bottom: 25px" :class="[nameToData(station2.propertyMonitorList, 'SS')[rainIndex] >= 300 ? 'red' : '']">
        出口SS：{{ nameToData(station2.propertyMonitorList, 'SS')[rainIndex] || '--' }} mg/L
      </p>
    </div>

    <!-- 监测设备 -->
    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备左1" style="left: 250px; bottom: 35px" class="equipM" />
    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备右1" style="right: 420px; bottom: 35px" class="equipM" />

    <!-- 水流方向 -->
    <div class="waterFX">
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左1" style="left: 220px; bottom: 425px; transform: rotate(50deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间1" style="left: 320px; bottom: 625px; transform: rotate(80deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间2" style="left: 360px; bottom: 425px; transform: rotate(80deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间3" style="left: 385px; bottom: 195px; transform: rotate(90deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右1" style="right: 110px; bottom: 425px; transform: rotate(180deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右2" style="right: 350px; bottom: 355px; transform: rotate(120deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右3" style="left: 500px; bottom: 425px; transform: rotate(130deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下1" style="left: 350px; bottom: 5px; transform: rotate(180deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下2" style="right: 480px; bottom: 5px; transform: rotate(180deg)" />
    </div>
  </div>
</template>

<script setup>
import CanvasRainSS from '@/views/sponeScreen/projectHM/canvasRainSS.vue';
import { graphicReport, calculateAreaAnnualRunoff } from '@/api/dataAnalysis/syntherticData';

const rainDate = ref('');
const { proxy } = getCurrentInstance();
const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
const rainIndex = ref(0);
const detailDataRain = ref({ totalOutFlow: 0, totalImportFlow: 0 });
const hourMaxRain = ref(0);
const rainDateTwo = ref('');
const rainTime = ref('');
const waterHeight = ref(0);

// 获取实时数据
async function getRealData() {
  let params1 = {
    startTime: localStorage.getItem('setRainDateKF'),
    endTime: localStorage.getItem('setRainDateKF'),
    stCode: '0371000039',
  };
  let res1 = await graphicReport(params1);
  if (res1.data.propertyMonitorList.length > 0) {
    station1.value = res1.data;
  }

  let params2 = {
    startTime: localStorage.getItem('setRainDateKF'),
    endTime: localStorage.getItem('setRainDateKF'),
    stCode: '0371000038',
  };
  let res2 = await graphicReport(params2);
  if (res2.data.propertyMonitorList.length > 0) {
    station2.value = res2.data;
    waterHeight.value = nameToData(res2.data.propertyMonitorList, '水位')[rainIndex.value]; //水深
  }
}

// 公共方法，根据监测名称来匹配对应的数值
function nameToData(data, name) {
  let arr = data.filter(item => item.monitorPropertyName == name);
  let lists = arr[0] ? arr[0].ylist : [];
  return lists;
}

// 降雨场次相关
function getRainDetail() {
  // 关联雨量站是皮革厂雨量站，0371000003
  let params = {
    searchTime: rainDate.value,
    rainStCode: '0371000003',
    projectNo: 'GW06',
  };
  calculateAreaAnnualRunoff(params).then(res => {
    let datas = res.data;
    detailDataRain.value = datas || {};
    // 计算降雨总时长
    let times = 0;
    datas.rainfallPeriods &&
      datas.rainfallPeriods.map(item => {
        times += (new Date(item.rainEndTime).getTime() - new Date(item.rainStartTime).getTime()) / 1000;
      });
    let hour = Math.floor(times / 60 / 60);
    let minutes = Math.floor((times % 3600) / 60);
    rainTime.value = hour + '小时' + minutes + '分钟';
  });

  // 雨量站监测数据
  let params2 = {
    startTime: rainDate.value + ' 08:00:00',
    endTime: rainDateTwo.value + ' 08:00:00',
    stCode: '0371000003',
  };
  graphicReport(params2).then(res => {
    let hourData = nameToData(res.data.propertyMonitorList, '1小时时段降水量');
    hourMaxRain.value = Math.max(...hourData);
    // 最大降雨量对应的index
    rainIndex.value = nameToData(res.data.propertyMonitorList, '1小时时段降水量').findIndex(item => {
      return item == hourMaxRain.value;
    });
  });

  getRealData();
}

onMounted(() => {
  rainDate.value = localStorage.getItem('setRainDateKF');
  // 早八点到第二天早八点逻辑
  let dates = new Date(rainDate.value);
  //86400000 一天得毫秒 *1，就是当前日期减一天，如果是需要自定义几天，修改就可
  rainDateTwo.value = proxy.moment(new Date(dates.getTime() + 86400000 * 1)).format('YYYY-MM-DD');

  getRainDetail();
});
onBeforeUnmount(() => {});
</script>

<style lang="scss">
// prettier-ignore
.projectDXPage {
  width: 1382PX;
  height: 800PX;
  margin-bottom:20PX;
  background: url('@/assets/newImgs/pumpGY/dxxmBg.jpg') no-repeat;
  background-size: 100% 100%;
  position:relative;
  .equipM{
    position: absolute; 
    z-index: 30;
    width:10PX;
    height:73PX;
  }
  .progressP{
    width:50%;
    left: 433PX; 
    top: 15PX; 
    position: absolute; 
    z-index: 20
  }
  .suggest{
    position:absolute;
    z-index: 20;
    left:15PX;
    top:0PX;
    width:471PX;
    height:271PX;
    background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
    background-size: 100% 100%;
    font-size:14PX;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #C1E8FF;
    line-height: 24PX;
    .autoCont{
      width:451PX;
      height:251PX;
      margin:10PX 0 0 10PX;
      padding:10PX;
      overflow: auto;
    }
    .iconSug{
      cursor: pointer;
      position:absolute;
      top:20PX;
      right:20PX;
      width: 25PX;
      height: 25PX;
      svg{
        width: 25PX;
        height: 25PX;
      }
    }
    .center{
      margin:10PX 30px 10PX 0px;
      text-align: center;
      font-size:15PX;
      color:#fff;
    }
    .cont{
      padding-bottom:5PX;
      margin-bottom:5PX;
      border-bottom: 1px dashed #6A8CAE;
      .numBg{
        width:24PX;
        height: 18PX;
        line-height: 18PX;
        display: inline-block;
        background: url('@/assets/newImgs/pumpGY/numBg.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        color: #FFD200;
      }
    }
    span{
      font-weight: bold;
    }
  }
  .waterFlow{
    width:725PX;
    position:absolute;
    z-index: 10;
    left:243PX;
    bottom:28PX;
  }
  .waterFlowS{
    width:46PX;
    position:absolute;
    z-index: 10;
    left:247PX;
    bottom:105PX;
  }
  .realData{
    color:#fff;
    p{
      position:absolute;
      z-index: 10;
      width:160PX;
      height: 26PX;
      line-height: 26PX;
      text-align: center;
      background: #004DE0;
      border-radius: 13PX;
      font-size:16PX;
    }
  }
  .waterFX{
    img{
      position:absolute;
      z-index: 10;
    }
  }
}
</style>