<template>
    <div>
        <el-form ref="operationLogForm" class="form-header" :model="selectForm" label-width="auto" size="small"
            @submit.native.prevent>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="功能模块">
                        <el-select v-model="selectForm.module" class="formItem" placeholder="不限" clearable>
                            <el-option v-for="item in moduleList" :label="item" :value="item" :key="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="操作描述">
                        <el-input v-model="selectForm.describe" class="formItem" placeholder="请输入操作描述" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="操作人">
                        <el-input v-model="selectForm.userName" class="formItem" placeholder="请输入操作人" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="操作时间">
                        <el-date-picker class="formItem" v-model="dateList" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="ml20 mb20">
            <el-button type="primary" size="small" icon="el-icon-search" :loading="loading" @click="selectLog(1)">查 询
            </el-button>
        </div>
        <Tables ref="operationLogTables" ductName="operationLogTables" :order="true" :border='false' :data="data"
            :headerData="tableHeader" tableAlign="center" :showOverflowTooltip="false" :height="tableHeight"
            :page="selectForm.page" :limitSize="selectForm.size" :pageSizes="[100]" :totalCount="total"
            :loading="loading" @currentChange="currentChange">
            <template v-slot:result="scope">
                <span>
                    {{ scope.row.result != null && typeof JSON.parse(scope.row.result) == 'object' ?
                            JSON.parse(scope.row.result).msg :
                            scope.row.result
                    }}
                </span>
            </template>
            <template v-slot:remark="scope">
                <!-- <el-popover placement="top" width="400" trigger="hover"
                    v-if="scope.row.remark != null && scope.row.remark != ''">
                    <ul style="height:300px;overflow-y:scroll;">
                        <li v-for="(item, index) in scope.row.remark.split('\n')" :key="index"
                            style="border-bottom:1px solid #E4E7ED;margin-bottom:5px">{{ item }}</li>
                    </ul>
                    <el-button type="text" slot="reference">查 看</el-button>
                </el-popover> -->
                <div>
                    {{ scope.row.remark }}
                </div>
            </template>
            <template v-slot:requestParameters="scope">
                <el-popover placement="top" width="400" trigger="hover"
                    v-if="scope.row.requestParameters != null && scope.row.requestParameters != ''">
                    <ul style="height:300px;overflow-y:scroll;">
                        <li v-for="(item, index) in JSON.stringify(JSON.parse(scope.row.requestParameters)).split(',')"
                            :key="index" style="border-bottom:1px solid #E4E7ED;margin-bottom:5px">{{ item }}</li>
                    </ul>
                    <el-button type="text" slot="reference">查 看</el-button>
                </el-popover>
            </template>
        </Tables>
    </div>
</template>

<script>
import { findModuleCondition, getSystemOperationLogData } from "@/api/system/logConfig.js";

export default {
    name: 'OperationLog',
    data() {
        return {
            selectForm: {
                module: null,
                describe: null,
                userName: null,
                page: 1,
                size: 100
            },
            data: [],
            tableHeader: this.tableHeaders['operationLog'],
            moduleList: [],
            dateList: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableHeight: 300,
            total: 0,
            loading: false
        }
    },
    created() {
        this.getModule()
        this.selectLog(1)
    },
    activated() {
        this.selectLog();
    },
    mounted() {
        // this.tableHeight = window.innerHeight - this.$refs.operationLogForm.$el.offsetHeight - 240
    },
    methods: {
        getModule() {
            findModuleCondition().then(res => {
                if (res.code === 200) {
                    this.moduleList = res.data.module
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        selectLog(val) {
            this.loading = true
            this.data = []
            if (val == 1) {
                this.selectForm.page = 1
            }
            let obj = {}
            obj.module = this.selectForm.module
            if (this.dateList && this.dateList.length > 0) {
                obj.createTimeStart = this.dateList[0]
                obj.createTimeEnd = this.dateList[1]
            } else {
                obj.createTimeStart = null
                obj.createTimeEnd = null
            }
            obj.describe = this.selectForm.describe
            obj.userName = this.selectForm.userName
            obj.page = this.selectForm.page
            obj.size = this.selectForm.size
            getSystemOperationLogData(obj).then(res => {
                this.loading = false
                if (res.code === 200) {
                    this.data = res.data.list
                    this.total = res.data.total
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                this.loading = false
                console.log(err)
            })
        },
        currentChange(val) {
            this.selectForm.page = val.page
            this.selectLog()
        }
    }
}

</script>

<style lang="scss" scoped>

</style>