<template>
  <div class="tab6">
    <div class="insideTop">
      操作日志
    </div>
    <div class="obstruct"></div>
    <!-- 主要内容 -->
    <div class="conten">
      <!-- <div class="search"  @keyup.enter="searchBtn">
        <el-input
          v-model="formData.searchKey"
          placeholder="请输入关键字"
          style="width: 240px"
        ></el-input>
        <div class="search_btn">
          <el-button type="primary" @click="searchBtn">查 询</el-button>
        </div>
      </div> -->
      <!-- 表格 -->
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">
              {{
                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
              }}
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="账号"> </el-table-column>
          <el-table-column prop="type" label="操作模块"> </el-table-column>
          <el-table-column prop="description" label="操作事件"></el-table-column>
          <el-table-column prop="createTime" label="操作时间"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        layout="sizes,prev, pager, next,jumper"
        :total="total"
        :current-page="formData.pageNum"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { logList } from '@/apis/tab2'
export default {
  name: 'tab6',
  components: {},
  data () {
    // 这里存放数据
    return {
      total: 0,
      formData: {
        pageNum: 1,
        pageSize: 10,
        searchKey: ''
      },
      tableData: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
  },
  // 方法集合
  methods: {
    // 点击查询
    searchBtn () {
      this.formData.pageNum = 1
      this.logList(this.formData)
    },
    // 封装获取列表的函数
    async logList (data) {
      const res = await logList(data)
      this.total = res.data.total
      this.tableData = res.data.records
      // console.log(998, res)
    },
    // 分页器方法
    currentChange (val) {
      // console.log('当前页改变了', val)
      this.formData.pageNum = val
      this.logList(this.formData)
    },
    sizeChange (val) {
      // console.log('条数改变了', val)
      this.formData.pageNum = 1
      this.formData.pageSize = val
      this.logList(this.formData)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.logList(this.formData)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab6 {
  height: 100%;
  .insideTop .add{
    right: 55px;
  }
  .conten {
    padding: 15px 30px 0;
    height: calc(100% - 32px);
    .classify {
      text-align: center;
      width: 40px;
      padding-bottom: 10px;
      color: #b9412e;
      border-bottom: 2px solid #b9412e;
    }
    .search {
      display: flex;
      margin-bottom: 20px;
      position: relative;
      margin-top: 12px;
      height: 40px;
      .search_k {
        margin-left: 30px;
      }
      .search_btn {
        margin-left: 30px;
        display: flex;
        justify-content: space-between;
        width: 100px;
      }
    }
    .table {
      max-width: 1533px;
    }
    /deep/.el-table__body-wrapper {
      max-height: 528px;
      overflow-y: auto;
    }
  }
  .paging {
    position: absolute;
    bottom: 15px;
    right: 50px;
  }
}
</style>
