<template>
    <div class="pd10">
        <div v-show="flg" v-loading="loading" element-loading-text="数据加载中">
            <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item>
                    <Timeinterval ref="interval" :interval="3"></Timeinterval>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
                     <el-button type="primary" @click="backups">文件备份</el-button>
                  <!--  <el-button type="primary" @click="restore">文件恢复</el-button> -->
                    <el-button type="primary" @click="details">统计</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="closeHandle">
                        条件筛选
                        <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="container" id="container">
                <i @click="closeHandle" class="el-icon-circle-close coles"></i>
                <el-form :inline="true" :model="formData" label-width="90px" class="">
                    <el-form-item label="用户名:">
                        <el-select v-model="formData.loginName" placeholder="用户名" clearable filterable>
                            <el-option
                                v-for="item in userName"
                                :key="item.id"
                                :label="item.loginName"
                                :value="item.loginName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="事件类型:">
                        <el-select v-model="formData.type" placeholder="事件类型" clearable>
                            <el-option
                                v-for="item in eventType"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作类型:">
                        <el-select v-model="formData.operateType" placeholder="操作类型" clearable>
                            <el-option
                                v-for="item in operationType"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作结果:">
                        <el-select v-model="formData.result" placeholder="操作结果" clearable>
                            <el-option
                                v-for="item in resultList"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <vxe-table
                size="mini"
                stripe
                :row-config="{ isCurrent: true, isHover: true }"
                border
                ref="management"
                @sort-change="sortChangeEvent"
                header-cell-class-name="table_header"
                show-overflow="tooltip"
                :data="datamock"
                style="width: 100%"
                :height="vh + 'px'"
            >
                <vxe-table-column
                    field="time"
                    title="操作时间"
                    align="center"
                    sortable
                    width="160"
                    show-overflow
                ></vxe-table-column>
                <vxe-table-column field="userName" title="操作人员" align="center" width="120"></vxe-table-column>
                <vxe-table-column
                    field="operate"
                    title="操作类型"
                    align="center"
                    sortable
                    width="220"
                ></vxe-table-column>
                <vxe-table-column field="describe" title="事件描述" align="center"></vxe-table-column>
                <vxe-table-column field="type" title="事件类型" align="center" sortable width="120"></vxe-table-column>
                <vxe-table-column
                    field="result"
                    title="操作结果"
                    align="center"
                    sortable
                    width="120"
                ></vxe-table-column>
                <vxe-table-column field="ip" title="操作IP" width="150" align="center"></vxe-table-column>
                <vxe-table-column field="level" title="事件等级" align="center" sortable width="120"></vxe-table-column>
            </vxe-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formData.pageNum"
                :page-sizes="[100, 200, 300, 500, 1000]"
                :page-size="formData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="mt10"
            ></el-pagination>
        </div>

        <div v-if="!flg" v-loading="loading1" element-loading-text="数据加载中">
            <el-form :inline="true" :model="formLine" class="demo-form-inline">
                <el-form-item>
                    <Time ref="intervaltime" :interval="3"></Time>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="OnSubmit" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <el-form-item style="position: absolute; right: 10px; float: right">
                    <el-button type="primary" icon="el-icon-download" @click="exportEventstatistics">导出</el-button>
                    <el-button type="primary" @click="back">返回</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="closeHandle1">
                        条件筛选
                        <i :class="!view1 ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="container" id="container1">
                <i @click="closeHandle1" class="el-icon-circle-close coles"></i>
                <el-form :inline="true" :model="formData" label-width="90px" class="">
                    <el-form-item label="用户名:">
                        <el-select v-model="formLine.loginName" placeholder="用户名" clearable filterable>
                            <el-option
                                v-for="item in userName"
                                :key="item.id"
                                :label="item.loginName"
                                :value="item.loginName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="事件类型:">
                        <el-select v-model="formLine.type" placeholder="用户名" clearable>
                            <el-option
                                v-for="item in eventType"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作类型:">
                        <el-select v-model="formLine.operateType" placeholder="用户名" clearable>
                            <el-option
                                v-for="item in operationType"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <vxe-table
                size="mini"
                :row-config="{ isCurrent: true, isHover: true }"
                border
                ref="management1"
                header-cell-class-name="table_header"
                :data="statisticsData"
                style="width: 100%"
                :height="vh + 'px'"
            >
                <vxe-table-column field="loginName" title="操作人员" align="center"></vxe-table-column>
                <vxe-table-column field="operateType" title="事件类型" align="center"></vxe-table-column>
                <vxe-table-column field="count" title="事件总数" align="center"></vxe-table-column>
            </vxe-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="formLine.pageNum"
                :page-sizes="[20, 30, 40, 50, 100]"
                :page-size="formLine.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="statisticsTotal"
                class="mt10"
            ></el-pagination>
            
        </div>
        <MqttWs v-if="showMqtt" />
    </div>
</template>
<script>
import Timeinterval from '@/views/components/Timeinterval.vue'
import Time from '@/views/components/Time.vue'
import {
    getAllUserList,
    getAuditLog,
    censusAuditLog,
    logFileWriter,
    recoverLogFile,
    getMemoInfo,
    getSysConfig
} from '@/api/AuditManagement/AuditManagement'
import MqttWs from '@/components/Mqtt/mqttWs.vue'
export default {
    components: {
        Timeinterval,
        Time,
        MqttWs
    },
    props: {},
    data() {
        return {
            loading: false,
            loading1: false,
            view: false,
            view1: false,
            flg: true,
            showMqtt:false,
            zoom: '', //图表焦点校验
            vh: undefined,
            formData: {
                loginName: '', //用户名
                type: '', //事件类型
                operateType: '', //操作类型
                result: null,
                searchBeginTime: '', //开始
                searchEndTime: '', //结束
                sortBy: '',
                sortName: '',
                orderBy: '',
                pageNum: 1,
                pageSize: 100
            },
            formLine: {
                loginName: '', //用户名
                type: '', //事件类型
                operateType: '', //操作类型
                searchBeginTime: '', //开始
                searchEndTime: '', //结束
                sortBy: '',
                sortName: '',
                orderBy: '',
                pageNum: 1,
                pageSize: 20
            },
            item: ['', ''],
            item1: ['', ''],
            userName: [], //
            resultList: [
                { id: 1, label: '成功' },
                { id: 0, label: '失败' }
            ],
            datamock: [],
            statisticsData: [],
            eventType: [
                {
                    id: 0,
                    label: '业务事件类型'
                },
                {
                    id: 1,
                    label: '系统事件类型'
                }
            ], //事件类型
            operationType: [
                { id: 1, value: '查询' },
                { id: 2, value: '新增' },
                { id: 3, value: '更新' },
                { id: 4, value: '删除' },
                { id: 5, value: '认证' },
                { id: 6, value: '注销' },
                { id: 7, value: '上传' },
                { id: 8, value: '下载' },
                { id: 9, value: '越权访问' }
            ], //操作类型
            timeFlag: '',
            total: undefined,
            statisticsTotal: undefined
        }
    },
    created() {
        this.search()
    },
    mounted() {
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
        if(process.env.VUE_APP_HB == 'hbqr'){
            this.showMqtt = JSON.parse(window.sessionStorage.getItem('Info')).roleCode.includes('audit_manager')
        }

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.onSubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 95
        },
        //条件筛选
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        closeHandle1() {
            if (this.view1) {
                this.view1 = false
            } else {
                this.view1 = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container1')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        //统计
        details() {
            this.flg = false
            setTimeout(() => {
                this.OnSubmit()
            }, 0)
        },
        OnSubmit() {
            this.loading1 = true
            this.item1 = this.$refs.intervaltime.timeValue
            this.formLine.searchBeginTime = this.item1[0]
            this.formLine.searchEndTime = this.item1[1]
            censusAuditLog(this.formLine).then(res => {
                this.statisticsData = res.data.records
                this.statisticsTotal = res.data.total
                this.loading1 = false
            })
        },
        // 排序
        sortChangeEvent({ column, field, order }) {
            this.formData.sortName = column.title
            this.formLine.sortName = column.title
            this.formData.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
            this.formLine.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
            this.formData.orderBy = order
            this.formLine.orderBy = order
            this.onSubmit()
        },
        //下拉框查询
        search() {
            getAllUserList().then(res => {
                this.userName = res.data
            })
        },
        //返回
        back() {
            this.flg = true
            this.onSubmit()
        },
        //查询
        onSubmit() {
            this.loading = true
            this.item = this.$refs.interval.timeValue
            this.formData.searchBeginTime = this.item[0]
            this.formData.searchEndTime = this.item[1]
            getAuditLog(this.formData).then(res => {
                this.datamock = res.data.records
                this.total = res.data.total
                this.loading = false
                this.getLogSize()
            })
        },

        //查询日志大小
        getLogSize(){
            getMemoInfo().then(res => {
                getSysConfig().then(re=>{
                    if (res.data>re.data.logSize) {
                        this.$message({
                            showClose: true,
                            duration: 0,
                            message: '日志表存储空间已超过'+re.data.logSize+'(M)请及时备份清理!',
                            type: 'warning'
                        })
                    }
                })

            })
        },

        //备份
        backups() {
            this.loading = true
            logFileWriter().then(res => {})
            setTimeout(() => {
                this.$message({
                    type: 'success',
                    message: '文件备份成功'
                })
                this.loading = false
            }, 50000)
        },
        //恢复
        restore() {
            this.loading = true
            recoverLogFile().then(res => {})
            setTimeout(() => {
                this.$message({
                    type: 'success',
                    message: '文件恢复成功'
                })
                this.loading = false
            }, 50000)
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange1(val) {
            this.formLine.pageSize = val
            this.OnSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange1(val) {
            this.formLine.pageNum = val
            this.OnSubmit()
        },
        //导出
        exportEvent() {
            getAuditLog({
                loginName: this.formData.loginName,
                type: this.formData.type,
                operateType: this.formData.operateType,
                searchBeginTime: this.formData.searchBeginTime,
                searchEndTime: this.formData.searchEndTime,
                sortBy: this.formData.sortBy,
                sortName: this.formData.sortName,
                orderBy: this.formData.orderBy,
                export:true,
                pageNum: 1,
                pageSize: this.total
            }).then(res => {
                this.$refs.management.exportData({
                    filename: 'export', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records // 数据源 // 过滤那个字段导出
                    //   columnFilterMethod: function (column, $columnIndex) {
                    //     return !(column.$columnIndex === 0);
                    //   },
                })
            })
        },
        exportEventstatistics() {
            censusAuditLog({
                loginName: this.formLine.loginName,
                type: this.formLine.type,
                operateType: this.formLine.operateType,
                searchBeginTime: this.formLine.searchBeginTime,
                searchEndTime: this.formLine.searchEndTime,
                pageNum: 1,
                export:true,
                pageSize: this.statisticsTotal
            }).then(res => {
                this.$refs.management1.exportData({
                    filename: 'export', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records // 数据源 // 过滤那个字段导出
                    //   columnFilterMethod: function (column, $columnIndex) {
                    //     return !(column.$columnIndex === 0);
                    //   },
                })
            })
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
::v-deep .vxe-table .cell {
    text-align: center;
}
.svgIcon {
    display: flex;
    justify-content: end;
}
.back {
    position: absolute;
    right: 10px;
    float: right;
}
.container {
    position: absolute;

    /* margin: auto; */
    top: 0;
    right: 0;
    z-index: 2000;
    width: 50%;
    height: 0;
    overflow: auto;
    background-color: #e4e7ebb9;
    scroll-behavior: smooth;
    -radius: 20px;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}

@keyframes expend {
    from {
        top: 0;
        height: auto;
    }
    to {
        top: 0;
        height: auto;
    }
}

@keyframes no-expend {
    from {
        top: 0;
        height: 20%;
    }
    to {
        top: 0;
        height: 0;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
