<template>
  <div class="data-box" v-loading="loading">
    <p class="meter-func">表号-功能号：{{queryParams.MeterFunc || '--'}}</p>
    <p style="margin-top:17px;">当前读数：{{newData || '--'}}</p>
    <p style="margin-bottom:17px;">最后获取时间：{{lastTime || '--'}}</p>
  </div>
</template>

<script>
import { getTabFunNumOverview } from '@/api/scan/request'

export default {
  props: {
    queryParams: {
      type: Object
    }
  },
  data() {
    return {
      loading: false,
      newData: '',
      lastTime: '',
    }
  },
  methods:{
    getNewData() {
      this.loading = true
      if(this.queryParams.MeterFunc){
        getTabFunNumOverview({MeterFunc: this.queryParams.MeterFunc}, res => {
          this.loading = false
          if(res.Content[0] && res.Content[0].Data){
            let data = res.Content[0].Data
            this.newData = data.Data==null?'':data.Data + (data.Unit?data.Unit:'')
            this.lastTime = data.Time
          }
        })
      } else {
        this.loading = false
      }
    },
  },
  watch: {
    'queryParams.MeterFunc': {
      handler(newdata, olddata) {
        this.newData = ''
        this.lastTime = ''
        this.getNewData()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
$borderColor: rgba(201, 201, 201, 1);
.data-box{
  border: 1px solid $borderColor;
  .meter-func{
    border-bottom: 1px solid $borderColor;
  }
  p{
    line-height: 35px;
    padding-left: 10px;
  }
}
</style>