<template>
  <div id="RealTime">
    <div class="formBox">
       <el-input v-model="username" placeholder="请输入账号"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <!--<span id="search" @click="search" v-if="power == 'admin'">
				删除
      </span>-->
    </div>
    <div class="tableBox">
      <table>
        <tr class="thead">
          <th>账号</th>
          <th>IP</th>
          <th>时间</th>
          <th>操作描述</th>
        </tr>
        <tr class="tbody" v-for="(item,index) in list" :key="index">
          <td>{{item.log_user_name}}</td>
          <td>{{item.log_ip}}</td>
          <td>{{item.create_time}}</td>
          <td>{{item.log_name}}</td>
        </tr>
      </table>
    </div>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "RealTime",
  data: function() {
    return {
      power: localStorage.getItem("userName"),
      username: "",
      list: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    };
  },
  methods: {
    getData() {
      let url = "/dataApi/LogCloudPlatformsController/queryPlatformsLogByPage";
      let params = {
        showCount: this.pageSize,
        currentPage: this.currentPage,
        log_user_name: this.username
      };
      axios.post(url, params).then(res => {
        this.list = res.data.data;
        this.total = res.data.totalResult;
      });
    },
    search() {
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    }
  },
  mounted: function() {
    this.getData();
  }
};
</script>

<style scoped>
#RealTime {
  width: 100%;
  height: 100%;
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
  position: relative;
}

.formBox {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
}

.formBox .el-input {
  width: 200px;
  margin: 0 10px;
}
.tableBox {
  height: calc(100% - 80px);
  /*border: #17F6C3 1px solid;*/
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.thead {
  color: white;
  font-size: 15px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
}

.tbody {
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid #0d2027;
}
.footer {
  position: fixed;
  left: 20;
  right: 20;
  bottom: 0;
  height: 35px;
}
</style>