<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input
                v-model="listQuery.ip"
                placeholder="请输入IP地址"
                style="width: 200px"
                class="filter-item ml-20"
                :maxlength="30"
                @keyup.enter.native="handleFilter"
            />
            <el-date-picker
                v-model="rangeDate"
                style="width: 300px"
                class="filter-item ml-20"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
            <el-select
                v-model="listQuery.grade"
                placeholder="请选择异常等级"
                style="width: 200px"
                class="filter-item ml-20"
            >
                <el-option
                    v-for="item in Object.keys(levelList)"
                    :key="item"
                    :value="levelList[item]"
                    :label="levelList[item]"
                />
            </el-select>
            <!-- <el-input v-model="listQuery.errType" placeholder="请输入异常类型"
        style="width: 200px" class="filter-item" :maxlength="30"
        @keyup.enter.native="handleFilter"
      /> -->
            <el-select
                v-model="listQuery.errType"
                placeholder="请选择异常类型"
                style="width: 200px"
                class="filter-item ml-20"
            >
                <el-option
                    v-for="item in Object.keys(typeList)"
                    :key="item"
                    :value="typeList[item]"
                    :label="typeList[item]"
                />
            </el-select>

            <el-select
                v-model="listQuery.logSort"
                clearable
                filterable
                style="width: 200px"
                class="filter-item ml-20"
                placeholder="请选择"
            >
                <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select
                v-model="listQuery.logDesc"
                clearable
                filterable
                style="width: 200px"
                class="filter-item ml-20"
                placeholder="请选择"
            >
                <el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
                查询
            </el-button>
            <el-button style="margin-left: 20px" class="filter-item" @click="resetFilter"> 重置 </el-button>
            <el-button @click="handleBackups" class="filter-item" style="margin-left: 20px" type="warning">
                备份
            </el-button>
        </div>

        <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
            :max-height="tableHeight"
        >
            <el-table-column label="序号" align="center" width="80" type="index">
                <template slot-scope="scope">
                    <span>{{ (listQuery.pageNum - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作人" align="center" prop="operaUserName">
                <template slot-scope="scope">
                    <span>{{ scope.row.operaUserName || '/' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作时间" align="center" prop="operTime" width="180" />
            <el-table-column label="IP地址" align="center" prop="ip" />
            <el-table-column label="操作模块" align="center" prop="model">
                <template slot-scope="scope">
                    <span>{{ scope.row.model || '/' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="异常类型" align="center" prop="errType" />
            <el-table-column label="异常原因" align="center" prop="operateDetail" />
            <el-table-column label="异常等级" align="center" prop="grade" />
            <!-- <el-table-column label="事件结果" align="center" prop="failureReason"/> -->
            <el-table-column label="操作类型" align="center" prop="operType" />
            <!--
      <el-table-column label="操作详情" align="center" prop="operateDetail" />

      <el-table-column label="操作结果" align="center" prop="errLevel">
        <template slot-scope="{ row }">
          {{ getStatus(row.errLevel) }}
        </template>
      </el-table-column>
      <el-table-column label="操作参数" align="center" prop="params" />
      <el-table-column label="操作方法" align="center" prop="method" /> -->
            <el-table-column label="操作路径" align="center" prop="operUri" />
            <!-- <el-table-column label="执行时间(ms)" align="center" prop="times" /> -->
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import _ from 'lodash/fp'
import { downloadFile } from '@/utils/download'

import { getErrLogs, downloadErrLogs } from '@/api/system/log'

const levelList = {
    1: '高',
    2: '中',
    3: '低',
}
const typeList = {
    1: '越权访问',
    2: 'IP异常',
    // 3:'删除',
    // 4:'查询',
    // 5:'导出',
    // 6:'下载',
    // 7:'备份',
    // 8:'登录',
    // 9:'登出'
}

export default {
    components: { Pagination },
    data() {
        return {
            tableKey: 0,
            list: [],
            levelList: levelList,
            total: 0,
            listLoading: false,
            tableHeight: 650,
            typeList: typeList,
            timeList: [
                { id: 1, name: '时间' },
                { id: 2, name: '操作人' },
                { id: 4, name: 'ip' },
                { id: 5, name: '异常等级' },
            ],
            sortList: [
                { id: 1, name: '倒序' },
                { id: 2, name: '升序' },
            ],
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                errType: '',
                ip: '',
                errLevel: '',
                operTime: '',
                // logSort:1,
                logDesc: 1,
            },
            rangeDate: [],
        }
    },
    created() {
        // this.getList()
        // this.getOperate()
    },
    mounted() {
        this.listQuery.operTime = this.getCurrentDate() + ' - ' + this.getCurrentDate()
        this.rangeDate = [this.getCurrentDate(), this.getCurrentDate()]
        this.getList()
    },
    methods: {
        getStatus(val) {
            return this.levelList[val]
        },
        //获取下拉数据
        getOperate() {
            // getOperateList().then((response) => {
            //   this.typeList = response.data
            // })
        },

        getList() {
            this.listLoading = true
            if (this.rangeDate && this.rangeDate.length > 0) {
                this.listQuery.operTime = this.rangeDate[0] + ' - ' + this.rangeDate[1]
            }
            getErrLogs(this.listQuery).then((response) => {
                this.list = response.rows.map((item) => {
                    return item
                })
                this.total = response.total
            })
            setTimeout(() => {
                this.listLoading = false
            }, 500)
        },
        // 查询
        handleFilter() {
            this.listQuery.pageNum = 1
            this.getList()
        },
        //重置
        resetFilter() {
            this.listQuery = {
                pageNum: 1,
                pageSize: 10,
                errType: '',
                ip: '',
                grade: '',
                // logSort:1,
                logDesc: 1,
            }
            this.rangeDate = [this.getCurrentDate(), this.getCurrentDate()]
            this.handleFilter()
        },
        // 备份
        handleBackups() {
            downloadErrLogs().then((res) => {
                downloadFile({ fileName: '异常日志.sql', fileData: res, fileType: 'text/html;charset=UTF-8' })
            })
        },
        //导出
        handleExport() {
            // exportCarDetail().then(res => {
            //   downloadFile({ fileName: '设备详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
            // })
        },
        getCurrentDate() {
            let now = new Date()
            let year = now.getFullYear()
            let month = now.getMonth() + 1
            if (month < 10) {
                month = '0' + month
            }
            let day = now.getDate()
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
    },
}
</script>
