<template>
    <div>
        <div class="bigBox">
            <div class="titleBox">
                <h3>操作日志管理</h3>
            </div>
            <!-- 分类查询数据 -->
            <div class="settingBox">
                <div class="manyBox">
                    <span>操作结果</span>
                    <el-select @change="aboutChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="setAbout"
                        clearable placeholder="操作结果">
                        <el-option v-for="(item, index) in setAboutList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <span>审计分类</span>
                    <el-select @change="audiChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="audiType"
                        clearable placeholder="审计分类">
                        <el-option v-for="(item, index) in audiTypeList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <span>操作分类</span>
                    <el-select @change="stChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="setType"
                        clearable placeholder="操作分类">
                        <el-option v-for="(item, index) in setTypeList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <span>事件类型</span>
                    <el-select @change="thingChange" style="width: 160px;height: 32px;border-radius: 0%;" v-model="thing"
                        clearable placeholder="事件类型">
                        <el-option v-for="(item, index) in thingList" :key="item.id" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </div>
                <div class="manyBox">
                    <el-button type="primary">
                        <el-icon>
                            <Search />
                        </el-icon>查询</el-button>
                    <el-button @click="getList">
                        <el-icon>
                            <RefreshLeft />
                        </el-icon>重置</el-button>
                </div>
            </div>
            <!-- 数据 -->
            <div class="mesBox">
                <el-table :data="logList" stripe style="width: 100%;height: calc(100vh - 240px);">
                    <el-table-column prop="audittypename" :show-overflow-tooltip="true" label="审计分类" width="auto" />
                    <el-table-column prop="eventtypename" label="事件类型" width="auto" />
                    <el-table-column prop="staff" label="操作用户" width="auto" />
                    <el-table-column prop="eventlevelname" label="事件等级" width="auto" />
                    <el-table-column prop="logtypename" label="操作类型" width="auto" />
                    <el-table-column prop="ip" label="操作IP" width="auto" />
                    <el-table-column prop="insdate" label="操作时间" :show-overflow-tooltip="true" width="auto" />
                    <el-table-column prop="optresultname" label="结果" width="auto" />
                    <el-table-column prop="description" :show-overflow-tooltip="true" label="日志描述" width="180" />
                </el-table>
            </div>
            <div style="width: 100%;">
                <Pagination :tLength="logTotal" @getBack="getBack"></Pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import systemRow from '@/api/systemRow'
import setlog from '@/api/setlog'
import Pagination from './Pagination.vue';
export default {
    setup() {
        let setAbout = ref('')//操作结果value
        let setType = ref('')//操作分类value
        let audiType = ref('')//审计分类value
        let thing = ref('')//事件类型value
        let setAboutList = ref([])//操作结果列表
        let setTypeList = ref([])//操作分类列表
        let audiTypeList = ref([])//审计分类列表
        let thingList = ref([])//事件类型列表
        let logList = ref([])//操作日志列表
        let logTotal = ref(0)//列表总数
        let pages = ref(0)
        let sizes = ref(0)
        function getSelect() {//获取所有下拉框选项
            systemRow.getAllRow({ pcode: "log_optresult" }).then(res => {
                // 操作结果
                setAboutList.value = res.data
            })
            systemRow.getAllRow({ pcode: 'log_opttype' }).then(res => {
                // 操作分类
                setTypeList.value = res.data
            })
            systemRow.getAllRow({ pcode: 'log_audittype' }).then(res => {
                // 审计分类
                audiTypeList.value = res.data
            })
            systemRow.getAllRow({ pcode: 'log_eventtype' }).then(res => {
                // 事件类型
                thingList.value = res.data
            })
        }
        function getList() {//获取操作日志列表
            setlog.getAllLog({ pageindex: 1, pageSize: 20 }).then(res => {
                logList.value = res.data
                logTotal.value = res.count
            })
        }
        function getBack(index, size) {//分页组件返回数据赋值
            pages.value = index
            sizes.value = sizes
            setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value }).then(res => {
                logList.value = res.data
                logTotal.value = res.count
            })
        }
        function aboutChange(e) {//操作结果change事件
            setAbout.value = e
            setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value,success:setAbout.value }).then(res => {
                console.log(res,'sss');
                logList.value = res.data
                logTotal.value = res.count
            })
        }
        function audiChange(e) {//审计分类change事件
            audiType.value = e
            setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value,audittype:audiType.value }).then(res => {
                logList.value = res.data
                logTotal.value = res.count
            })
        }
        function stChange(e) {//操作分类change事件
            setType.value = e
            setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value,opttype:setType.value }).then(res => {
                logList.value = res.data
                logTotal.value = res.count
            })
        }
        function thingChange(e) {//事件类型change事件
            thing.value = e
            setlog.getAllLog({ pageindex: pages.value, pageSize: sizes.value,eventtype:thing.value }).then(res => {
                logList.value = res.data
                logTotal.value = res.count
            })
        }
        onMounted(() => {
            ElMessage({
                type:"info",
                message:"正在加载数据",
                duration:1200
            })
            getSelect()
            getList()
        })
        return {
            setAbout,//操作结果value
            setAboutList,
            audiType,//审计分类value
            audiTypeList,
            getSelect,//获取所有下拉框选项方法
            setType,//操作分类value
            setTypeList,
            thing,//事件类型value
            thingList,
            getList,//获取操作日志列表
            logList,//操作日志列表
            logTotal,//列表总数
            getBack,//分页组件传回的方法
            aboutChange,//操作结果change事件
            audiChange,//审计分类change事件
            stChange,//操作分类事件
            thingChange,//事件类型change事件
            pages,//页码
            sizes,//条数
        }
    },
    components: {
        Pagination
    }
}
</script>

<style  scoped>
.bigBox {
    width: 98%;
    height: 100%;
    margin-left: 15px;
    margin-top: 10px;
}
.titleBox{
    width: 100%;
    height: 100%;
    text-align: center;
}
.settingBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.manyBox {
    margin-right: 5px;
}
</style>