<template>
  <div class="log">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
          <el-form-item label="用户ID">
            <el-input v-model="searchFrom.admin_id"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="searchFrom.url"></el-input>
          </el-form-item>
          <el-form-item label="功能名">
            <el-input v-model="searchFrom.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getList">搜索</el-button>
          </el-form-item>
    </el-form>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"  class="demo-table-expand">
            <el-form-item label="请求方法">
              <span>{{ props.row.method }}</span>
            </el-form-item>
            <el-form-item label="请求链接">
              <span>{{ props.row.url }}</span>
            </el-form-item>
            <el-form-item label="参数">
              <span>{{ props.row.params }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="角色"
        prop="user_role">
      </el-table-column>
      <el-table-column
        label="登录名"
        prop="user_name">
      </el-table-column>
      <el-table-column
        label="用户ID"
        prop="admin_id" sortable>
      </el-table-column>
      <el-table-column
        label="用户名"
        prop="user_desc">
      </el-table-column>
      <el-table-column
        label="功能名"
        prop="desc">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间" sortable>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
  </div>
</template>

<script>
  import {getAdminLogLisApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "sysConfig",
    components:{
      page
    },
    data() {
      return {
        list: [],
        total:0,
        nowPage:1,
        limit: 10,
        searchFrom: {
          admin_id: '',
          url: '',
          desc: ''
        }
      }
    },
    mounted(){
      this.getList()
    },
    methods: {
      getList(){
        this.searchFrom.page = this.nowPage;
        let json = {
            page: this.nowPage,
            limit: this.limit
        }
        if (this.searchFrom.admin_id){
            json.admin_id = this.searchFrom.admin_id
        }
        if (this.searchFrom.url){
          json.url = this.searchFrom.url
        }
        if (this.searchFrom.desc){
          json.desc = this.searchFrom.desc
        }
        getAdminLogLisApi(json).then(res => {
          this.list = res.list
          this.total = res.total
        })
      },
      onPageChange(val){
        this.nowPage = val;
        this.getList();
      },
      onSizeChange(val){
        this.nowPage = 1;
        this.limit = val;
        this.getList();
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .log {
    padding: 20px 0;
  }
  .add-btn {
    margin: 10px 0;
  }
  .top {
    margin-bottom:10px;
  }
</style>