<template>
  <div class="app-container" style="padding-bottom: 0px;padding-top: 0px;">
    <h4>气夹监测系统</h4>
    <div class="filter-container" style="overflow: auto;" v-loading="loadprogress" v-if="blockShow">
      <div class="airItem">
        <p class="pText">上游气夹监测</p>
        <div class="imgBox">
          <img src="/static/bridges.jpg" alt="" style="" />
          <div class="state-info Normal" @click="change(arr1,arr1obj.txt)">
            <p class="airHumidity" v-for="item in arr1" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr2,arr2obj.txt)">
            <p class="airHumidity" v-for="item in arr2" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr3,arr3obj.txt)">
            <p class="airHumidity" v-for="item in arr3" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr4,arr4obj.txt)">
            <p class="airHumidity" v-for="item in arr4" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr5,arr5obj.txt)">
            <p class="airHumidity" v-for="item in arr5" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="state-info Normal" @click="change(arr6,arr6obj.txt)">
            <p class="airHumidity" v-for="item in arr6" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="titlText">
            <p><span></span>进气夹</p>
            <p><span class="gass"></span>排气夹</p>
          </div>
          <div class="pukou">
            浦口侧
          </div>
          <div class="jianye">
            建邺侧
          </div>
        </div>
      </div>
      <div class="airItem">
        <p class="pText">下游气夹监测</p>
        <div class="imgBox">
          <img src="/static/bridges.jpg" alt="" style="transform:rotateY(180deg);" />
          <div class="stateNormal" @click="change(arr7,arr7obj.txt)">
            <p class="airHumidity" v-for="item in arr7" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr8,arr8obj.txt)">
            <p class="airHumidity" v-for="item in arr8" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr9,arr9obj.txt)">
            <p class="airHumidity" v-for="item in arr9" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr10,arr10obj.txt)">
            <p class="airHumidity" v-for="item in arr10" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr12,arr12obj.txt)">
            <p class="airHumidity" v-for="item in arr11" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="stateNormal" @click="change(arr12,arr12obj.txt)">
            <p class="airHumidity" v-for="item in arr12" :key='item.code'>{{item.lastValue}}{{unitObj[item.unit]}}</p>
          </div>
          <div class="titlText">
            <p><span></span>进气夹</p>
            <p><span class="gass"></span>排气夹</p>
          </div>
          <div class="pukou">
            建邺侧
          </div>
          <div class="jianye">
            浦口侧
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import { byBridgeAll } from '@/utils/queryBridgeAllResource'
  export default {
    name: 'complexTable',
    data() {
      return {
        saddleObj: {},
        loadprogress: true,
        blockShow: false,
        bridgeId: '',
        arr1obj: {
          txt: '浦口侧上游排气夹',
          '7709': 0,
          '7710': 1,
          '7711': 2
        },
        arr1: [],
        arr2obj: {
          txt: '浦口侧上游进气夹',
          '7706': 0,
          '7707': 1,
          '7708': 2
        },
        arr2: [],
        arr3obj: {
          txt: '浦口侧上游上排气夹和上排气',
          '7535': 0,
          '7536': 1
        },
        arr3: [],
        arr4obj: {
          txt: '建邺侧上游上排气夹和上排气',
          '7531': 0,
          '7532': 1
        },
        arr4: [],
        arr5obj: {
          txt: '建邺侧上游进气夹',
          '7694': 0,
          '7695': 1,
          '7696': 2
        },
        arr5: [],
        arr6obj: {
          txt: '建邺侧上游排气夹',
          '7697': 0,
          '7698': 1,
          '7699': 2
        },
        arr6: [],
        arr7obj: {
          txt: '建邺侧下游排气夹',
          '7703': 0,
          '7704': 1,
          '7705': 2
        },
        arr7: [],
        arr8obj: {
          txt: '建邺侧下游进气夹',
          '7700': 0,
          '7701': 1,
          '7702': 2
        },
        arr8: [],
        arr9obj: {
          txt: '建邺侧下游上排气夹和上排气',
          '7533': 0,
          '7534': 1
        },
        arr9: [],
        arr10obj: {
          txt: '浦口侧下游上排气夹和上排气',
          '7537': 0,
          '7538': 1
        },
        arr10: [],
        arr11obj: {
          txt: '浦口侧下游进气夹',
          '7712': 0,
          '7713': 1,
          '7714': 2
        },
        arr12: [],
        arr12obj: {
          txt: '浦口侧下游排气夹',
          '7715': 0,
          '7716': 1,
          '7717': 2
        },
        arr11: [],
        unitObj: {
          '01': '℃',
          '02': '%',
          '03': 'kPa',
          '04': 'm3/h'
        }
      }
    },
    created() {
      this.bridgeId = Cookies.get('bridgeId')
      byBridgeAll(this.bridgeId, (res) => {
        this.loadprogress = false
        if (res.server.length === 0) {
          return
        }
        this.blockShow = true
        const array1 = ['', '', '']
        const array2 = ['', '', '']
        const array3 = ['', '']
        const array4 = ['', '']
        const array5 = ['', '', '']
        const array6 = ['', '', '']
        const array7 = ['', '', '']
        const array8 = ['', '', '']
        const array9 = ['', '']
        const array10 = ['', '']
        const array11 = ['', '', '']
        const array12 = ['', '', '']
        Object.keys(res['01']).forEach((key) => {
          res['01'][key].forEach((item) => {
            const code = item.code
            if (this.arr1obj[code] >= 0) {
              array1[this.arr1obj[code]] = item
            }
            if (this.arr2obj[code] >= 0) {
              array2[this.arr2obj[code]] = item
            }
            if (this.arr3obj[code] >= 0) {
              array3[this.arr3obj[code]] = item
            }
            if (this.arr4obj[code] >= 0) {
              array4[this.arr4obj[code]] = item
            }
            if (this.arr5obj[code] >= 0) {
              array5[this.arr5obj[code]] = item
            }
            if (this.arr6obj[code] >= 0) {
              array6[this.arr6obj[code]] = item
            }
            if (this.arr7obj[code] >= 0) {
              array7[this.arr7obj[code]] = item
            }
            if (this.arr8obj[code] >= 0) {
              array8[this.arr8obj[code]] = item
            }
            if (this.arr9obj[code] >= 0) {
              array9[this.arr9obj[code]] = item
            }
            if (this.arr10obj[code] >= 0) {
              array10[this.arr10obj[code]] = item
            }
            if (this.arr11obj[code] >= 0) {
              array11[this.arr11obj[code]] = item
            }
            if (this.arr12obj[code] >= 0) {
              array12[this.arr12obj[code]] = item
            }
          })
          this.arr1 = array1
          this.arr2 = array2
          this.arr3 = array3
          this.arr4 = array4
          this.arr5 = array5
          this.arr6 = array6
          this.arr7 = array7
          this.arr8 = array8
          this.arr9 = array9
          this.arr10 = array10
          this.arr11 = array11
          this.arr12 = array12
        })
      })
    },
    methods: {
      change(arr, txt) {
        const pAy = {}
        for (let i = 0; i < arr.length; i++) {
          pAy[arr[i].code] = arr[i].unit
        }
        this.$router.push({ name: 'history', query: { id: JSON.stringify(pAy), title: `${txt}历史监测` }})
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .airItem {
    border-radius: 2px;
    border: 2px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 1546px;
    margin-bottom: 10px;

    .pText {
      margin-left: 15px;
    }

    .imgBox {
      position: relative;

      .stateNormal {
        cursor: pointer;
        font-size: 14px;
        line-height: 17px;
        color: #515151;
        text-align: right;
        width: 75px;
        position: absolute;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 6px 8px 6px 0;
        border: 2px solid transparent;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        background-color: rgba(246, 250, 255, 0.8);

        &:nth-child(2) {
          top: 215px;
          left: 201px;
        }

        &:nth-child(3) {
          top: 130px;
          left: 484px;
        }

        &:nth-child(4) {
          top: 51px;
          left: 772px;
        }

        &:nth-child(5) {
          top: 51px;
          left: 1009px;
        }

        &:nth-child(6) {
          top: 132px;
          right: 290px;
        }

        &:nth-child(7) {
          top: 215px;
          right: 146px;
        }

        p {
          margin: 0;
          padding: 0;
        }
      }

      .state-info {
        cursor: pointer;
        font-size: 14px;
        line-height: 17px;
        color: #515151;
        text-align: right;
        width: 75px;
        position: absolute;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 6px 8px 6px 0;
        border: 2px solid transparent;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        background-color: rgba(246, 250, 255, 0.8);

        &:nth-child(2) {
          top: 215px;
          left: 147px;
        }

        &:nth-child(3) {
          top: 130px;
          left: 290px;
        }

        &:nth-child(4) {
          top: 51px;
          left: 458px;
        }

        &:nth-child(5) {
          top: 51px;
          left: 695px;
        }

        &:nth-child(6) {
          top: 132px;
          right: 483px;
        }

        &:nth-child(7) {
          top: 215px;
          right: 201px;
        }

        p {
          margin: 0;
          padding: 0;
        }
      }

      .titlText {
        position: absolute;
        top: 10px;
        left: 10px;

        p {
          color: #515151;

          span {
            display: inline-block;
            width: 15px;
            height: 15px;
            background-color: #00a0e9;
            border-radius: 50%;
            vertical-align: top;
            margin-right: 10px;
          }

          .gass {
            background-color: #c45995;
          }
        }
      }

      .pukou {
        position: absolute;
        top: 170px;
        height: 40px;
        width: 20px;
        left: 25px;
      }

      .jianye {
        position: absolute;
        top: 170px;
        height: 40px;
        width: 20px;
        right: 25px;
      }
    }

  }
</style>