<template>
    <div class="default-main">
        <div v-show="flg">
            <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
                <template v-slot:select>
                    <el-form :inline="true" label-width="90px" class="">
                        <el-form-item label="用户名:">
                            <el-select
                                v-model="tableStore.table.params.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="tableStore.table.params.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="tableStore.table.params.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="tableStore.table.params.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>
                </template>
                <template #operation>
                    <el-button type="primary" @click="backups">文件备份</el-button>
                    <el-button type="primary" @click="details">统计</el-button>
                </template>
            </TableHeader>
            <Table ref="tableRef" @sort-change="handleSortChange" />
        </div>
        <div v-if="!flg">
            <Statistics @back="onSubmit" ref="statistics" />
            <!-- <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
                <template v-slot:select>
                    <el-form :inline="true" label-width="90px" class="">
                        <el-form-item label="用户名:">
                            <el-select
                                v-model="tableStore.table.params.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="tableStore.table.params.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="tableStore.table.params.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>
                </template>
                <template #operation>
                    <el-button type="primary" @click="back">返回</el-button>
                </template>
            </TableHeader>
            <Table ref="tableRef_1" /> -->
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import {
    getAllUserList,
    getAuditLog,
    censusAuditLog,
    logFileWriter,
    recoverLogFile,
    getMemoInfo,
    getSysConfig
} from '@/api/auditManage/auditList'
import { ElMessage } from 'element-plus'
import Statistics from './statistics.vue'

defineOptions({
    name: 'admin/BusinessAdministrator/Audit/Operations/Management'
})

interface UserInfo {
    id: number | string
    loginName: string
}

const userName = ref<UserInfo[]>([])
const TableHeaderRef = ref()

// 其他响应式数据
const loading = ref(false)
const statistics = ref()

const flg = ref(true)
const showMqtt = ref(false)
const zoom = ref('') //图表焦点校验

const resultList = ref([
    { id: 1, label: '成功' },
    { id: 0, label: '失败' }
])

const eventType = ref([
    {
        id: 0,
        label: '业务事件类型'
    },
    {
        id: 1,
        label: '系统事件类型'
    }
]) //事件类型
const operationType = ref([
    { 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: '越权访问' }
]) //操作类型

const statisticsTotal = ref(undefined)

const tableStore: any = new TableStore({
    url: '/system-boot/audit/getAuditLog',
    method: 'POST',
    column: [
        { field: 'time', title: '操作时间', sortable: true },
        { field: 'userName', title: '操作人员' },
        { field: 'operate', title: '操作类型', sortable: true },
        { field: 'describe', title: '事件描述' },
        { field: 'type', title: '事件类型', sortable: true },
        { field: 'result', title: '操作结果', sortable: true },
        { field: 'ip', title: '操作IP' },
        { field: 'level', title: '事件等级', sortable: true }
    ]
})

tableStore.table.params.loginName = ''
tableStore.table.params.type = ''
tableStore.table.params.operateType = ''
tableStore.table.params.result = null
tableStore.table.params.sortBy = ''
tableStore.table.params.sortName = ''
tableStore.table.params.orderBy = ''
tableStore.table.params.pageSize = 100

provide('tableStore', tableStore)

onMounted(() => {
    // tableStore.index()
    search()
    onSubmit()
})

// 排序
const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
    tableStore.table.params.sortName = column?.title
    tableStore.table.params.sortBy =
        column?.property == 'operate' ? 'operate_type' : column?.property == 'time' ? 'create_time' : column?.property
    tableStore.table.params.orderBy = order
    tableStore.table.params.pageNum = 1

    // tableStore.index()
    onSubmit()
}

//下拉框查询
const search = () => {
    getAllUserList().then(res => {
        userName.value = res.data
    })
}
// 统计
const details = () => {
    flg.value = false
    nextTick(() => {
        statistics.value.tableStore.index()
    })
}

// 查询
const onSubmit = async () => {
    flg.value = true
    await tableStore.index()
    getLogSize()
}

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

// 备份
const backups = () => {
    loading.value = true
    logFileWriter({}).then(res => {})
    setTimeout(() => {
        ElMessage({
            type: 'success',
            message: '文件备份成功'
        })
        loading.value = false
    }, 50000)
}

// 恢复
const restore = () => {
    loading.value = true
    recoverLogFile({}).then(res => {})
    setTimeout(() => {
        ElMessage({
            type: 'success',
            message: '文件恢复成功'
        })
        loading.value = false
    }, 50000)
}
</script>
