<template>
  <div class="content-main-manage">
    <div class="content-main">
     <div class="content-body-wrap">
       <div class="content-body">
          <div class="search-list">
            <div class="search-left">
              <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
                 <FormItem label="" prop="roleId">
                  <Select v-model="tableParams.roleId" placeholder="角色名称">
                    <Option v-for="item in roleData" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                 <FormItem label="">
                  <DatePicker type="datetimerange" :value="dateRange" format="yyyy-MM-dd HH:mm:ss" placeholder="操作时间范围" class="common-date-picker date-picker-main" :clearable="false" :editable="false" @on-change="changePicker"></DatePicker>
                </FormItem>
                <FormItem label="" prop="moduleName">
                  <Input placeholder="输入页面名称关键词进行查询" clearable search v-model="tableParams.moduleName" />
                </FormItem>
                <FormItem label="" prop="operationName">
                  <Input placeholder="输入操作内容关键词进行查询" clearable search v-model="tableParams.operationName" />
                </FormItem> 
                <FormItem label="" >
                  <Button type="primary" class="common-btn-search" @click="searchClick">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
                  </Button> 
                  <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
                  </Button>
                </FormItem>
              </Form>
            </div>
            </div>
            <div class="manage-main-center">
              <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
                <template slot="loading">
                    <Loading-animation></Loading-animation>
                </template>
              </Table>
            </div>
            <div class="common-page">
              <div class="common-page-total">
                共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
              </div>
              <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
            </div>
       </div>
     </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "OperationLog",
  data() {
    return {
      loading: true,
      dateRange: [],
      tableParams: {
        roleId: '',
        beginOperateTime: '',
        endOperateTime: '',
        moduleName: '',
        operationName: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      columns: [
           {
            title: '序号',
            type: 'index',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '用户号',
            key: 'operationUser',
            align: 'center',
          },
          {
            title: '角色名称',
            key: 'roleName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: 'IP地址',
            key: 'operator',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '模块页面',
            key: 'operationModule',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '操作',
            key: 'operationName',
            align: 'center'
          },
          {
            title: '操作时间',
            key: 'operationTime',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
      ],   
      roleData: [], 
    };
  },
  mounted() {
    this.getRoleList()
    this.getTableData()
  },
  methods: {
    changePicker (date) {
      this.tableParams.beginOperateTime = date[0]
      this.tableParams.endOperateTime = date[1]
    },
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      this.getTableData()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableData()
    },
    // 获取表格数据
    getTableData () {
      let params = JSON.parse(JSON.stringify(this.tableParams))
      params.roleId= params.roleId == '-1'?'':params.roleId
      this.loading = true
      this.$get('metroapi/log/querySysLogPage', params).then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.tableData = res.data.data
            this.tableTotal = res.data.count
            if (res.data.data.length==0) {
              this.tablePage = 0
            } else {
              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
            }
            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
              this.tableParams.pageNum--
              return this.getTableData()
            }
          } else {
            this.tableData = []
            this.tableTotal = 0
          }
        })
    },
    searchClick () {
      this.tableParams.pageNum = 1
      this.getTableData()
    },
    resetClick (name) {
     this.dateRange = []
     this.tableParams.beginOperateTime = ''
     this.tableParams.endOperateTime = ''
     this.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData()
    },   
    getRoleList () {
      //获取角色名称
      this.$get('metroapi/role/box').then(res=>{
        if (res.httpCode == 1 ){
          this.roleModalData = JSON.parse(JSON.stringify(res.data))
          this.roleData = res.data
          this.roleData.unshift({ value: '-1', label: '角色名称' })
        } else {
          this.roleData = []
        }
      })
    },  
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  overflow: hidden;
  height: calc(100% - 50px);
  width: 100%;
}
.content-main {
  width: 100%;
  height: 100%;
}
.content-body-wrap {
  width: 100%;
  height: 100%;
  background: #06214d;
  padding: 10px;
}
.content-body {
  height: 100%;
  position: relative;
}
.search-list {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 150px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
    >>> .ivu-input {
     width: 225px;
     height: 32px;
   }
    >>> .ivu-date-picker-editor .ivu-input {
     width: 315px;
   }
    >>> .ivu-input-prefix, >>> .ivu-input-suffix {
     height: 32px;
     line-height: 32px;
   }
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 150px);
}
.common-table {
  max-height: 100%;
}
>>> .common-table .ivu-table th {
  height: 54px;
 }
 >>> .common-table .ivu-table td {
  height: 55px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 54px;
 }
  >>> .app-table .ivu-spin-fix {
   height: calc(100vh - 355px);
 }
 >>> .common-table .ivu-table-tip {
  background: url('../../../assets/images/noData.png') no-repeat center;
}
>>> .common-table .ivu-table-tip table {
 display: none;
}
>>> .app-table .ivu-table-tip {
   height: calc(100vh - 355px);
 }
 >>> .modal-table {
   overflow: auto !important;
 }
 >>> .modal-table .ivu-spin-fix {
   height: 200px;
 }
  >>> .modal-table .ivu-table-tip {
   height: 200px;
 }
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px;
  span {
    color #409EFF;
  }
}
</style>