<template>
  <div class="en-table">
       <!-- <i-Table stripe  :columns="columns1" :data="tableData" size="large" :no-data-text="noData"></i-Table> -->
        <table class="ivu-table-wrapper ivu-table ivu-table-border ivu-table-stripe" style="position:relative">
              <div class="ov-div">
                <table class="fixed-table">
                  <colgroup></colgroup>
                  <tr class="ivu-table-row">
                    <td class="ivu-table-cell fixed-td" >信息点</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.Tdb || '--'}}</td>
                    <td class="ivu-table-cell" >{{TdbData || '--'}} ℃</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.Tdb" class="look-btn" @click="getBoundData(roomInfo.infos.Tdb)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td" >空气相对湿度</td>
                    <td class="ivu-table-cell test" >{{roomInfo.infos.RH || '--'}}</td>
                    <td class="ivu-table-cell" >{{ RHData || '--'}} %RH</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.RH" class="look-btn" @click="getBoundData(roomInfo.infos.RH)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row">
                    <td class="ivu-table-cell fixed-td" >空气密度</td>
                    <td class="ivu-table-cell test" >{{roomInfo.infos.Rou || '--'}}</td>
                    <td class="ivu-table-cell" >{{ RouData || '--'}} kg/m³</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.Rou" class="look-btn" @click="getBoundData(roomInfo.infos.Rou)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td" >空气湿球温度</td>
                    <td class="ivu-table-cell test" >{{roomInfo.infos.Twb || '--'}}</td>
                    <td class="ivu-table-cell" >{{TwbData || '--'}} ℃</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.Twb" class="look-btn" @click="getBoundData(roomInfo.infos.Twb)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td" >空气CO2浓度</td>
                    <td class="ivu-table-cell test" >{{roomInfo.infos.CO2 || '--'}}</td>
                    <td class="ivu-table-cell" >{{COData || '--'}} ppm</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.CO2" class="look-btn" @click="getBoundData(roomInfo.infos.CO2)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row" >
                    <td class="ivu-table-cell fixed-td" >空气PM2.5浓度</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos['PM2.5'] || '--'}}</td>
                    <td class="ivu-table-cell" >{{PM25Data || '--'}}</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos['PM2.5']" class="look-btn" @click="getBoundData(roomInfo.infos['PM2.5'])">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row">
                    <td class="ivu-table-cell fixed-td" >空气PM10浓度</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.PM10 || '--'}}</td>
                    <td class="ivu-table-cell" >{{PM10Data || '--'}} mg/m³</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.PM10" class="look-btn" @click="getBoundData(roomInfo.infos.PM10)">查看</button></td>
                  </tr>
                  <tr class="ivu-table-row">
                    <td class="ivu-table-cell fixed-td" >空气甲烷浓度</td>
                    <td class="ivu-table-cell test">{{roomInfo.infos.CH4 || '--'}}</td>
                    <td class="ivu-table-cell" >{{ CHData || '--'}} ppm</td>
                    <td class="ivu-table-cell" ><button v-if="roomInfo.infos.CH4" class="look-btn" @click="getBoundData(roomInfo.infos.CH4)">查看</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 {currentTime} from '../../tools/currentDate.js'
import alarmCharts from '../main/AlarmCharts'
export default {
  components: {
    alarmCharts
  },

  mixins: [],

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

  data () {
    return {
      TdbData: "--",
      RHData: "--",
      COData: "--",
      CHData: "--",
      PM25Data: "--",
      PM10Data: "--",
      TwbData: "--",
      RouData: "--",
      charts: []
    }
  },

  computed: {
  },

  mounted () {
    this.$nextTick(function () {
      this.getCurrentData()
    })
    if (this.isShowChange) {
      this.changeDisplayNone()
    } else {
      this.changeDisplayBlock()
    }
  },
  watch: {
    isShowChange (newv, oldv) {
      if (newv) {
        this.changeDisplayNone()
      } else {
        this.changeDisplayBlock()
      }
    }
  },

  methods: {
    getCurrentData () {
      let params = {
        criterias: [
          {
            id: this.roomInfo.id,
            code: "Tdb"
          },
          {
            id: this.roomInfo.id,
            code: "RH"
          },
          {
            id: this.roomInfo.id,
            code: "Rou"
          },
          {
            id: this.roomInfo.id,
            code: "Twb"
          },
          {
            id: this.roomInfo.id,
            code: "CO2"
          },
          {
            id: this.roomInfo.id,
            code: "PM2.5"
          },
          {
            id: this.roomInfo.id,
            code: "PM10"
          },
          {
            id: this.roomInfo.id,
            code: "CH4"
          }
        ]
      }
      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 == 'Tdb') {
              this.TdbData = el.data
            }
            if (el.code == 'RH') {
              this.RHData = el.data
            }
            if (el.code == 'Rou') {
              this.RouData = el.data
            }
            if (el.code == 'Twb') {
              this.TwbData = el.data
            }
            if (el.code == 'CO2') {
              this.COData = el.data
            }
            if (el.code == 'PM2.5') {
              this.PM25Data = el.data
            }
            if (el.code == 'PM10') {
              this.PM10Data = el.data
            }
            if (el.code == 'CH4') {
              this.CHData = 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,
          // id: "Sp1101080001001004013",
          code: code, // 信息点编码
          // code: "CO2"
          period: period,
          // period: "5min",
          receivetime: receivetime
          // receivetime: {
          //   $gte: "20190110000000",
          //   $lt: "20190111000000"
          // }
        }
      }
      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;
        }
      }
    }
}
</style>
