<template>
  <div>
    <table class="logtable">
      <thead>
        <tr>
          <td>序号</td>
          <td>登录用户名</td>
          <td>真实姓名</td>
          <td>时间</td>
          
        </tr>
      </thead>
      <tbody class="logtable-tbody">
        <tr v-for="(item, index) in data_table">
          <td v-text="index+1"></td>
          <td v-text="item.user.account"></td>
          <td v-text="item.user.username"></td>
          <td v-text="item.createTime"></td>
          
        </tr>
      </tbody>
    </table>

    <div class="pagination-div">
        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-size="everySize" :total="total" :page-sizes="[10,20,50,100]">
        </el-pagination>
    </div>
  </div>
  
</template>

<script>
import{queryUserPerformance} from "../../api/user"
import img3 from "../../assets/img/setting/04.png";
export default {
    data(){
        return{
            data_table:[],
            img3: img3,
            searchText: null,
            currentPage: 1,
            total: 0,
            everySize: 10,
        }
    },
    props:{
      condition:{
        "type": [Object]
      }
    },
    methods:{
        search(){
          queryUserPerformance(this.currentPage, this.everySize,'LITERATURE', this.condition)
          .then(res=>{
              this.data_table = res.list;
              this.total = res.totals;
          })
          .catch(err=>{
            this.$message.warning(err.message);
          });
        },
        shiftModel(){

        },
        handleSizeChange(val) {
          this.everySize = val;
          this.currentPage = 1;
          this.search();
        },
        handleCurrentChange(pageNum) {
          this.currentPage = pageNum;
          this.search();
        },
    },
    mounted(){
      this.search();
    },
    computed:{
        con(){
            return{username: this.searchText}
        }
    }
}
</script>

<style lang="scss">
.logtable {
  width: 100%;
  height: calc(100% - 50px);
  color: white;
  text-align: center;
  border-collapse: collapse;
  .logtable-tbody {
    display: block;
    height: calc(100% - 50px);
    overflow-y: auto;
  }
  thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  /*滚动条默认宽度是16px 将thead的宽度减16px*/
  table thead {
    width: calc(100% - 1em);
  }
  thead tr {
    height: 40px;
    background: url(../../assets/img/setting/tr1.png) no-repeat;
    background-size: 100% 100%;
  }
  tbody tr {
    border-bottom: 1px solid #252631;
  }
  tbody tr td {
    padding: 10px;
    .el-icon-edit {
      font-size: 24px;
      color: #409eff;
      cursor: pointer;
    }
    .el-icon-delete-solid {
      font-size: 24px;
      color: red;
      cursor: pointer;
    }
    .el-icon-refresh-left {
      font-size: 24px;
      color: #12dc12;
      cursor: pointer;
    }
  }
}

  .pagination-div {
      width: 100%;
      height: 50px;
      .el-pagination {
          margin-top: 9px;
          text-align: right;
          .el-pagination__total {
              color: white;
          }
          .el-pagination__jump {
              color: white;
          }
      }
      .myPagination.is-background .el-pager li:not(.disabled).active {
          color: #fff;
          border: 1px solid #146a80;
          box-shadow: 0 0 10px #1b6097;
          background-color: #1d2d46;
      }
  }
</style>