<template>
  <!-- 运维日志 -->
  <div class="devops-wrapper height100">
      <div class="search-container">
          <el-form :inline="true" :model="form">
            <el-form-item>
                <el-input
                 v-model="form.userName" 
                 placeholder="请输入运维者账号"
                 suffix-icon="el-icon-search"
                ></el-input>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="form.date"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
             </el-date-picker>
            </el-form-item>
            <el-form-item>
                <div class="btn-group">
                   <el-button type="primary" @click="handleSubmit">查询</el-button>
                   <el-button @click="handleReset">重置</el-button>
                </div>     
            </el-form-item>
        </el-form>
        <div class="page-tip">
            <span class="page-tip-title">页面说明:</span>
            <span class="page-tips">可查看所有账号在系统上的操作信息，可根据操作类型、操作时间段查询等方式对日志信息进行筛选</span>
        </div>
      </div>
      <div class="table-content hasTabs">
           <party-table 
            class="noAdd" 
            :currentPage="page._index"
            :feildList="feildList" 
            :list="list">
            </party-table>
           <party-pagination
            :page="page"
            @changePage="handleChangeCurrent"
           />
      </div>
  </div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
export default {
    data(){
        return{
            form:{
                userName:'',
                date:'',
                startDate:'',
                endDate:''
            },
            feildList:[
                {prop:'userName',label:'运维账号'},
                {prop:'area',label:'运维区域'},
                {prop:'operationIp',label:'操作Ip'},
                {prop:'createTime',label:'操作时间'}
            ],
            list: [],
            page:{
                _index:1,
                _size:10,
                total:0
            }
        }
    },
    components:{ partyTable, partyPagination},
    mounted(){
         this.getLog()
    },
    methods:{
        handleSubmit(){
           this.getLog()
        },
        handleReset(){
            for(let key in this.form){
                this.form[key] = ""
            }
           this.getLog()
        },
        getLog(){
            let requestParams = {}
            requestParams._index = this.page._index
            requestParams._size = this.page._size
            if(this.form.userName){
                requestParams.userName = this.form.userName
            }
            if(this.form.date){
                requestParams.startDate = this.form.date[0]
                requestParams.endDate = this.form.date[1]
            }
            this.$https({
                method:'get',
                url: 'sysLog/OperationLog',
                authType: this.backToken,
            },requestParams).then(res=>{
                if(res.status != 200){
                    this.getResWithOutData()
                }else{
                    if(res.data.resultCode == 200){
                        this.list = res.data.data.records
                        this.page._size = res.data.data.size
                        this.page.total = res.data.data.total
                    }else{
                       this.getResWithOutData()
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        // 页面返回值为空
        getResWithOutData(){
            this.list = []
            this.page = {
                    _index:1,
                    _size:10,
                    total:0
                }
        },
        // 翻页
        handleChangeCurrent(val){
            this.page._index = val
            this.getLog()
        }
    },
    watch:{
       
    }
}
</script>
<style lang="less" scoped>

</style>