<template>
    <div style="margin-bottom: 10px">
        <el-config-provider :locale="zhCn">
            <el-row>
                <el-input v-model="queryKey" style="width: 256px; margin-right: 10px;" placeholder="请输入搜索信息" />
                <el-button type="primary" @click="search()">搜索</el-button>
                <el-button type="warning" @click="reset()">重置</el-button>
            </el-row>
            <br />
            <el-table :data="wmsLogs" stripe border v-loading="loading" class="table-class" max-height="650px"
                highlight-current-row @row-click="getCurrentRow" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }">
                <el-table-column width="65px" fixed="left">
                    <template v-slot="scope">
                        <el-radio :label="scope.row.logId" v-model="logId">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="logId" label="请求id" fixed="left" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="logTitle" label="请求名称" fixed="left" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="logMethod" label="请求接口" fixed="left" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="logRequest" label="请求信息" :formatter="jsonFormat" min-width="180px"
                    show-overflow-tooltip />
                <el-table-column prop="logResponse" label="响应信息" :formatter="jsonFormat" min-width="180px" show-overflow-tooltip />
                <el-table-column prop="logIp" label="请求ip" min-width="120px" />
                <el-table-column prop="logTime" label="请求时间" :formatter="timeFormat" show-overflow-tooltip
                    min-width="120px" />
                <el-table-column prop="logUser" label="请求用户" min-width="120px" />
                <el-table-column fixed="right" label="操作" width="120px">
                    <template v-slot="scope">
                        <el-button plain type="primary" @click="detailCurrentRowLog(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
                :small="false" :disabled="false" :background="false" :default-page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
                @current-change="search" />
            <el-dialog v-model="dialogVisible" title="日志详情" width="40%" draggable :show-close="false">
                <el-form ref="wmsLogFormRef" :model="wmsLogEntity" :label-position="labelPosition" label-width="100px"
                    style="max-width: 100%" :rules="rules" status-icon>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="请求id" prop="logId">
                                <el-input v-model="wmsLogEntity.logId" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="请求名称" prop="logTitle">
                                <el-input v-model="wmsLogEntity.logTitle" readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="请求接口" prop="logMethod">
                                <el-input v-model="wmsLogEntity.logMethod" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="请求ip" prop="logIp">
                                <el-input v-model="wmsLogEntity.logIp" readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="请求信息" prop="logRequest">
                                <el-input type="textarea" :rows="2" v-model="wmsLogEntity.logRequest" placeholder=""
                                    :maxlength="-1" :show-word-limit="false" :autosize="{ minRows: 2, maxRows: 4 }" readonly>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="响应信息" prop="logResponse">
                                <el-input type="textarea" :rows="2" v-model="wmsLogEntity.logResponse" :maxlength="-1"
                                    :show-word-limit="false" :autosize="{ minRows: 2, maxRows: 4 }" readonly>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="请求时间" prop="logTime">
                                <el-input v-model="wmsLogEntity.logTime" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="请求用户" prop="logUser">
                                <el-input v-model="wmsLogEntity.logUser" readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">关闭</el-button>
                    </span>
                </template>
            </el-dialog>
        </el-config-provider>
    </div>
</template>

<script setup>
import store from '@/store'
import { queryLogs } from '@/api/wmsLog.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { errorBox } from '@/utils/myMessageBox.js'
import { timeFormatter, jsonFormatter } from '@/utils/formatter.js'
import { ref, reactive } from 'vue'
</script>
<script>
export default {
    name: 'wmsLog',
    data() {
        return {
            wmsLogs: [],
            pageInfo: {},
            currentPage: 1,
            pageSize: 10,
            total: 0,
            queryKey: '',
            loading: true,
            dialogVisible: false,
            logId: '',
            wmsLogEntity: reactive({}),
            labelPosition: 'top',
            wmsLogFormRef: ref(),
            rules: reactive({})
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        search() {
            this.loading = true
            const tableRequest = {
                pageNo: this.currentPage,
                pageSize: this.pageSize,
                queryParam: this.queryKey.trim(),
                userName: store.getters.getUserName
            }
            queryLogs(tableRequest).then(res => {
                const tableResponse = res.data
                if (tableResponse.code == 0) {
                    this.wmsLogs = tableResponse.returnData.lists
                    this.total = tableResponse.returnData.total
                } else {
                    errorBox(tableResponse.message)
                }

            }).catch(err => {
                console.log(err)
                errorBox('查询日志错误')
            })
            this.loading = false
        },
        timeFormat: (row, column, cellValue, index) => {
            return timeFormatter(cellValue)
        },
        jsonFormat: (row, column, cellValue, index) => {
            return jsonFormatter(cellValue)
        },
        reset() {
            this.queryKey = ''
            this.search
        },
        detailCurrentRowLog(row) {
            this.wmsLogEntity = {
                logId: row.logId,
                logTitle: row.logTitle,
                logMethod: row.logMethod,
                logRequest: jsonFormatter(row.logRequest),
                logResponse: jsonFormatter(row.logResponse),
                logTime: row.logTime,
                logUser: row.logUser,
                logIp: row.logIp,
            }
            this.dialogVisible = true
        },
        getCurrentRow(row) {
            this.logId = row.logId
        },
    },
}
</script>

<style scoped>
.el-pagination {
    padding-left: 5px;
}

.el-row .el-button {
    width: 72px;
    margin-left: 0px;
    margin-right: 5px;
}

.table-class {
    width: 100%;
}

.el-row .el-form-item {
    width: 10% inherit;
    justify-content: center;
}

.el-row .el-form-item .el-select-v2 {
    width: 100% !important;
}

.el-row .el-form-item .el-input-number {
    width: 100% !important;
}

.el-row .el-form-item .el-button {
    margin: auto;
}
</style>