<template>
  <div class="en-table">
        <table class="ivu-table-wrapper stripe ivu-table ivu-table-border ivu-table-stripe" style="position:relative">
              <div class="">
                <table class="">
                  <colgroup></colgroup>
                  <tr class="ivu-table-row">
                    <td class="ivu-table-cell " >信息点</td>
                    <td class="ivu-table-cell" >表号功能号</td>
                    <td class="ivu-table-cell" >实时数据</td>
                    <td class="ivu-table-cell" >曲线变化</td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td">逐时用电功率</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.ElecConsumP || '--'}} </td>
                    <td class="ivu-table-cell" >{{ ElecConsumPData || '--'}} kW</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.ElecConsumP" class="look-btn" @click="getBoundData(roomInfo.infos.ElecConsumP)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td" >逐时用燃气量</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.GasConsumP || '--'}}</td>
                    <td class="ivu-table-cell" >{{GasConsumPData || '--'}} m³/h</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.GasConsumP" class="look-btn" @click="getBoundData(roomInfo.infos.GasConsumP)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td">燃气压力</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.GasPress || '--'}}</td>
                    <td class="ivu-table-cell" >{{GasPressData || '--'}} Pa</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.GasPress" class="look-btn" @click="getBoundData(roomInfo.infos.GasPress)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td" >逐时用燃油量</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.FuelConsumP || '--'}} </td>
                    <td class="ivu-table-cell" >{{FuelConsumPData || '--'}} L/h</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.FuelConsumP" class="look-btn" @click="getBoundData(roomInfo.infos.FuelConsumP)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell ">燃油压力</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.FuelPress || '--'}}</td>
                    <td class="ivu-table-cell" >{{FuelPressData || '--'}} MPa</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.FuelPress" class="look-btn" @click="getBoundData(roomInfo.infos.FuelPress)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell ">逐时用水量</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.WaterConsumP || '--'}}</td>
                    <td class="ivu-table-cell" >{{WaterConsumPData || '--'}} m³/h</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.WaterConsumP" class="look-btn" @click="getBoundData(roomInfo.infos.WaterConsumP)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell">自来水压力</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.WaterPress || '--'}}</td>
                    <td class="ivu-table-cell" >{{WaterPressData || '--'}} MPa</td>
                    <td  class="ivu-table-cell" ><button v-if="roomInfo.infos.WaterPress" class="look-btn" @click="getBoundData(roomInfo.infos.WaterPress)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell " >逐时用热量</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.HeatConsumP || '--'}}</td>
                    <td class="ivu-table-cell" >{{HeatConsumPData || '--'}} kW</td>
                    <td  class="ivu-table-cell" ><button v-if='roomInfo.infos.HeatConsumP' class="look-btn" @click="getBoundData(roomInfo.infos.HeatConsumP)">查看</button></td>
                  </tr>
                </table>
               </div>
          </table>
          <div class="mask-bg"></div>
          <div class="mask-layout">
            <p class="box-title">详细信息<Icon type="md-close" class='close-btn' @click="closeMask"/></p>
            <alarm-charts v-if="charts" :charts='charts'></alarm-charts>
          </div>
  </div>
</template>

<script>
import axios from 'axios'
import {formatTime, amendTime, date} from '../../tools/formatTime.js'
import alarmCharts from '../main/alarmChart'
export default {
  components: {
    alarmCharts
  },

  mixins: [],

  props: {
    roomInfo: {
      type: Object
    },
    isShowChange: {
      type: Boolean
    }
  },

  data () {
    return {
      ElecConsumPData: "--",
      GasConsumPData: "--",
      GasPressData: "--",
      FuelConsumPData: "--",
      FuelPressData: "--",
      WaterConsumPData: "--",
      WaterPressData: "--",
      HeatConsumPData: "--",
      charts: []
    }
  },

  computed: {

  },

  mounted () {
    this.$nextTick(function () {
      this.getCurrentData()
    })
  },
  watch: {
    isShowChange (newv, oldv) {
      if (newv) {
        this.changeDisplayNone()
      } else {
        this.changeDisplayBlock()
      }
    }
  },
  methods: {
    getCurrentData () {
      let params = {
        criterias: [
          {
            id: this.roomInfo.id,
            code: "ElecConsumP"
          },
          {
            id: this.roomInfo.id,
            code: "GasConsumP"
          },
          {
            id: this.roomInfo.id,
            code: "GasPress"
          },
          {
            id: this.roomInfo.id,
            code: "FuelConsumP"
          },
          {
            id: this.roomInfo.id,
            code: "FuelPress"
          },
          {
            id: this.roomInfo.id,
            code: "WaterConsumP"
          },
          {
            id: this.roomInfo.id,
            code: "WaterPress"
          },
          {
            id: this.roomInfo.id,
            code: "HeatConsumP"
          }
        ]
      }
      axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          let content = data.Content
          content.forEach(el => {
            if (el.code == 'ElecConsumP') {
              this.ElecConsumPData = el.data
            }
            if (el.code == 'GasConsumP') {
              this.GasConsumPData = el.data
            }
            if (el.code == 'GasPress') {
              this.GasPressData = el.data
            }
            if (el.code == 'FuelConsumP') {
              this.FuelConsumPData = el.data
            }
            if (el.code == 'FuelPress') {
              this.FuelPressData = el.data
            }
            if (el.code == 'WaterConsumP') {
              this.WaterConsumPData = el.data
            }
            if (el.code == 'WaterPress') {
              this.WaterPressData = el.data
            }
            if (el.code == 'HeatConsumP') {
              this.HeatConsumPData = el.data
            }
          })
        }
      })
    },
    changeDisplayNone () {
      let arr = document.querySelectorAll('.en-table .test')
      arr.forEach(i => {
        if (i.innerHTML.includes('--')) {
          i.parentNode.style.display = 'none'
        }
      })
    },
    changeDisplayBlock () {
      let arr = document.querySelectorAll('.en-table .test')
      arr.forEach(i => {
        if (i.innerHTML.includes('--')) {
          i.parentNode.style.display = 'table-row'
        }
      })
    },
    closeMask () {
      document.querySelector(".mask-bg").style.display = 'none'
      document.querySelector(".mask-layout").style.display = 'none'
    },
    // 得到图的数据
    getBoundData (code) {
      document.querySelector(".mask-bg").style.display = 'block'
      document.querySelector(".mask-layout").style.display = 'block'
      let period = "5min"
      let receivetime = {
        $gte: date(amendTime(Date.parse(new Date()) - 24 * 60 * 60 * 60 * 30)),
        $lt: date(amendTime(Date.parse(new Date())))
      }
      let params = {
        criteria: {
          id: this.roomInfo.id,
          code: code, // 信息点编码
          period: period,
          receivetime: receivetime
        }
      }
      axios.post(`/data-platform-3/data-platform-3/hisdata/query_period_data?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.charts = data.Content
          this.charts.forEach(el => {
            el.time = formatTime(el.data_time)
            el.value = parseInt(el.data_value)
          })
        }
      })
    }
  }

}
</script>

<style scoped lang="less" >
.en-table {
    width:95%;
    margin-bottom: 38px;
    table{
      width: 100%;
      font-size: 14px;
    }
    tr:nth-child(2n)>td{
        background: #f5f5f5;
    }
    td {
        width:30%;
        .look-btn{
            color:#6682E6;
            background:none;
        }
    }
    .mask-bg {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background:rgba(0, 0, 0, .6);
      display: none;
    }
   .mask-layout{
      width: 680px;
      height: 480px;
      background: #fff;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.12);
      border-radius: 4px;
      z-index: 999;
      position: fixed;
      top: 230px;
      left: 50%;
      margin-left: -360px;
      display: none;
      .box-title {
        line-height: 60px;
        height: 60px;
        font-size: 16px;
        color: #FFFFFF;
        background: #728DEE;
        padding-left: 40px;
        margin-bottom: 0;
        // .box-header{
        //     display: inline-block;
        //     width: 503px;
        //     height: 60px;
        //     overflow: hidden;
        //     text-overflow: ellipsis;
        //     white-space: nowrap;
        // }
        .close-btn{
            float: right;
            margin-top: 20px;
            margin-right: 14px;
            cursor: pointer;
        }
    }
    }
}
</style>
