<script lang="ts">
export default {
    name: "accesslog",
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElForm } from "element-plus";
import { Search, Refresh } from "@element-plus/icons-vue";
import { accessLog } from "@/api/system/accesslog";
import {
    AccessLogQueryParam,
    AccessLogItem,
} from "@/types/api/system/accesslog";

const queryFormRef = ref(ElForm);

const state = reactive({
    loading: true,
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        adminName: "",
        module: "",
        property: "",
        direction: "",
        operation: "",
    } as AccessLogQueryParam,
    list: [] as AccessLogItem[],
    total: 0,
});

const { loading, queryParams, list, total } = toRefs(state);

function handleQuery() {
    state.loading = true;
    accessLog(state.queryParams).then(({ data }) => {
        state.list = data.content;
        state.total = data.totalElements;
        state.loading = false;
    });
}

/**
 * 排序
 */
function handleSortChange(column: any) {
    var sortingType = column.order;
    state.queryParams.property = column.prop;
    if (sortingType === "ascending") {
        state.queryParams.direction = "1";
    } else if (sortingType === "descending") {
        state.queryParams.direction = "0";
    } else {
        state.queryParams.property = "id";
        state.queryParams.direction = "1";
    }
    handleQuery();
}

/**
 * 查询重置
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    handleQuery();
}

onMounted(() => {
    handleQuery();
});
</script>

<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="adminName">
                <el-tooltip
                    content="请输入用户名搜索"
                    placement="bottom"
                    effect="light"
                >
                    <el-input
                        v-model="queryParams.adminName"
                        placeholder="请输入用户名搜索"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="operation">
                <el-tooltip
                    content="请输入操作搜索"
                    placement="bottom"
                    disabled
                >
                    <el-input
                        v-model="queryParams.operation"
                        placeholder="请输入操作搜索"
                        style="width: 300px"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="module">
                <span>模块：</span>
                <el-select
                    v-model="queryParams.module"
                    class="filter-item"
                    placeholder="请选择"
                    style="width: 136px"
                >
                    <el-option key="0" value="0" label="CMS" />
                    <el-option key="1" value="1" label="COMMON" />
                    <el-option key="2" value="2" label="EXCHANGE" />
                    <el-option key="3" value="3" label="FINANCE" />
                    <el-option key="4" value="4" label="MEMBER" />
                    <el-option key="5" value="5" label="OTC" />
                    <el-option key="6" value="6" label="SYSTEM" />
                    <el-option key="7" value="7" label="PROMOTION" />
                    <el-option key="" value="" label="全部" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="handleQuery"
                    >搜索</el-button
                >
                <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="list"
            @sort-change="handleSortChange"
            highlight-current-row
            border
        >
            <el-table-column
                label="IP地址"
                prop="accessIp"
                min-width="160"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="请求方法"
                prop="accessMethod"
                min-width="110"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="创建时间"
                prop="accessTime"
                min-width="160"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="操作人"
                prop="adminName"
                min-width="110"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="操作"
                prop="operation"
                min-width="200"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="操作路径"
                prop="uri"
                min-width="200"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="操作模块"
                prop="module"
                min-width="160"
                align="center"
                sortable="custom"
            />
        </el-table>
        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>
