<template>
    <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 filterable>
                        <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 filterable>
                        <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 @click="back" :icon="Back">返回</el-button>
        </template>
    </TableHeader>
    <Table ref="tableRef_1" />
</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 } from '@/api/auditManage/auditList'
import { Back } from '@element-plus/icons-vue'

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

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

const emit = defineEmits(['back'])

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

const flg = ref(true)

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 tableStore: any = new TableStore({
    url: '/system-boot/audit/censusAuditLog',
    method: 'POST',
    column: [
        // 根据实际统计表格的列来定义
        { field: 'loginName', title: '操作人员' },
        { field: 'operateType', title: '事件类型' },
        { field: 'count', title: '事件总数' }
    ]
})

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

provide('tableStore', tableStore)

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

//下拉框查询
const search = () => {
    getAllUserList().then(res => {
        userName.value = res.data
    })
}
//返回
const back = () => {
    flg.value = true
    // 触发父组件的 onSubmit 方法
    emit('back')
}
</script>
