<template>
  <!-- 泵站运行工况图 -->
  <div class="pumpGKT">
    <!-- 信息展示 -->
    <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>
        <div class="infoRight">
          <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">{{ JSON.parse(pumpObj.rainpump).collectionOut }}</div>

      <!-- 雨水池、污水池 -->
      <div class="waterType">雨水池</div>

      <!-- 大水管水流动效 -->
      <div class="path-run" v-if="mainWater">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="1056"
          height="350"
          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,393L0,10C0,4.48 4.48,0 10,0L1229,0C1234.52,0 1239,4.48 1239,10L1239,393 "
            class="pathRun"
            stroke="#ff8500"
            fill="transparent"
          ></path>
        </svg>
      </div>

      <!-- 格栅机 -->
      <div class="gsjCont flex">
        <div class="partGsj" v-for="(item, index) in gsjList" :key="index">
          <div class="contTips">{{ index + 1 }}#格栅机</div>
          <img src="@/assets/newImgs/pumpGY/gsjDefault.png" alt="格栅机停止状态" v-if="item.status == '运行'" />
          <img src="@/assets/newImgs/pumpGY/gsjMove.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 class="pumpBZ">
        <!-- 水流和液位值 -->
        <div class="waterVal">
          <img class="water" src="@/assets/newImgs/pumpGY/water.png" :style="{ height: (realYW / 10.5) * 384 + 'px' }" alt="水位" />
          <div class="value">
            <img src="@/assets/newImgs/pumpGY/gauge.png" alt="水尺" />
            <div class="number" :style="{ bottom: (realYW / 10.5) * 384 + 'px' }">
              <div class="val">{{ realYW }}</div>
            </div>
          </div>
        </div>
        <!-- 泵 -->
        <div class="flex bzCont">
          <div class="partBJ" v-for="(item, index) in pumpList" :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: 290px; width: 24px"
              >
                <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>
import { realtimeDataList } from '@/api/scada/monitor';

const { proxy } = getCurrentInstance();
const pumpObj = ref({});
const detailObj = ref({});
const pumpList = ref([]); //泵机
const gsjList = ref([]); //格栅机
const realYW = ref(''); //实时液位
const mainWater = ref(false); //大水管动效
const timer = ref(null);

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

// 获取数据
function getData() {
  let params = {
    stationCode: pumpObj.value.pumpCode, //'BZKFDJG'
  };
  realtimeDataList(params).then(res => {
    let datas = res.data || {};
    pumpList.value = [];
    detailObj.value = datas;
    realYW.value = detailObj.value['BZKFDJG-YW'] || detailObj.value['BZKFHYG-YE'] || 0.2; //实时液位
    for (let i in datas) {
      // 添加泵机数据
      if (i.includes('QSB-YX') || i.includes('YSB-YX') || i.includes('RUN')) {
        if (datas[i] == '0') {
          datas[i] = '停止';
        } else if (datas[i] == '1') {
          datas[i] = '运行';
        }
        pumpList.value.push({ status: datas[i], dl: '', hour: '' });
      }
      // 大水管动效判断
      pumpList.value &&
        pumpList.value.filter(item => {
          if (item.status == '运行') {
            mainWater.value = true;
          } else {
            mainWater.value = false;
          }
        });
      // 添加格栅机数据
      if (i.includes('QSB-GSJ')) {
        gsjList.value.push({ status: datas[i] });
      }
    }
  });
}

onMounted(() => {
  if (pumpObj.value.pumpCode == 'hdbz') {
    // 假数据，演示用
    realYW.value = 5.19;
    pumpList.value = [
      { status: '运行', dl: '88.1A', hour: '33:32:20' },
      { status: '运行', dl: '78.1A', hour: '33:32:20' },
      { status: '运行', dl: '79.1A', hour: '51:30:20' },
      { status: '运行', dl: '45.1A', hour: '04:32:20' },
      { status: '停止', dl: '', hour: '' },
    ];
    mainWater.value = true;
    pumpObj.value.rainpump = JSON.stringify({ collectionOut: '东护城河' });
    detailObj.value.tt = '2024-08-20 12:20:32';
  } else {
    getData();
    // 定时刷新
    timer.value = setInterval(() => {
      getData();
    }, 5 * 60 * 1000);
  }
});

onBeforeUnmount(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
// prettier-ignore
.pumpGKT {
  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: 460PX;
    background: url('@/assets/newImgs/pumpGY/pumpBg.png') no-repeat;
    background-size:100% 100%;
    .pumpBZ{
      position:absolute;
      bottom:0PX;
      left:345PX;
      width:935PX;
      height: 100%;
      .bzCont{
        position:absolute;
        bottom:0PX;
        left:50PX;
        z-index: 20;
        width:820PX;
        height: 100%;
        justify-content: space-around;
        .partBJ{
          position:relative;
          width:50PX;
          .tipsBZ{
            position:absolute;
            left:30PX;
            top:90PX;
            .light{
              width:100PX;
              .flex{
                align-items: center;
                margin-top:5PX;
                img{
                  width:17PX;
                  height: 17PX;
                  margin-right:5PX;
                }
              }
              
            }
          }
          .guan{
            margin:25PX 0px 0px 0PX;
          }
          .line-div{
            position:absolute;
            left:5PX;
            top:25PX;
            .line-div-run{
              fill:transparent !important;
              animation: moveLines 1s linear infinite;;
            }
            @keyframes moveLines {
              0%{
                stroke-dashoffset: -30;
              }
              100%{
                stroke-dashoffset: 30;
              }
            }
          }
          .pump{
            margin:-3PX 0px 0px -20PX;
          }
          .status{
            margin:0PX 0px 0px -8PX;
          }
          .yxstatus{
            margin:40PX 0px 0px -20PX;
          }
        }
      }
      .waterVal{
        position:absolute;
        bottom:10PX;
        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: 384PX;
          .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;
            }
          }
        }
      }
    }
    .gsjCont{
      position:absolute;
      bottom:0PX;
      left:10PX;
      width:260PX;
      height: 100%;
      justify-content: space-around;
      .partGsj{
        text-align: center;
        .contTips{
          margin:90PX 0PX 10PX 15PX;
        }
        img{
          width:107PX;
          height: 252PX;
        }
        .status{
          margin:40PX 0PX 0PX -5PX;
        }
        .yxstatus{
          margin:40PX 0PX 0PX 15PX;
        }
      }
    }

    .contTips{
      width: 78PX;
      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{
    width:660PX;
    height: 140PX;
    background: rgba(7,45,67,0.6);
    border: 2PX solid #2C81C7;
    box-shadow: 0PX 0PX 8PX #67BDFA inset;
    padding:15PX;
    .infoLeft{
      width:60%;
      .name{
        font-size: 18PX;
        font-weight: 800;
      }
      .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;
        }
      }
    }
    .infoRight{
      flex:1;
      .cont{
        margin-bottom:5px;
      }
    }
  }
  
}
</style>