<template>
  <div class="request" style="padding:10px">
     <div>
     <el-button
      type="primary"
      @click="load()"
      size="medium"
      style="margin-bottom: 15px"
    >
      刷新
    </el-button>
   </div>
    <el-table
    v-loading="loading"
      border
      :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
      stripe
      style="width: 100%"
      height="490px"
    >
    <el-table-column label="序号"
      align="center"
      width="50px"
      type="index">
    </el-table-column>

      <el-table-column prop="key" align="center" label="参数"> </el-table-column>
      <el-table-column prop="description" align="center" label="描述">
      </el-table-column>
      <el-table-column prop="value" align="center" label="当前值"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currpage"
      :page-sizes="[10, 100, 200, 300, 400]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      style="position: absolute; bottom: 0"
    >
    </el-pagination>
  </div>
</template>

<script>
import portal from '@/api/portal.js'
export default {
  data() {
    return {
      msg: '2021年06月16日 10时05分16秒',
      tableData: [],
      currpage: 1,
      pagesize: 10,
      loading:true
    }
  },
  created() {
    this.loadRedisInfo()
  },
  methods: {
    loadRedisInfo() {
      portal.getCPU().then((res) => {
        this.tableData = res
        this.loading=false
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currpage = val
    },
    load(){
      this.loadRedisInfo()
    }
  },
}
</script>

<style lang="scss" scoped>
/deep/ .ht-table {
  height: 500px !important;
  max-height: 500px !important;
}
/deep/ .el-alert__content {
  display: flex !important;
  align-items: baseline;
  div {
    margin-left: 20px;
    font-size: 14px;
    cursor: pointer;
    color: #1890ff;
  }
}
/deep/ .el-alert {
  align-items: flex-end;
  .el-alert__icon.is-big {
    font-size: 20px;
    width: 20px;
  }
}
/deep/.el-table th {
  background: #eee !important;
  border-bottom: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
}
/deep/.el-table th > .cell {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: 700;
  color: #3c4353;
}
/deep/.el-button--mini{
  width: 56px;
  height: 31px;
}
.request{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/deep/ .el-pagination{
  width: auto;
  background: #fff;
  position: static !important;
  margin-left: auto;
  padding: 5px 5px;
}
</style>