<template>
  <div id="bECenter">
<!--    <icon name="chart-line" class="text-icon"></icon>-->
<!--    <span class="text">设备状态实时数据</span>-->
    <div class="body-box">
      <p slot="title" class="text">设备状态实时数据</p>
      <Table stripe :row-class-name="rowClassName" max-height="290" :columns="config.columns" :data="config.data" :border="false"></Table>
      <!--      <dv-scroll-board :config="config" style="width: 100%" />-->
    </div>
  </div>
</template>

<script>
import {getAction} from "@api/manage";

export default {
  name: "bECenter",
  // data() {
  //   return {
  //     config: {
  //       header: ['设备名称','采集时间','U相电流(A)','V相电流(A)','W相电流(A)','U相电压(V)','V相电压(V)','W相电压(V)','总有功功率(kW)',
  //         '总无功功率(kW)','总功率因数(P/S)','频率(Hz)'],
  //       data: [],
  //       rowNum: 7, //表格行数
  //       headerHeight: 45,
  //       headerBGC: '#f0f2f3', //表头
  //       oddRowBGC: '#f1f1f1', //奇数行
  //       evenRowBGC: '#ffffff', //偶数行
  //       index: false,
  //       columnWidth: [220,160,130,130,130,130,130,130,130,130,130,130],
  //       align: ['center','center','center','center','center','center','center','center','center','center','center','center'],
  //       waitTime:31536000000,
  //       // overflow:'auto',
  //       // scroll: {
  //       //   step: 10, // 滚动步长
  //       //   delay: 100, // 滚动延迟
  //       //   smooth: true // 平滑滚动
  //       // },
  //     },
  //     url: {
  //       getElectricData: "/energy/buElectric/getElectricData",
  //     },
  //   }
  // },
  // mounted () {
  //   let that = this
  //   that.get()
  //   // 定时请求数据
  //   this.timer = setInterval(this.get, 1000 * 60 * 10)
  // },
  data() {
    return {
      config:{
        rowStyleOption: {
          // stripe: true,
        },
        columns: [
          {
            key: "deviceName",
            title: "设备名称",
            width: 230,
            align: "center",
          },
          {
            key: "createTime",
            title: "采集时间",
            width: 180,
            align: "center",
          },
          {
            key: "udl",
            title: "U相电流(A)",
            // width: 130,
            align: "center",
          },
          {
            key: "vdl",
            title: "V相电流(A)",
            // width: 130,
            align: "center",
          },
          {
            key: "wdl",
            title: "W相电流(A)",
            // width: 130,
            align: "center",
          },
          {
            key: "udy",
            title: "U相电压(V)",
            // width: 130,
            align: "center",
          },
          {
            key: "vdy",
            title: "V相电流压(V)",
            // width: 200,
            align: "center",
          },
          {
            key: "wdy",
            title: "W相电流压(V)",
            // width: 200,
            align: "center",
          },
          {
            key: "activePower",
            title: "总有功功率(kW)",
            // width: 200,
            align: "center",
          },
          //假数
          // {
          //   key: "tem",
          //   title: "温度(℃)",
          //   // width: 200,
          //   align: "center",
          // },
        ],
        data: [],
      },

      url: {
        getElectricData: "/energy/buElectric/getElectricData",
      },
    };
  },
  created() {
    this.get()
  },
  methods: {
    rowClassName (row, index) {
      if (index %2) {
        return 'demo-table-error-row';
      } else{
        return 'demo-table-info-row';
      }
      return '';
    },
    get(){
      getAction(this.url.getElectricData, {}, 'get').then((res) => {
        if(res.result.length>0){
          this.config.data = res.result

          // this.config.data = this.config.data.map(item =>({
          // ...item,
          //   tem:18
          // tem: (Math.random() * (25 - 20 + 1)+20).toFixed(1)
          // }))

          this.config = { ...this.config }
          this.$emit('eTransmit', true)
        }else {
          this.$emit('eTransmit', false)
        }
      })
    }
  },
  // beforeDestroy () {
  //   clearInterval(this.timer)
  // }
}
</script>

<style lang="scss">
//$box-height: 400px;
//$box-width: calc(100%);
#bECenter {
  padding: 5px;
  .ivu-table .demo-table-info-row td{
    background-color: #ffffff;
    height: 40px;
    color: #000000;
    font-size: 14px;
    border: #f1f1f1;
  }
  .ivu-table .demo-table-error-row td{
    background-color: #f1f1f1;
    height: 40px;
    color: #000000;
    font-size: 14px;
    border: #f1f1f1;
  }
  .ivu-table th {
    height: 40px;
    font-size: 15px;
    background-color: #f0f2f3;
  }
  .ivu-table-header th {
    font-weight: normal;
    color: #000000;
    font-family: 'Arial', sans-serif;
  }
  .text {
    color: #000000;
    font-size: 16px;
    font-weight:bold;
    margin-top: 0;
    margin-bottom: 0;
    //text-align: center;
  }
  .ivu-table-wrapper {
    border: none;
    border-radius: 6px;
    padding-top: 5px;
  }
  .ivu-table:before{content:'';width:100%;height:0px;position:absolute;left:0;bottom:0;z-index:1}
  .ivu-table:after{content:'';width:0px;height:100%;position:absolute;top:0;right:0;z-index:3}
  .ivu-table-cell {
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    box-sizing: border-box;
  }

  //padding: 5px;
  ////height: 400px;
  ////width: calc(100%);
  //border-radius: 5px;
  //.bg-color-black {
  //  height: 400px - 10px;
  //  border-radius: 5px;
  //}
  //.text {
  //  color: #000000;
  //  font-size: 16px;
  //  font-weight:bold;
  //}
  //.header{
  //  height: 45px;
  //  font-size: 15px;
  //  width: 100%;
  //}
  //.body-box {
  //  border-radius: 5px;
  //  overflow: hidden;
  //  .dv-scroll-board {
  //    width: 100%;
  //    height: 340px;
  //    color: #0a0000;
  //  }
  //}
  //.rows {
  //  overflow-y: auto; /* 允许垂直滚动 */
  //  position: relative; /* 确保滚动条定位正确 */
  //}
  //.rows::-webkit-scrollbar {
  //  width: 10px; /* 滚动条宽度 */
  //}
  //
  //.rows::-webkit-scrollbar-track {
  //  background: #f1f1f1; /* 滚动条轨道背景色 */
  //}
  //
  //.rows::-webkit-scrollbar-thumb {
  //  background: #888; /* 滚动条滑块背景色 */
  //  border-radius: 5px; /* 滑块边角半径 */
  //}
  //
  //.rows::-webkit-scrollbar-thumb:hover {
  //  background: #555; /* 滑块鼠标悬停时背景色 */
  //}
}

</style>
