<template>
  <div class="gwpmContent flex">
    <div class="leftTop">
      <div id="SwDiv">
        <!-- <div id="BG_BOX" ref="BgBox"></div> -->
        <div id="ST_Box">
          <!-- 水位 -->
          <div id="WaterBody" ref="WaterBodyRef">
            <span class="Font_Span" ref="WaterBodyRef_Font_Span">
              <i class="el-icon-bottom"></i>
              当前水位:{{ SJData.Z }} m <i class="el-icon-bottom"></i
            ></span>
            <span class="Water_img"></span>
          </div>
          <!-- 覆土高度 -->
          <div id="GWFT" ref="GWFTRef"></div>
          <!-- 满管水深 -->
          <div id="YJLine" ref="YJLineRef" v-show="SJData.YJ != '' && props.componentData.drainageSystem == 'rainWater'">
            <span class="Font_Span"> <i class="el-icon-bottom"></i>{{ SJData.YJ }}m 满管水深</span>
          </div>
          <!-- 溢流水位 -->
          <div id="BJLine" ref="BJLineRef" v-show="SJData.BJ != ''">
            <span class="Font_Span">溢流风险: {{ SJData.BJ }} m <i class="el-icon-bottom"></i></span>
          </div>
          <!-- 高水位 -->
          <div id="GSWLine" ref="GSWLineRef" v-show="SJData.GSW != '' && props.componentData.drainageSystem == 'rainWater'">
            <span class="Font_Span">高水位: {{ SJData.GSW }} m <i class="el-icon-bottom"></i></span>
          </div>
          <!-- 井深 -->
          <div id="JinShen">井深:{{ props.componentData.wellDepth }}m</div>
        </div>
      </div>
      <div class="gwCount flex flex-justcontent-spacebetween">
        <div class="list flex flex-v flex-justcontent-spacebetween">
          <div class="name">管径(mm):</div>
          <div class="name">警戒值:</div>
        </div>
        <div class="box flex flex-v flex-justcontent-spacebetween" :class="item.z==SJData.GJactive?'GJactive':''" v-for="(item) in SJData.GJwarningLine" :key="item.sum">
          <div class="num">{{item.sum}}</div>
          <div class="num">{{item.z}}</div>
        </div>
        <!-- <div class="box flex flex-v flex-justcontent-spacebetween">
          <div class="num">300-400</div>
          <div class="num">0.65</div>
        </div>
        <div class="box flex flex-v flex-justcontent-spacebetween">
          <div class="num">400-800</div>
          <div class="num">0.7</div>
        </div>
        <div class="box flex flex-v flex-justcontent-spacebetween">
          <div class="num">>800</div>
          <div class="num">0.75</div>
        </div> -->
      </div>
    </div>
    <div class="flex-1">
      <div id="DataInfo">
        <div class="DataInfoList flex">
          <span class="InfoListLabel">监测时间:</span><span class="InfoListValue"> {{ props.componentData.tt }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">井盖编号:</span><span class="InfoListValue"> {{ props.componentData.pointNumber }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">所在道路:</span><span class="InfoListValue"> {{ props.componentData.roadName }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">管网类型:</span
          ><span class="InfoListValue"> {{ props.componentData.pointType == 'YS' ? '雨水管网' : props.componentData.pointType == 'WS'?'污水管网':'' }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">告警类型:</span><span class="InfoListValue"> {{ props.componentData.warnInfo }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">管底埋深:</span
          ><span class="InfoListValue"> {{ props.componentData.bottomBuriedDepth }}m</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">管尾埋深:</span><span class="InfoListValue"> {{ props.componentData.endGroundDepth }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">管径:</span><span class="InfoListValue"> {{ props.componentData.diameter }}mm</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">管段长度:</span
          ><span class="InfoListValue"> {{ props.componentData.pipelineLength }}m</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">所属水系:</span><span class="InfoListValue"> {{ props.componentData.areaWater }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">站点编号:</span
          ><span class="InfoListValue"> {{ props.componentData.stCode }}</span>
        </div>
        <div class="DataInfoList flex">
          <span class="InfoListLabel">设计编号:</span
          ><span class="InfoListValue"> {{ props.componentData.stAsName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
import { nextTick } from 'vue';
const props = defineProps({
  componentData: {
    type: Object,
    default() {
      return {};
    },
  },
});

let SJData = reactive({
  AllLength: 20.99,
  Z: 10.99,
  Z_P: '50%',
  YJ: 15.99,
  YJ_P: '75%',
  BJ: 18.99,
  BJ_P: '90%',
  GSW: 2,
  GSW_P: '10%',
  szdl: '',
  warnType: '',
  pipelineType: '',
  jgbh: '',
  GJactive:'',
  GJwarningLine:[
    {
      sum:'0-300',
      z:0.55
    },
    {
      sum:'300-400',
      z:0.65
    },
    {
      sum:'400-800',
      z:0.7
    },
    {
      sum:'>800',
      z:0.75
    },
  ]
});
function  GWLevelFun(pipe){
  let sum=Number(pipe);
  let text='';
        switch (true) {
        // 管径对应的警戒值高亮
        case sum>800:
          text= 0.75
          break;
          case sum>400:
          text= 0.7
          break;
          case sum>300:
          text= 0.65
          break;
           case sum>0:
          text= 0.55
          break;
          default:
            text= ''
        }
          return text
}
onMounted(() => {});
watch(
  () => props.componentData,
  value => {
    console.log(value, '管网数据');
    nextTick(() => {
      proxy.$refs['WaterBodyRef'].style.height = value.warnZPercent;
      proxy.$refs['YJLineRef'].style.height = value.gjPercent;
      proxy.$refs['GWFTRef'].style.height = `${(
        ((Number(value.wellDepth) - Number(value.diameter) / 1000) / Number(value.wellDepth)) *
        100
      ).toFixed(2)}%`;
      proxy.$refs['BJLineRef'].style.height = value.ylfxPercent;
      proxy.$refs['GSWLineRef'].style.height = value.gswPercent;
      SJData.Z = value.pointValue; //水位
      SJData.YJ = (value.diameter / 1000).toFixed(2); //管径
      SJData.BJ = value.ylfxValue; //溢流风险
      SJData.GSW = value.gswValue; //高水位
      SJData.GJactive=GWLevelFun(value.diameter)
    });
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.gwpmContent {
  overflow: hidden;
  height: 100%;
  .leftTop {
    padding-top:40px;
    margin-left: 20px;
    width: 600px;
    overflow: hidden;
  }
  #SwDiv {
    width: 100%;
    height: 330px;
    // overflow: hidden;
    position: relative;
    background: url(@/assets/images/donghu/gwbg.png) no-repeat;
    background-size: 100% 380px;
    padding-bottom: 50px;
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background: url(@/assets/images/donghu/gwtc.png) no-repeat 0 bottom;
      background-size: 100% 50px;
      z-index: 10;
    }
    &::after {
      content: '';
      width: 166px;
      height: 20px;
      position: absolute;
      top: -16px;
      left:70px;
      background: url(@/assets/images/donghu/gwjg.png) no-repeat;
      background-size: 100% 100%;
      z-index: 10;
    }
    // #BG_BOX {
    //   width: 100%;
    //   height: 100px;
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   background: #5c4e00;
    // }

    #ST_Box {
      width: 100%;
      height: 100%;
      position: relative;

      #JinShen {
        color: rgb(255, 153, 0);
        position: absolute;
        left: 100px;
        top: -20px;
        font-size: 16px;
        z-index: 20 !important;
        color: #fff;
      }

      #WaterBody {
        position: absolute;
        left: 0;
        bottom: 0;
        background: url(@/assets/images/donghu/gws.png) no-repeat;
        background-size: 100% 100px;
        width: 100%;
        padding-top: 20px;
        box-sizing: content-box;
        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: calc(100% - 98px);
          bottom: 0;
          left: 0;
          background: #0d4ace;
        }
        .Font_Span {
          display: inline-block;
          color: white;
          position: relative;
          bottom: 20px;
          width: 260px;
          text-align: center;
        }

        .Water_img {
          display: inline-block;
          width: 160px;
        }
      }
      #GWFT {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        width: 100%;
        z-index: 10 !important;
        background: url(@/assets/images/donghu/gwft.png) no-repeat;
        background-size: 100% 100%;
      }
      #YJLine {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px dashed #efef4c;
        color: #efef4c;
        z-index: 20 !important;
        padding-right: 20px;

        .Font_Span {
          display: inline-block;
          width: 100%;
          text-align: right;
          position: relative;
          bottom: 20px;
        }
      }

      #BJLine {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px dashed #f42f2f;
        color: #f42f2f;
        z-index: 20 !important;
        padding-right: 20px;

        .Font_Span {
          display: inline-block;
          width: 100%;
          text-align: right;
          position: relative;
          bottom: 20px;
        }
      }

      #GSWLine {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px dashed rgba(42, 255, 177, 1);
        color: rgba(42, 255, 177, 1);
        z-index: 20 !important;
        padding-right: 20px;

        .Font_Span {
          display: inline-block;
          width: 100%;
          text-align: right;
          position: relative;
          bottom: 20px;
        }
      }
    }
  }
  #DataInfo {
    width: 100%;
    height: 100%;
    // background: rgba(0, 125, 142, 0.15);
    padding-right: 50px;
    .DataInfoList {
      overflow: hidden;
      margin-bottom: 10px;
      font-size: 14px;
      color: #fff;
      .InfoListLabel {
        display: block;
        width: 140px;
        text-align: right;
        line-height: 30px;
        font-weight: 400;
        color: #39f7ff;
        padding-right: 30px;
      }
      .InfoListValue {
        display: block;
        flex: 1;
        padding: 4px 20px;
        line-height: 22px;
        border: 1px solid #2c6ebd;
      }
    }
  }
  .gwCount {
    margin-top: 20px;
    padding-right: 20px;
    overflow: hidden;
    padding-left: 5px;
    .list {
      height: 94px;
      overflow: hidden;
    }
    .name {
      width: 80px;
      font-weight: 500;
      font-size: 14px;
      color: #39f7ff;
      line-height: 32px;
    }
    .box {
      width: 18%;
      height: 94px;
      overflow: hidden;
      position: relative;
      &::before {
        content: '';
        width: 14px;
        height: 23px;
        position: absolute;
        top: 50%;
        left: 50%;
        background: url(@/assets/images/donghu/dn.png) no-repeat;
        background-size: 14px 23px;
        transform: translate(-50%, -50%);
      }
    }
    .num {
      height: 32px;
      border: 1px solid #2c6ebd;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      line-height: 30px;
      text-align: center;
      overflow: hidden;
    }
    .GJactive {
      .num {
        background: #39f7ff;
      }
    }
  }
}
</style>