<template>
  <!-- 典型项目分析 -->
  <div class="projectFXPage">
    <!-- 分析结果建议 -->
    <div class="suggest">
      <div class="autoCont">
        <div class="center">
          降雨起止时间
          <span v-for="(item, index) in detailDataRain.rainfallPeriods" :key="index">{{ item.rainStartTime }}-{{ item.rainEndTime }}</span>
          ，24小时累计降雨量{{ detailDataRain.rainfallIntensity }}mm，降雨等级
          <span class="green">
            {{
              detailDataRain.rainfallIntensity <= 10
                ? '小雨'
                : detailDataRain.rainfallIntensity > 10 && detailDataRain.rainfallIntensity <= 25
                ? '中雨'
                : '大雨'
            }}
          </span>
        </div>
        <div class="cont">
          <span class="numBg">1</span>
          项目设计最大控制容积 <span class="green">6796.52m³</span>
        </div>
        <div class="cont">
          <span class="numBg">2</span>
          项目设计标准达标情况（降雨量≤54.62mm时，径流总量控制率≥90%）：本场降雨径流总量控制率 <span class="green">92%</span>，
          <span class="green">达标</span>
        </div>
        <div class="cont">
          <span class="numBg">3</span>
          雨水管网产流开始时间1:45，结束时间4:45，累计蓄水量
          <span class="green">{{ detailDataRain.totalImportFlow - detailDataRain.totalOutFlow }}m³</span>。
        </div>
      </div>
    </div>

    <!-- 降雨效果 -->
    <CanvasRainP :width="1600" :height="800"></CanvasRainP>

    <!-- 水深  -->
    <img
      src="@/assets/newImgs/pumpGY/water.png"
      alt="左"
      class="waterFlow"
      :style="{
        height: (120 * maxSS1) / 1.1 + 'px',
        left: '73px',
        width: '846px',
      }"
    />
    <img
      src="@/assets/newImgs/pumpGY/water.png"
      alt="右"
      class="waterFlow"
      :style="{
        height: (120 * maxSS2) / 1.8 + 'px',
        right: '75px',
        width: '555px',
      }"
    />

    <!-- 实时数据 -->
    <div class="realData">
      <p style="left: 290px; bottom: 175px">最大水深：{{ maxSS1 || '--' }}米</p>
      <p style="right: 260px; bottom: 175px">最大水深：{{ maxSS2 || '--' }}米</p>
    </div>

    <!-- 监测数据 -->
    <div style="left: 170px; bottom: 335px" class="tipsM">
      <span :class="[maxSS1 >= 1.1 ? 'red' : 'green']"> 水深：{{ maxSS1 || '--' }} m </span>
      <span>流速：{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s</span>
      <span :class="[nameToData(station1.propertyMonitorList, 'SS')[valIndex1] >= 300 ? 'red' : 'green']">
        SS：{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L
      </span>
      <span>时间：{{ station1.propertyMonitorXList[valIndex1] ? station1.propertyMonitorXList[valIndex1].slice(10) : '--' }} </span>
      <span>管径：2.4*1.1m</span>
    </div>
    <div style="left: 530px; bottom: 335px" class="tipsM">
      <span :class="[nameToData(station2.propertyMonitorList, '水位')[valIndex2] >= 1.1 ? 'red' : 'green']">
        水深：{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m
      </span>
      <span>流速：{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s</span>
      <span :class="[nameToData(station2.propertyMonitorList, 'SS')[valIndex2] >= 300 ? 'red' : 'green']">
        SS：{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L
      </span>
      <span>时间：{{ station2.propertyMonitorXList[valIndex2] ? station2.propertyMonitorXList[valIndex2].slice(10) : '--' }} </span>
      <span>管径：2.4*1.1m</span>
    </div>
    <div style="left: 810px; bottom: 335px" class="tipsM">
      <span :class="[nameToData(station3.propertyMonitorList, '水位')[valIndex3] >= 0.5 ? 'red' : 'green']">
        水深：{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m
      </span>
      <span>流速：{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s</span>
      <span :class="[nameToData(station3.propertyMonitorList, 'SS')[valIndex3] >= 300 ? 'red' : 'green']">
        SS：{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L
      </span>
      <span>时间：{{ station3.propertyMonitorXList[valIndex3] ? station3.propertyMonitorXList[valIndex3].slice(10) : '--' }} </span>
      <span>管径：DN500</span>
    </div>
    <div style="left: 960px; bottom: 335px" class="tipsM">
      <span>水深：{{ '--' }} m</span>
      <span>流速：{{ '--' }} m/s</span>
      <span>SS：{{ '--' }} mg/L</span>
      <span>时间： {{ '--' }}</span>
      <span>管径：3*1.8m</span>
    </div>
    <div style="right: 140px; bottom: 335px" class="tipsM">
      <span :class="[maxSS2 >= 1.8 ? 'red' : 'green']">水深：{{ maxSS2 || '--' }} m</span>
      <span>流速：{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s</span>
      <span :class="[nameToData(station5.propertyMonitorList, 'SS')[valIndex5] >= 300 ? 'red' : 'green']">
        SS：{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L
      </span>
      <span>时间：{{ station5.propertyMonitorXList[valIndex5] ? station5.propertyMonitorXList[valIndex5].slice(10) : '--' }} </span>
      <span>管径：3*1.8m</span>
    </div>

    <!-- 海绵设施 -->
    <img
      src="@/assets/newImgs/pumpGY/hmSS.png"
      alt="海绵设施"
      style="left: 750px; bottom: 385px; width: 63px; height: 63px; cursor: pointer"
      @click="checkHmSS"
      class="equipM"
    />

    <!-- 监测设备 -->
    <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 130px; bottom: 75px" class="equipM" />
    <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 540px; bottom: 75px" class="equipM" />
    <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 780px; bottom: 75px" class="equipM" />
    <img
      src="@/assets/newImgs/pumpGY/equipL.png"
      alt="设备右1"
      style="right: 490px; bottom: 75px; transform: rotateY(180deg)"
      class="equipM"
    />
    <img
      src="@/assets/newImgs/pumpGY/equipL.png"
      alt="设备右1"
      style="right: 175px; bottom: 75px; transform: rotateY(180deg)"
      class="equipM"
    />

    <!-- 汽车 -->
    <img src="@/assets/newImgs/pumpGY/car1.png" alt="车1" style="bottom: 525px; width: 148px; height: 70px" class="carFX animate1" />
    <img src="@/assets/newImgs/pumpGY/car2.png" alt="车2" style="bottom: 495px; width: 134px; height: 57px" class="carFX animate2" />
    <img src="@/assets/newImgs/pumpGY/car4.png" alt="车4" style="bottom: 455px; width: 137px; height: 50px" class="carFX animate3" />
    <img src="@/assets/newImgs/pumpGY/car5.png" alt="车5" style="bottom: 425px; width: 142px; height: 51px" class="carFX animate4" />
    <img src="@/assets/newImgs/pumpGY/car3.png" alt="车3" style="bottom: 415px; width: 48px; height: 46px" class="carFX animate3" />

    <!-- 水流方向 -->
    <div class="waterFX">
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左1" style="left: 80px; bottom: 15px; transform: rotate(180deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左2" style="left: 400px; bottom: 15px; transform: rotate(180deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左3" style="left: 710px; bottom: 15px; transform: rotate(180deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左4" style="right: 410px; bottom: 15px" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左5" style="right: 80px; bottom: 15px" />
    </div>
  </div>
</template>

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

const { proxy } = getCurrentInstance();
const timer = ref(null);
const valIndex1 = ref(0);
const valIndex2 = ref(0);
const valIndex3 = ref(0);
const valIndex4 = ref(0);
const valIndex5 = ref(0);
const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
const maxSS1 = ref(0);
const maxSS2 = ref(0);
const detailDataRain = ref({ totalOutFlow: 0, totalImportFlow: 0 });

// 获取实时数据
function getRealData() {
  // 从左到右，共5个
  let params = {
    startTime: localStorage.getItem('setRainDateKF'),
    endTime: localStorage.getItem('setRainDateKF'),
    stCode: '',
  };
  params.stCode = '0371000037';
  graphicReport(params).then(res => {
    if (res.data.propertyMonitorList.length > 0) {
      station1.value = res.data;
      // 取最大的值
      let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位'));
      valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => {
        return item == max;
      });
      maxSS1.value = max;
    }
  });

  params.stCode = '0371000038';
  graphicReport(params).then(res => {
    if (res.data.propertyMonitorList.length > 0) {
      station2.value = res.data;
      // 取最大的值
      let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位'));
      valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => {
        return item == max;
      });
    }
  });

  params.stCode = '0371000039';
  graphicReport(params).then(res => {
    if (res.data.propertyMonitorList.length > 0) {
      station3.value = res.data;
      // 取最大的值
      let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位'));
      valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => {
        return item == max;
      });
    }
  });

  station4.value = {}; //暂未安装，无数据

  params.stCode = '0371000044';
  graphicReport(params).then(res => {
    if (res.data.propertyMonitorList.length > 0) {
      station5.value = res.data;
      // 取最大的值
      let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位'));
      valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => {
        return item == max;
      });
      maxSS2.value = max;
    }
  });
}

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

// 海绵设施点击
function checkHmSS() {
  bus.emit('checkSSFX', {});
}

// 降雨场次相关
function getRainDetail() {
  // 关联雨量站是皮革厂雨量站，0371000003
  let params = {
    searchTime: localStorage.getItem('setRainDateKF'),
    rainStCode: '0371000003',
    projectNo: 'GW06',
  };
  calculateAreaAnnualRunoff(params).then(res => {
    detailDataRain.value = res.data || {};
  });
}

onMounted(() => {
  getRealData();
  getRainDetail();
  // 5分钟刷新一次数据
  timer.value = setInterval(() => {
    getRealData();
  }, 5 * 60 * 1000);
});
onBeforeUnmount(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<style lang="scss">
// prettier-ignore
.projectFXPage {
  width: 1600PX;
  height: 800PX;
  margin-bottom:20PX;
  background: url('@/assets/newImgs/pumpGY/projectBg.jpg') no-repeat;
  background-size: 100% 100%;
  position:relative;
  .equipM{
    position: absolute; 
    z-index: 30;
    width:71PX;
    height:329PX;
  }
  .carFX{
    position: absolute; 
    z-index: 10;
  }
  .animate1{
    animation: carAni1 linear 10s infinite;
    @keyframes carAni1 {
      0%{right:5%;}
      100%{right:92%}
    }
  }
  .animate2{
    animation: carAni2 ease-in-out 8s infinite;
    @keyframes carAni2 {
      0%{right:5%;}
      100%{right:90%}
    }
  }
  .animate3{
    animation: carAni3 ease-in-out 8s infinite;
    @keyframes carAni3 {
      0%{left:5%;}
      100%{left:90%}
    }
  }
  .animate4{
    animation: carAni4 linear 10s infinite;
    @keyframes carAni4 {
      0%{left:5%;}
      100%{left:90%}
    }
  }
  .animate3{
    animation: carAni5 linear 20s infinite;
    @keyframes carAni5 {
      0%{left:0%;}
      100%{left:93%}
    }
  }
  .suggest{
    position:absolute;
    z-index: 20;
    right:155PX;
    top:-10PX;
    width:421PX;
    height:251PX;
    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:401PX;
      height:231PX;
      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{
    position:absolute;
    z-index: 10;
    bottom:60PX;
  }
    
  .tipsM{
    position:absolute;
    z-index: 120;
    background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
    background-size: 100% 100%;
    padding:10PX;
    color:#C1E8FF;
    font-size:16PX;
    width:150PX;
    span{
      width:100%;
      display: inline-block;
      margin-bottom:3px;
    }
  }
  .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{
    background: red;
    img{
      position:absolute;
      z-index: 20;
    }
  }
}
</style>