<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="序号" width="50px" align="center" type="index">
      </el-table-column>
      <el-table-column
        prop="timestamp"
        align="center"
        label="请求时间"
        width="150px"
      >
        <template slot-scope="scope">
          <!-- {{ scope.row.Time | global_filter("YYYY-MM-DD HH:mm:ss") }} -->
          {{ fomart(scope.row.timestamp) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="method"
        label="请求方式"
        align="center"
        width="150px"
      >
      </el-table-column>

      <el-table-column prop="uri" align="center" label="请求URL">
      </el-table-column>
      <el-table-column
        prop="timeTaken"
        label="请求耗时"
        width="150px"
        align="center"
      ></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'
import moment from 'moment'
export default {
  data() {
    return {
      tableData: [],
      currpage: 1,
      pagesize: 10,
      loading: true,
    }
  },
  created() {
    this.loadRedisInfo()
  },
  methods: {
    loadRedisInfo() {
      portal.getRequest().then((res) => {
        this.tableData = res
        // this.tableData.map((value,key)=>{
        //   let date = moment(parseInt(value.timestamp)).format('YYYY/MM/DD hh:mm:ss')
        //   return date
        // })
        // console.log(date)
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currpage = val
    },
    load() {
      this.loadRedisInfo()
    },
    fomart(time) {
      moment.locale()
      let times = time * 1000
      times = moment(times).format('YYYY-MM-DD HH:mm:ss')
      return times
    },
  },
}
</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>