<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 class="iot_data" :style="{'color':value.value? '' :'#F56C6C'}" :title="value.value ? `${value.value}` : '未维护'">{{ value.value ? `${value.value}` : '未维护' }}</p>
          <p v-if="value.data == '0'">{{ value.data }}{{ value.Unit }}</p>
          <p v-else-if="value.data">{{ value.data }}{{ value.Unit }}</p>
          <!--          <p v-else-if="value.error">{{value.error}}</p>-->
          <el-popover
            v-else-if="value.error"
            placement="right"
            width="160"
            trigger="hover">
            <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">错误原因</p>
            <p>{{ '表号功能号不存在' }}</p>
            <div style="text-align: center; margin: 0">
              <el-button type="text" size="mini" @click="handleCopy(value.error)">复制错误信息</el-button>
            </div>
            <el-button slot="reference" type="text" style="color:#F56C6C">error</el-button>
          </el-popover>
          <p v-else>--</p>

          <p>{{value.receivetime ? formatDate(value.receivetime):'--'}}</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
  export default {
    name: "exhibitionEnergy",
    props: ['exhibitionEnergy'],
    methods:{
      formatDate(str) {
        if (str) {
          if (str.includes('-')) {
            return str
          } else {
            if (str.length > 8) {
              return str.substr(0, 4) + "-" + str.substr(4, 2) + "-" + str.substr(6, 2) + " " + str.substr(8, 2) + ":" + str.substr(10, 2) + ":" + str.substr(12, 2)
            } else if (str === 'null') {
                return '--'
            }else {
                return str.substr(0, 4) + "-" + str.substr(4, 2) + "-" + str.substr(6, 2) + " " + str.substr(8, 2)
            }
          }
        } else {
          return '--'
        }
      },
      handleCopy(data) {
        let oInput = document.createElement('input')
        oInput.value = data
        document.body.appendChild(oInput)
        oInput.select()
        document.execCommand('Copy')
        this.$message.success('复制成功')
        oInput.remove()
      },
    }
  }
</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;
    }

    .iot_data {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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