<template>
    <div class="default-main">
        <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
            <template v-slot:select>
                <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>
            </template>
            <template #operation>
                <!-- <el-button type="primary" @click="backups">文件备份</el-button>
                <el-button type="primary" @click="details">统计</el-button> -->
            </template>
        </TableHeader>
        <Table ref="tableRef" />
    </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-ui'

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

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

const userName = ref<UserInfo[]>([])
const TableHeaderRef = ref()
// 响应式数据定义
const formData = reactive({
    loginName: '', //用户名
    type: '', //事件类型
    operateType: '', //操作类型
    result: null,
    searchBeginTime: '', //开始
    searchEndTime: '', //结束
    sortBy: '',
    sortName: '',
    orderBy: '',
    pageNum: 1,
    pageSize: 100
})

const formLine = reactive({
    loginName: '', //用户名
    type: '', //事件类型
    operateType: '', //操作类型
    searchBeginTime: '', //开始
    searchEndTime: '', //结束
    sortBy: '',
    sortName: '',
    orderBy: '',
    pageNum: 1,
    pageSize: 20
})

// 其他响应式数据
const loading = ref(false)
const loading1 = ref(false)
const view = ref(false)
const view1 = ref(false)
const flg = ref(true)
const showMqtt = ref(false)
const zoom = ref('') //图表焦点校验
const vh = ref(undefined)
const item = ref(['', ''])
const item1 = ref(['', ''])
const resultList = ref([
    { id: 1, label: '成功' },
    { id: 0, label: '失败' }
])
const datamock = ref([])
const statisticsData = ref([])
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 timeFlag = ref('')
const total = ref(undefined)
const statisticsTotal = ref(undefined)

const tableStore: any = new TableStore({
    url: '/system-boot/audit/getAuditLog',
    method: 'POST',
    column: [
        { field: 'userName', title: '登录用户' },
        { field: 'ip', title: '登录ip' },
        { field: 'time', title: '登录时间' }
    ]
})

tableStore.table.params.loginName = ''
tableStore.table.params.type = ''
tableStore.table.params.operateType = ''
tableStore.table.params.result = ''

provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
    search()
})

//下拉框查询
const search = () => {
    getAllUserList().then(res => {
        userName.value = res.data
    })
}
</script>
