<template>
  <div class="pureWaterSystem-index">
    <div class="center-top-button-max-box">
      <img class="position-img position-img-1" src="@/assets/ZDimages/img_bg_cdo@1x.png">
      <img class="position-img position-img-2" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-3" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-4" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-5" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-6" src="@/assets/ZDimages/img_bg_zc@1x.png">
      <img class="position-img position-img-7" src="@/assets/ZDimages/img_bg_xz@1x.png">
      <img class="position-img position-img-8" src="@/assets/ZDimages/img_bg_cdo@1x.png">
      <p class="null-p"></p>
      <p class="button-p" @click="goPage(1)">安全总览</p>
      <p class="button-p" @click="goPage(2)">资源设备</p>
      <p class="button-p" @click="goPage(3)">三维模型</p>
      <p class="button-p" @click="goPage(6)">视频监控</p>
      <p class="button-p" @click="goPage(5)">应急管控</p>
      <p class="button-check-p">纯水监测</p>
      <p class="null-p"></p>
    </div>
    <div class="left-max-big-box">
      <title-page-img-components v-if="propsData1" :propsData="propsData1"></title-page-img-components>
      <div class="max-big-box">
        <!-- Row 1: 产水量统计 -->
        <div class="grid-row row-1" v-if="propsDataA">
          <div class="grid-cell center-cell">
            <div class="cell-label">年度产水量</div>
            <div class="cell-num">{{ propsDataA.annualOutput || 0 }}<span class="num-unit">M³</span></div>
          </div>
          <div class="grid-cell center-cell">
            <div class="cell-label">当月</div>
            <div class="cell-num">
              {{ propsDataA.monthlyOutput || 0 }}<span class="num-unit">M³</span>
              <i class="num-trend trend-down">
              {{ propsDataA.isRiseMonthlyOutput ? '↑' : '↓' }}
              </i>
            </div>
          </div>
          <div class="grid-cell center-cell">
            <div class="cell-label">去年同期</div>
            <div class="cell-num">{{ propsDataA.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>
          </div>
        </div>
        <div class="big-box">
          <pureWaterPage v-if="propsDataA" :propsData="propsDataA"></pureWaterPage>
        </div>
        <div class="big-box">
          <pureWaterPage v-if="propsDataB" :propsData="propsDataB"></pureWaterPage>
        </div>
      </div>
    </div>
    <div class="right-max-big-box">
      <title-page-img-components v-if="propsData2" :propsData="propsData2"></title-page-img-components>
      <div class="max-big-box">
        <!-- Row 1: 产水量统计 -->
        <div class="grid-row row-1" v-if="propsDataC">
          <div class="grid-cell center-cell">
            <div class="cell-label">年度产水量</div>
            <div class="cell-num">{{ propsDataC.annualOutput || 0 }}<span class="num-unit">M³</span></div>
          </div>
          <div class="grid-cell center-cell">
            <div class="cell-label">当月</div>
            <div class="cell-num">
              {{ propsDataC.monthlyOutput || 0 }}<span class="num-unit">M³</span>
              <i class="num-trend trend-down">
                {{ propsDataC.isRiseMonthlyOutput ? '↑' : '↓' }}
              </i>
            </div>
          </div>
          <div class="grid-cell center-cell">
            <div class="cell-label">去年同期</div>
            <div class="cell-num">{{ propsDataC.lastYearSameMonthOutput || 0 }}<span class="num-unit">M³</span></div>
          </div>
        </div>
        <div class="big-box">
          <pureWaterPage v-if="propsDataC" :propsData="propsDataC"></pureWaterPage>
        </div>
        <div class="big-box">
          <pureWaterPage v-if="propsDataD" :propsData="propsDataD"></pureWaterPage>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  import pureWaterPage from './pageComponent/pureWaterPage.vue'
  import { waterMonitorWaterUseData,} from "@/api/index";
  export default {
    name: 'index',
    components: {
      titlePageImgComponents,
      pureWaterPage
    },
    data () {
      return {
        echartsTimer:null,
        //组件传参
        propsData1:{
          title:'理科综合实验楼C',
          checkType:false,
        },
        propsData2:{
          title:'食品楼A',
          checkType:false,
        },
        propsDataA:{
          deviceName: "理科楼（序列号158）",
          deviceStatus: 0,
          buildName: "理科综合实验楼C",
          deviceCode: "38-3b-2f-73-88-86",
          waterNo: "78102432315042",
          annualOutput: 0.0,
          monthlyOutput: 0.0,
          lastMonthOutput: 0.0,
          isRiseMonthlyOutput: false,
          lastYearSameMonthOutput: 0.0,
          tankLevel: 0.0,
          tankCapacity: 0.0,
          inletWaterTemp: 0.0,
          outletWaterTemp: 0.0,
          pipeFlowRate: 0.0,
          inletResistivity: 0.0,
          outletResistivity: 0.0,
          returnPressure: 0.0,
          maxReturnPressure: 1.0,
          minReturnPressure: 0.0
        },
        propsDataB:{
          deviceName: "理科楼（序列号157）",
          deviceStatus: 0,
          buildName: "理科综合实验楼C",
          deviceCode: "98-f1-8a-16-78-22",
          waterNo: "78102432315042",
          annualOutput: 0.0,
          monthlyOutput: 0.0,
          lastMonthOutput: 0.0,
          isRiseMonthlyOutput: false,
          lastYearSameMonthOutput: 0.0,
          tankLevel: 0.0,
          tankCapacity: 0.0,
          inletWaterTemp: 0.0,
          outletWaterTemp: 0.0,
          pipeFlowRate: 0.0,
          inletResistivity: 0.0,
          outletResistivity: 0.0,
          returnPressure: 0.0,
          maxReturnPressure: 1.0,
          minReturnPressure: 0.0
        },
        propsDataC:{
          deviceName: "食品楼（序列号160）",
          deviceStatus: 0,
          buildName: "食品楼A",
          deviceCode: "9c-b9-f7-f5-de-b3",
          waterNo: "78102432315062",
          annualOutput: 0.0,
          monthlyOutput: 0.0,
          lastMonthOutput: 0.0,
          isRiseMonthlyOutput: false,
          lastYearSameMonthOutput: 0.0,
          tankLevel: 0.0,
          tankCapacity: 0.0,
          inletWaterTemp: 0.0,
          outletWaterTemp: 0.0,
          pipeFlowRate: 0.0,
          inletResistivity: 0.0,
          outletResistivity: 0.0,
          returnPressure: 0.0,
          maxReturnPressure: 1.0,
          minReturnPressure: 0.0
        },
        propsDataD:{
          deviceName: "食品楼（序列号155）",
          deviceStatus: 0,
          buildName: "食品楼A",
          deviceCode: "58-73-e7-09-ff-0d",
          waterNo: "78102432315062",
          annualOutput: 0.0,
          monthlyOutput: 0.0,
          lastMonthOutput: 0.0,
          isRiseMonthlyOutput: false,
          lastYearSameMonthOutput: 0.0,
          tankLevel: 0.0,
          tankCapacity: 0.0,
          inletWaterTemp: 0.0,
          outletWaterTemp: 0.0,
          pipeFlowRate: 0.0,
          inletResistivity: 0.0,
          outletResistivity: 0.0,
          returnPressure: 0.0,
          maxReturnPressure: 1.0,
          minReturnPressure: 0.0
        },
      }
    },
    created(){

    },
    mounted(){
      this.waterMonitorWaterUseData();
      this.timeFunction();
    },
    methods:{
      //页面切换
      goPage(type){
        this.$parent.pageCheck(type);
      },
      //时间定时器
      timeFunction(){
        let self = this;
        this.echartsTimer = window.setInterval(showTime, 180000);
        function showTime() {
          self.waterMonitorWaterUseData();
        }
      },
      waterMonitorWaterUseData(){
        waterMonitorWaterUseData({}).then(response => {
          for(let i=0;i<response.data.length;i++){
            // for(let o=0;o<response.data[i].pureWaterMonitorVOList.length;o++){
            //   if(response.data[i].pureWaterMonitorVOList[o].deviceCode == '9c-b9-f7-f5-de-b3'){
            //     response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
            //   }else if(response.data[i].pureWaterMonitorVOList[o].deviceCode == '58-73-e7-09-ff-0d'){
            //     response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/shipinlou.png')
            //   }else if(response.data[i].pureWaterMonitorVOList[o].deviceCode == '98-f1-8a-16-78-22'){
            //     response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
            //   }else if(response.data[i].pureWaterMonitorVOList[o].deviceCode == '38-3b-2f-73-88-86'){
            //     response.data[i].pureWaterMonitorVOList[o].deviceImg = require('@/assets/ZDimages/pureWater/likelou.png')
            //   }
            // }
            if(i === 0){
              this.$set(this,'propsData1',{
                title:response.data[i].buildName
              });
              for(let o=0;o<response.data[i].pureWaterMonitorVOList.length;o++){
                if (o === 0){
                  this.$set(this,'propsDataA',response.data[i].pureWaterMonitorVOList[o]);
                } else if(o === 1){
                  this.$set(this,'propsDataB',response.data[i].pureWaterMonitorVOList[o]);
                }
              }
            }else if(i === 1){
              this.$set(this,'propsData2',{
                title:response.data[i].buildName
              });
              for(let o=0;o<response.data[i].pureWaterMonitorVOList.length;o++){
                if (o === 0){
                  this.$set(this,'propsDataC',response.data[i].pureWaterMonitorVOList[o]);
                } else if(o === 1){
                  this.$set(this,'propsDataD',response.data[i].pureWaterMonitorVOList[o]);
                }
              }
            }
          }
        });
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .pureWaterSystem-index{
    height:1409px;
    padding:0 60px;
    display: flex;
    .center-top-button-max-box{
      width:911px;
      position: absolute;
      left:50%;
      margin:0 -445px;
      height:60px;
      display: flex;
      .position-img-1{
        position:absolute;
        top:0;
        left:-74px;
      }
      .position-img-2{
        position:absolute;
        top:0;
        left:9px;
      }
      .position-img-3{
        position:absolute;
        top:0;
        left:154px;
      }
      .position-img-4{
        position:absolute;
        top:0;
        left:300px;
      }
      .position-img-5{
        position:absolute;
        top:0;
        left:446px;
      }
      .position-img-6{
        position:absolute;
        top:0;
        left:592px;
      }
      .position-img-7{
        position:absolute;
        top:0;
        left:740px;
      }
      .position-img-8{
        position:absolute;
        top:0;
        left:888px;
      }
      .null-p{
        flex:1;
      }
      .button-p{
        z-index:5;
        cursor: pointer;
        font-family: Source Han Sans, Source Han Sans;
        width:145px;
        font-size:24px;
        font-weight:700;
        line-height:60px;
        text-align: center;
        background: -webkit-linear-gradient(0deg, #FFFFFF, #FFFFFF); /* Chrome, Safari */
        background: linear-gradient(0deg, #FFFFFF, #FFFFFF); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 其他浏览器 */
      }
      .button-check-p{
        z-index:5;
        cursor: pointer;
        font-family: Source Han Sans, Source Han Sans;
        width:145px;
        font-weight:700;
        font-size:24px;
        line-height:24px;
        height:24px;
        margin-top:18px;
        text-align: center;
        background: -webkit-linear-gradient(0deg, #34e4ff, #FFFFFF); /* Chrome, Safari */
        background: linear-gradient(0deg, #34e4ff, #FFFFFF); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 其他浏览器 */
      }
    }
    .left-max-big-box{
      width:1280px;
      margin-top:90px;
      height:1235px;
    }
    .right-max-big-box{
      width:1280px;
      margin-top:90px;
      margin-left:37px;
      height:1235px;
    }
    .max-big-box{
      width:1280px;
      height:1172px;
      .big-box{
        height:472px;
      }
      .big-box:nth-child(2){
        margin-top:40px;
      }

      /* ===== 右侧数据网格面板 ===== */

      /* --- 行 --- */
      .grid-row {
        margin-top:40px;
        border: 1px solid #00E6FF;
        display: flex;
        /*border-bottom: 1px solid rgba(0,230,255,0.4);*/
        &:last-child { border-bottom: none; }
      }

      /* --- 单元格通用 --- */
      .grid-cell {
        position: relative;
        overflow: hidden;
        flex: 1;
        /*border-right: 1px solid rgba(0,230,255,0.4);*/
        box-sizing: border-box;
        &:last-child { border-right: none; }
      }

      /* 居中单元格 */
      .center-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
      }

      /* 图表单元格 */
      .chart-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 6px 4px;
        .echart-box {
          flex: 1;
          width: 100%;
        }
      }
      .chart-cell:nth-child(1){
        padding: 38px 6px 4px;
      }

      /* 左对齐单元格 */
      .left-cell {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 14px 22px;
      }

      /* --- 标签 --- */
      .cell-label {
        font-size: 18px;
        color: #FFFFFF;
        letter-spacing: 1px;
        margin-bottom: 10px;
        flex-shrink: 0;
        position: absolute;
        top:1px;
        left:0;
        width:400px;
        text-align: center;
        line-height:40px;
        background-color: #052628;
      }

      /* --- 数值 --- */
      .cell-num {
        margin-top:30px;
        font-size: 32px;
        font-weight: 700;
        color: #00E6FF;
        font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
        display: flex;
        align-items: baseline;
        line-height: 1;

        .num-unit {
          font-size: 22px;
          font-weight: 700;
          margin-left: 2px;
          color: #00E6FF;
        }

        .num-trend {
          font-style: normal;
          font-size: 16px;
          margin-left: 4px;
          font-weight: 700;
          &.trend-up   { color: #FF4D4F; }
          &.trend-down { color: #52C41A; }
        }
      }

      /* ====== Row 1: 产水量统计 ====== */
      .row-1 {
        height: 148px;
        flex-shrink: 0;
        margin-left:86px;
      }

      /* ====== Row 2: 仪表盘 ====== */
      .row-2 {
        height: 224px;
        flex-shrink: 0;

        .cell-label {
          margin-bottom: 4px;
        }
      }

      /* ====== Row 3: 其他指标 ====== */
      .row-3 {
        flex: 1;

        .cell-label {
          margin-top: 20px;
        }
        /* 管网流量 */
        .num-flow {
          font-size: 28px;
          margin-bottom: 12px;
          margin-top:60px;
          margin-left:60px;
        }

        .flow-track {
          width: 100%;
          height: 8px;
          background: rgba(0,230,255,0.1);
          border-radius: 4px;
          overflow: hidden;

          .flow-bar {
            height: 100%;
            background: linear-gradient(90deg, #15827C, #00E6FF);
            border-radius: 4px;
            transition: width 0.4s;
          }
        }

        /* 水质电阻率 */
        .max-resist-line{
          border:1px solid #00E6FF;
          padding:20px 10px;
          margin-top:60px;
          border-radius:6px;
        }
        .resist-line {
          display: flex;
          align-items: center;
          margin-bottom: 14px;
          &:last-of-type { margin-bottom: 0; }

          .resist-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-right: 8px;
            display: inline-block;
            font-style: normal;
          }

          .dot-green  { background: #1890FF; }
          .dot-yellow { background: #52C41A; }

          .resist-key {
            font-size: 20px;
            color: #FFFFFF;
            margin-right: 4px;
            white-space: nowrap;
          }

          .resist-val {
            font-size: 22px;
            font-weight: 700;
            color: #00E6FF;
            font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
            margin-right: 4px;
            line-height: 1;
          }
        }

        /* 回水压力 */
        .max-resist-line-2{
          border:1px solid #00E6FF;
          padding:12px 10px;
          margin-top:60px;
          border-radius:6px;
        }
        .num-pressure {
          margin-bottom: 8px;
          color:#00E6FF;
          text-align: center;
          font-size: 22px;
          font-weight: 700;
        }

        .pressure-sub {
          text-align: center;
          font-size: 18px;
          color: rgba(255,255,255,0.55);
          line-height:24px;
        }
      }
    }
  }
</style>
