<template>
<!-- 用户操作日志 -->
  <div class="platform-log-wrapper height100">
      <div class="search-container">
          <el-form :inline="true" :model="form">
            <el-form-item>
                <el-input
                 v-model="form.nameOrCode" 
                 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="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
             </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-select 
                 v-model="form.operationType"
                 placeholder="请选择操作类型">
                    <el-option
                        v-for="(item,index) in operationTypeList"
                        :key="index"
                        :label="item"
                        :value="item">
                    </el-option>
             </el-select>
            </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'
import { getLogType } from '@/config/logOperationType.js'
export default {
    data(){
        return{
            form:{
                nameOrCode:'',
                date:'',
                operationType:'',
                startDate:'',
                endDate:''
            },
            logType:2, //1.平台操作日志 2.用户操作日志
            operationTypeList:[],
            feildList:[
                {prop:'operationTime',label:'操作时间'},
                {prop:'operator',label:'操作者'},
                {prop:'operationType',label:'操作类型'},
                {prop:'operationObject',label:'操作对象'},
                {prop:'operationContent',label:'操作内容'},
            ],
            list: [],
            page:{
                _index:1,
                _size:10,
                total:0
            }
        }
    },
    components:{ partyTable, partyPagination},
    mounted(){  
         // 获取日志操作类型
         this.getOperationType()  
         // 获取机顶盒运维类表
         this.getLog()
    },
    methods:{
        getOperationType(){
            getLogType().then(res=>{
                this.operationTypeList = res
            })
        },
        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
            requestParams.type = this.logType
            if(this.form.nameOrCode){
                requestParams.nameOrCode = this.form.nameOrCode
            }
             if(this.form.operationType){
                requestParams.operationType = this.form.operationType
            }
            if(this.form.date){
                requestParams.startDate = this.form.date[0]
                requestParams.endDate = this.form.date[1]
            }
            this.$https({
                method:'get',
                url: 'sysLog/querySysLogList',
                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>