<template>
  <!-- 泵站运行工况图 合流泵站-->
  <div class="pumpGKTHL">
    <!-- 信息展示 -->
    <div class="pumpInfo">
      <div class="flex">
        <div class="infoLeft">
          <div class="name">
            {{ pumpObj.pumpName }}
            {{ pumpObj.pumpType == 'rain_water' ? '雨水泵站' : pumpObj.pumpType == 'sewage_water' ? '污水泵站' : '雨污合建' }}
          </div>
          <div class="type">
            <p class="fail" v-if="Object.keys(detailObj).length == 0"><span></span>离线</p>
            <p class="success" v-else><span></span>在线</p>
          </div>
          <div>更新时间：{{ detailObj.tt }}</div>
          <div class="cont">开泵时间：--</div>
          <div class="cont">开泵台数：0台</div>
          <div class="cont">开泵时长：--小时--分--秒</div>
          <div class="cont">总抽排量：--m³</div>
        </div>
      </div>
    </div>
    <!-- 泵站图 -->
    <div class="pumpCont">
      <!-- 排入水体 -->
      <div class="waterGo">{{ pumpObj.rainpump.collectionOut }}</div>

      <!-- 污水池 -->
      <div class="pondWS">
        <div class="waterType">污水池</div>
        <!-- 大水管水流动效 -->
        <div class="path-run" v-if="mainWaterWS">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="773"
            height="400"
            viewBox="0 0 1256 620"
            fill="transparent"
            stroke-width="15"
            stroke-dasharray="60"
          >
            <path
              transform="translate(7.5 7.5)  rotate(0 619.5 131.5)"
              d="M0,593L0,10C0,4.48 4.48,0 10,0L1229,0C1234.52,0 1239,4.48 1239,10L1239,593 "
              class="pathRun"
              stroke="#ff8500"
              fill="transparent"
            ></path>
          </svg>
        </div>
        <!-- 水流和液位值 -->
        <div class="waterVal">
          <img class="water" src="@/assets/newImgs/pumpGY/water.png" :style="{ height: (realYWWS / 10.5) * 260 + 'px' }" alt="水位" />
          <div class="value">
            <img src="@/assets/newImgs/pumpGY/gauge.png" alt="水尺" style="height: 260px" />
            <div class="number" :style="{ bottom: (realYWWS / 10.5) * 260 + 'px' }">
              <div class="val">{{ realYWWS }}</div>
            </div>
          </div>
        </div>
        <!-- 污水泵 -->
        <div class="flex bzCont">
          <div class="partBJ" v-for="(item, index) in pumpListWS" :key="index">
            <img class="guan" src="@/assets/newImgs/pumpGY/guan.png" alt="水管" />
            <!-- 开启单个水管水流动效 -->
            <div class="line-div" v-if="item.status == '运行'">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                version="1.0"
                viewBox="0 0 40 400"
                stroke-width="40"
                stroke-dasharray="30"
                style="height: 160px; width: 16px"
              >
                <path d="M5 -50 Q1 -5 2 -2 V425" stroke="#ff8500" fill="transparent" class="line-div-run"></path>
              </svg>
            </div>
            <div class="tipsBZ">
              <div class="contTips">{{ i }}污水泵</div>
              <div class="light" v-if="item.dl">
                <div class="flex"><img src="@/assets/newImgs/pumpGY/dlIcon.png" alt="电流" />{{ item.dl }}</div>
                <div class="flex"><img src="@/assets/newImgs/pumpGY/timeIcon.png" alt="时长" />{{ item.hour }}</div>
              </div>
            </div>
            <img class="pump" src="@/assets/newImgs/pumpGY/pumpWOpen.png" alt="泵机开启状态" v-if="item.status == '运行'" />
            <img class="pump" src="@/assets/newImgs/pumpGY/pumpW.png" alt="泵机停止状态" v-else />
            <div class="status">就地</div>
            <div class="yxstatus statusYX" v-if="item.status == '运行'">{{ item.status }}</div>
            <div class="yxstatus statusTZ" v-else>停止</div>
          </div>
        </div>
      </div>

      <!-- 雨水池 -->
      <div class="pondYS">
        <div class="waterType">雨水池</div>
        <!-- 大水管水流动效 -->
        <div class="path-run" v-if="mainWaterYS">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="850"
            height="300"
            viewBox="0 0 1256 400"
            fill="transparent"
            stroke-width="15"
            stroke-dasharray="60"
          >
            <path
              transform="translate(7.5 7.5)  rotate(0 619.5 131.5)"
              d="M0,300L0,10C0,4.48 4.48,0 10,0L1229,0C1234.52,0 1239,4.48 1239,10L1239,300 "
              class="pathRun"
              stroke="#ff8500"
              fill="transparent"
            ></path>
          </svg>
        </div>
        <!-- 水流和液位值 -->
        <div class="waterVal">
          <img class="water" src="@/assets/newImgs/pumpGY/water.png" :style="{ height: (realYWYS / 10.5) * 260 + 'px' }" alt="水位" />
          <div class="value">
            <img src="@/assets/newImgs/pumpGY/gauge.png" style="height: 260px" alt="水尺" />
            <div class="number" :style="{ bottom: (realYWYS / 10.5) * 260 + 'px' }">
              <div class="val">{{ realYWYS }}</div>
            </div>
          </div>
        </div>
        <!-- 雨水泵 -->
        <div class="flex bzCont" v-if="pumpObj.pumpType == 'rain_water' || pumpObj.pumpType == 'confluence'">
          <div class="partBJ" v-for="(item, index) in pumpListYS" :key="index">
            <img class="guan" src="@/assets/newImgs/pumpGY/guan.png" alt="水管" />
            <!-- 开启单个水管水流动效 -->
            <div class="line-div" v-if="item.status == '运行'">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                version="1.0"
                viewBox="0 0 40 400"
                stroke-width="40"
                stroke-dasharray="30"
                style="height: 160px; width: 16px"
              >
                <path d="M5 -50 Q1 -5 2 -2 V425" stroke="#ff8500" fill="transparent" class="line-div-run"></path>
              </svg>
            </div>
            <div class="tipsBZ">
              <div class="contTips">{{ i }}雨水泵</div>
              <div class="light" v-if="item.dl">
                <div class="flex"><img src="@/assets/newImgs/pumpGY/dlIcon.png" alt="电流" />{{ item.dl }}</div>
                <div class="flex"><img src="@/assets/newImgs/pumpGY/timeIcon.png" alt="时长" />{{ item.hour }}</div>
              </div>
            </div>
            <img class="pump" src="@/assets/newImgs/pumpGY/pumpOpen.png" alt="泵机开启状态" v-if="item.status == '运行'" />
            <img class="pump" src="@/assets/newImgs/pumpGY/pump.png" alt="泵机停止状态" v-else />
            <div class="status">就地</div>
            <div class="yxstatus statusYX" v-if="item.status == '运行'">{{ item.status }}</div>
            <div class="yxstatus statusTZ" v-else>停止</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const pumpObj = ref({});
const detailObj = ref({});
const pumpListYS = ref([]); //泵机 雨水
const pumpListWS = ref([]); //泵机 污水
const realYWYS = ref(''); //实时液位 雨水
const realYWWS = ref(''); //实时液位 污水
const mainWaterYS = ref(false); //大水管动效 雨水
const mainWaterWS = ref(false); //大水管动效 污水

const props = defineProps({
  pumpObj: {
    type: Object,
  },
});
watch(
  () => props.pumpObj,
  () => {
    pumpObj.value = props.pumpObj;
  },
  { immediate: true }
);

onMounted(() => {
  pumpListYS.value = [];
  pumpListWS.value = [];
  // 合流泵站显示
  realYWYS.value = 5.19;
  realYWWS.value = 3.09;
  let totalYS = pumpObj.value.rainpump.deviceCount || 1;
  let totalWS = pumpObj.value.sweagepump.deviceCount || 1;
  for (let i = 0; i < totalYS; i++) {
    pumpListYS.value.push({
      status: '停止',
      dl: '',
      hour: '',
    });
  }
  pumpListYS.value[0].status = '运行';
  mainWaterYS.value = true;

  for (let i = 0; i < totalWS; i++) {
    pumpListWS.value.push({
      status: '停止',
      dl: '',
      hour: '',
    });
  }
  pumpListWS.value[0].status = '运行';
  mainWaterWS.value = true;

  detailObj.value.tt = '2024-08-20 12:20:32';
});

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

<style lang="scss" scoped>
// prettier-ignore
.pumpGKTHL {
  width:1450PX;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 16PX;
  color: #FFFFFF;
  
  .pumpCont{
    position:relative;
    margin:30PX 0PX 100PX 0PX;
    width:1395PX;
    height: 712PX;
    background: url('@/assets/newImgs/pumpGY/pumpBgHL.png') no-repeat;
    background-size:100% 100%;
    .pondWS{
      position:absolute;
      right:175PX;
      top:60PX;
      width:675PX;
      height: 260PX;;
      .waterType{
        position:absolute;
        left:10PX;
        top:75PX;
        width:10PX;
        font-size:26PX;
        font-weight: bold;
        z-index: 90;
      }
      .waterVal{
          position:absolute;
          bottom:0PX;
          left:0PX;
          z-index: 10;
          width:100%;
          height: 100%;
          .water{
            position:absolute;
            bottom:0PX;
            left:0PX;
            width:100%;
          }
          .value{
            position:absolute;
            bottom:0PX;
            right:0PX;
            height: 260PX;
            .number{
              position:absolute;
              bottom:0PX;
              left:0PX;
              z-index: 99;
              width:67PX;
              border-bottom:3px solid #2ABB3E;
              .val{
                text-align: center;
                padding:3PX 2PX;
                width:42PX;
                margin-left:25PX;
                margin-bottom:-1PX;
                background: #2ABB3E;
                font-weight: bold;
                font-size: 17PX;
              }
            }
          }
        }
      .path-run{
        position:absolute;
        left:-48PX;
        top:-60PX;
        height:400PX;
        .pathRun{
          animation: pathRun 2s linear infinite;
          fill:transparent !important;
        }
        @keyframes pathRun {
          0%{
            stroke-dashoffset: 0;
          }
          100%{
            stroke-dashoffset: -120;
          }
        }
      }
      .bzCont{
          position:absolute;
          top:0PX;
          left:50PX;
          z-index: 20;
          width:600PX;
          height: 100%;
          justify-content: space-around;
          .partBJ{
            position:relative;
            width:40PX;
            .tipsBZ{
              position:absolute;
              left:30PX;
              top:10PX;
              .light{
                width:100PX;
                .flex{
                  align-items: center;
                  margin-top:5PX;
                  img{
                    width:17PX;
                    height: 17PX;
                    margin-right:5PX;
                  }
                }
                
              }
            }
            
            .line-div{
              position:absolute;
              left:14PX;
              top:-30PX;
              .line-div-run{
                fill:transparent !important;
                animation: moveLines 1s linear infinite;;
              }
              @keyframes moveLines {
                0%{
                  stroke-dashoffset: -30;
                }
                100%{
                  stroke-dashoffset: 30;
                }
              }
            }
            .guan{
              margin:-38PX 0px 0px 9PX;
              height: 170PX;
              width:18PX;
            }
            .pump{
              margin:-3PX 0px 0px -4PX;
              height:82PX;
              width:35PX;
            }
            .status{
              margin:0PX 0px 0px 0PX;
            }
            .yxstatus{
              margin:40PX 0px 0px -15PX;
            }
          }
        }
    }
    .pondYS{
      position:absolute;
      right:145PX;
      bottom:10PX;
      width:735PX;
      height: 260PX;
      .waterType{
        position:absolute;
        left:10PX;
        top:75PX;
        width:10PX;
        font-size:26PX;
        font-weight: bold;
        z-index: 90;
      }
      .waterVal{
          position:absolute;
          bottom:0PX;
          left:0PX;
          z-index: 10;
          width:100%;
          height: 100%;
          .water{
            position:absolute;
            bottom:0PX;
            left:0PX;
            width:100%;
          }
          .value{
            position:absolute;
            bottom:0PX;
            right:0PX;
            height: 260PX;
            .number{
              position:absolute;
              bottom:0PX;
              left:0PX;
              z-index: 99;
              width:67PX;
              border-bottom:3px solid #2ABB3E;
              .val{
                text-align: center;
                padding:3PX 2PX;
                width:42PX;
                margin-left:25PX;
                margin-bottom:-1PX;
                background: #2ABB3E;
                font-weight: bold;
                font-size: 17PX;
              }
            }
          }
        }
      .path-run{
        position:absolute;
        left:-56PX;
        top:-68PX;
        height:230PX;
        .pathRun{
          animation: pathRun 2s linear infinite;
          fill:transparent !important;
        }
        @keyframes pathRun {
          0%{
            stroke-dashoffset: 0;
          }
          100%{
            stroke-dashoffset: -120;
          }
        }
      }
      .bzCont{
          position:absolute;
          top:0PX;
          left:50PX;
          z-index: 20;
          width:600PX;
          height: 100%;
          justify-content: space-around;
          .partBJ{
            position:relative;
            width:40PX;
            .tipsBZ{
              position:absolute;
              left:30PX;
              top:10PX;
              .light{
                width:100PX;
                .flex{
                  align-items: center;
                  margin-top:5PX;
                  img{
                    width:17PX;
                    height: 17PX;
                    margin-right:5PX;
                  }
                }
                
              }
            }
            
            .line-div{
              position:absolute;
              left:14PX;
              top:-30PX;
              .line-div-run{
                fill:transparent !important;
                animation: moveLines 1s linear infinite;;
              }
              @keyframes moveLines {
                0%{
                  stroke-dashoffset: -30;
                }
                100%{
                  stroke-dashoffset: 30;
                }
              }
            }
            .guan{
              margin:-38PX 0px 0px 9PX;
              height: 170PX;
              width:18PX;
            }
            .pump{
              margin:-3PX 0px 0px -4PX;
              height:82PX;
              width:35PX;
            }
            .status{
              margin:0PX 0px 0px 0PX;
            }
            .yxstatus{
              margin:40PX 0px 0px -15PX;
            }
          }
        }
    }

    .contTips{
      width: 60PX;
      height: 26PX;
      line-height: 26PX;
      text-align: center;
      background: #004DE0;
      border-radius: 13PX;
      font-size:14PX;
    }
    .waterGo{
      position:absolute;
      right:-30PX;
      bottom:45PX;
      width:10PX;
      font-size:20PX;
      font-weight: bold;
    }
    .waterType{
      position:absolute;
      left:360PX;
      bottom:165PX;
      width:10PX;
      font-size:26PX;
      font-weight: bold;
      z-index: 90;
    }
    .path-run{
      position:absolute;
      left:285PX;
      top:0PX;
      height: 350PX;
      .pathRun{
        animation: pathRun 2s linear infinite;
        fill:transparent !important;
      }
      @keyframes pathRun {
        0%{
          stroke-dashoffset: 0;
        }
        100%{
          stroke-dashoffset: -120;
        }
      }
    }
  }
  .statusYX{
    width: 68PX;
    height: 28PX;
    line-height: 28PX;
    text-align: center;
    background: #2ABB3E;
    border-radius: 14PX;
  }
  .statusTZ{
    width: 68PX;
    height: 28PX;
    line-height: 28PX;
    text-align: center;
    background: #959595;
    border-radius: 14PX;
  }
  .pumpInfo{
    position:absolute;
    top:70PX;
    left:30PX;
    width:360PX;
    background: rgba(7,45,67,0.6);
    border: 2PX solid #2C81C7;
    box-shadow: 0PX 0PX 8PX #67BDFA inset;
    padding:15PX;
    .infoLeft{
      width:100%;
      .name{
        font-size: 18PX;
        font-weight: 800;
      }
      .cont{
        margin-top:6PX;
      }
      .type{
        p{
          span{
            width:10PX;
            height: 10PX;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8PX;
          }
        }
        .success span{
          background: #39FE54;
        }
        .fail span{
          background: #959595;
        }
        .fault span{
          background: #FF2E2E;
        }
      }
    }
  }
  
}
</style>