<template>
  <div class="exhibition-energy">
    <div class="title">
      <section v-for="(val,key,i) in exhibitionEnergy.list">
        <h4 class="base">{{key}}</h4>
        <div class="table-dynamic" v-for="(value,keys,index) in val.paths">
            <div class="table-title"> {{value.InfoPointName}}：</div>
          <p :style="{'color':value.value? '' :'#F56C6C'}">{{value.value? `表号功能号：${value.value} `:'未维护'}}</p>
          <p>{{value.data ? value.data :value.error}} {{value.Unit}}</p>
          <p>{{value.receivetime ? formatDate(value.receivetime):'--'}}</p>
        </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 {
      height: 85px;
      width: 100%;
      margin: 5px 0;
      padding-left: 20px;
      box-sizing: border-box;
    }

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