<template>
  <div class="exhibition-energy">
    <div class="title">
      <section>
        <h4 class="base" v-show="exhibitionEnergy.firstName">{{exhibitionEnergy.firstName}}</h4>
        <div v-if="exhibitionEnergy.dynamic.length">
          <div v-for="(item,index) in exhibitionEnergy.dynamic" :key="index" class="table-dynamic">
            <div class="table-title">{{item.InfoPointName}}：</div>
            <div>
              <p>表号功能号 {{item.value}}</p>
              <p>{{item.data ? item.data :item.error}} {{item.Unit}}</p>
              <p>{{formatDate(item.receivetime)}}</p>
            </div>
          </div>
        </div>
         <div v-else style="text-align: center;margin-top: 200px">暂无数据</div>
      </section>
    </div>
  </div>
</template>

<script>
  export default {
    name: "exhibitionEnergy",
    props: ['exhibitionEnergy'],
    methods:{
      formatDate(str) {
        return str ? str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2) + ":" +str.substr(10,2) + ":"+str.substr(12,2) :'--'
      }
    }
  }
</script>

<style scoped lang="less">
  .exhibition-energy {
    .base {
      margin: 10px;
      font-weight: 600;
      text-indent: 10px;
      border-bottom: 1px dashed #eee;
    }

    .table-dynamic {
      overflow: hidden;
      height: 85px;
      width: 100%;
      margin: 5px 0;
      padding-left: 20px;
      box-sizing: border-box;
    }

    .table-title {
      float: left;
      max-width: 200px;
      width: 100px;
      height: 95px;
    }
  }
</style>
