<template>
  <div id="bSCenter">
<!--      <span class="text">传感器在线信息</span>-->
      <div class="body-box">
        <p slot="title" class="text">传感器在线信息</p>
<!--        <dv-scroll-board  :config="config" />-->
        <Table  :row-class-name="rowClassName" max-height="290" :columns="config.columns" :data="config.data" :border="false"></Table>
      </div>
  </div>
</template>

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

export default {
  // data() {
  //   return {
  //     config: {
  //       header: ['设备名称', '传感器名称','传感器状态'],
  //       data: [],
  //       rowNum: 7, //表格行数
  //       headerHeight: 45,
  //       headerBGC: '#f0f2f3', //表头
  //       oddRowBGC: '#f1f1f1', //奇数行
  //       evenRowBGC: '#ffffff', //偶数行
  //       index: false,
  //       columnWidth: [220, 160, 150],
  //       align: ['center','center','center'],
  //       waitTime:31536000000,
  //     },
  //     url: {
  //       querySensorStatus: "/device/buDevice/querySensorStatus",
  //     },
  //     // currentIndex: 0, // 当前显示的行索引
  //   }
  // },
  data() {
    return {
      rowStyleOption: {
        stripe: true,
      },
      config:{
        columns: [
          {
            key: "deviceName",
            title: "设备名称",
            width: 220,
            align: "center",
          },
          {
            key: "name",
            title: "传感器名称",
            // width: 300,
            align: "center",
          },
          {
            key: "sensorStatusName",
            title: "传感器状态",
            // width: 300,
            align: "center",
          },
        ],
        data: [],
      },

      url: {
        querySensorStatus: "/device/buDevice/querySensorStatus",
      },
    };
  },
  // mounted () {
  //   let that = this
  //   this.config.data = [];
  //   that.get()
  //   // 定时请求数据
  //   this.timer = setInterval(this.get, 1000 * 60 * 10)
  //   this.timer = setInterval(this.get, 5000)
  // },

  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.querySensorStatus, {}, 'get').then((res) => {
          debugger
          const { config } = this
          this.config.data = res.result
          this.config = { ...this.config }
        })
    }
  },
  // beforeDestroy () {
  //   clearInterval(this.timer)
  // }
}
</script>

<style lang="scss">
//$box-height: 400px;
//$box-width: calc(40%);
#bSCenter {
    padding: 5px;
    //height: 400px;
    //width: calc(40%);
    border-radius: 5px;
  .ivu-table .demo-table-info-row td{
    background-color: #ffffff;
    height: 40px;
    color: #000000;
    font-size: 14px;
  }
  .ivu-table .demo-table-error-row td{
    background-color: #f1f1f1;
    height: 40px;
    color: #000000;
    font-size: 14px;
  }
  .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;
  }
  .ivu-table-wrapper {
    border: none;
  }
  .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}

//  padding: 5px;
//  height: 400px;
//  width: calc(40%);
//  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;
//  }
//
//  .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>
