<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('操作日志详细')" />
    <th:block th:include="include :: jsonview-css" />
    <style type="text/css">.method-tag{display:inline-block;padding:1px 8px;border-radius:3px;font-size:11px;font-weight:700;margin-right:6px;vertical-align:middle}.method-GET{background:#e8f5e9;color:#27ae60}.method-POST{background:#e3f2fd;color:#1565c0}.method-PUT{background:#fff3e0;color:#e65100}.method-DELETE{background:#ffebee;color:#c62828}.error-msg{background:#fff8f8;border-left:3px solid #e74c3c;border-radius:3px;padding:8px 12px;color:#c0392b;font-size:12px;line-height:1.7;word-break:break-all;white-space:pre-wrap}.code-wrap{background:#f7f9fb;border:1px solid #e8ecf0;border-radius:4px;overflow:hidden;max-height:260px;position:relative}.code-wrap pre{margin:0;padding:12px 14px;font-size:12px;line-height:1.6;font-family:Consolas,'SFMono-Regular',monospace;color:#444;white-space:pre-wrap;word-break:break-all;overflow:auto;max-height:240px;display:block}.code-action{position:absolute;top:8px;right:12px;z-index:10;margin:0;padding:0}.btn-copy{font-size:12px;color:#666;background:rgba(255,255,255,0.9);border:1px solid #dde1e7;border-radius:3px;padding:2px 10px;cursor:pointer}.btn-copy:hover{background:#fff;border-color:#409eff}.mono{font-family:Consolas,'SFMono-Regular',monospace;font-size:12px;color:#555}</style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content">
<div class="detail-wrap">

    <!-- 基本信息 -->
    <div class="detail-card">
        <div class="detail-card-title"><i class="fa fa-info-circle"></i>基本信息</div>
        <table class="detail-table">
            <tr>
                <th>操作模块</th>
                <td th:text="${operLog.title}">-</td>
                <th>业务类型</th>
                <td th:text="${@dict.getLabel('sys_oper_type', operLog.businessType)}">-</td>
            </tr>
            <tr>
                <th>操作时间</th>
                <td th:text="${#dates.format(operLog.operTime,'yyyy-MM-dd HH:mm:ss')}">-</td>
                <th>执行状态</th>
                <td>
                    <span th:if="${operLog.status == 0}" class="tag-ok"><i class="fa fa-check"></i> 正常</span>
                    <span th:if="${operLog.status != 0}" class="tag-err"><i class="fa fa-times"></i> 异常</span>
                </td>
            </tr>
        </table>
    </div>

    <!-- 操作人员 -->
    <div class="detail-card">
        <div class="detail-card-title"><i class="fa fa-user-o"></i>操作人员</div>
        <table class="detail-table">
            <tr>
                <th>操作人员</th>
                <td th:text="${operLog.operName}">-</td>
            </tr>
            <tr th:if="${not #strings.isEmpty(operLog.deptName)}">
                <th>所属部门</th>
                <td th:text="${operLog.deptName}">-</td>
            </tr>
            <tr>
                <th>操作地址</th>
                <td><span th:text="${operLog.operIp}">-</span>&nbsp;&nbsp;<span style="color:#999;" th:text="${operLog.operLocation}"></span></td>
            </tr>
        </table>
    </div>

    <!-- 请求信息 -->
    <div class="detail-card">
        <div class="detail-card-title"><i class="fa fa-exchange"></i>请求信息</div>
        <table class="detail-table">
            <tr>
                <th>请求地址</th>
                <td>
                    <span th:class="${'method-tag method-' + operLog.requestMethod}" th:text="${operLog.requestMethod}">POST</span>
                    <span th:text="${operLog.operUrl}">-</span>
                </td>
            </tr>
            <tr>
                <th>操作方法</th>
                <td class="mono" th:text="${operLog.method}">-</td>
            </tr>
            <tr>
                <th>消耗时间</th>
                <td><span th:text="${operLog.costTime}">0</span> 毫秒</td>
            </tr>
        </table>
    </div>

    <!-- 请求参数 -->
    <div class="detail-card">
        <div class="detail-card-title"><i class="fa fa-arrow-circle-up"></i>请求参数</div>
        <div style="padding: 6px 18px 14px;">
            <div class="code-wrap">
                <div class="code-action">
                    <button class="btn-copy" onclick="copyCode('operParam')"><i class="fa fa-copy"></i> 复制</button>
                </div>
                <pre id="operParam"></pre>
            </div>
        </div>
    </div>

    <!-- 返回参数 -->
    <div class="detail-card">
        <div class="detail-card-title"><i class="fa fa-arrow-circle-down"></i>返回参数</div>
        <div style="padding: 6px 18px 14px;">
            <div class="code-wrap">
                <div class="code-action">
                    <button class="btn-copy" onclick="copyCode('jsonResult')"><i class="fa fa-copy"></i> 复制</button>
                </div>
                <pre id="jsonResult"></pre>
            </div>
        </div>
    </div>

    <!-- 异常信息（仅异常时显示） -->
    <div class="detail-card" th:if="${operLog.status != 0}">
        <div class="detail-card-title" style="color:#c0392b;"><i class="fa fa-warning"></i>异常信息</div>
        <div style="padding: 12px 18px;">
            <div class="error-msg" th:text="${operLog.errorMsg}">-</div>
        </div>
    </div>

</div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: jsonview-js" />
<script th:inline="javascript">
    $(function() {
        var operParam = [[${operLog.operParam}]];
        if ($.common.isNotEmpty(operParam) && operParam.length < 2000) {
            $("#operParam").JSONView(operParam);
        } else {
            $("#operParam").text(operParam || '（无参数）');
        }
        var jsonResult = [[${operLog.jsonResult}]];
        if ($.common.isNotEmpty(jsonResult) && jsonResult.length < 2000) {
            $("#jsonResult").JSONView(jsonResult);
        } else {
            $("#jsonResult").text(jsonResult || '（无返回数据）');
        }
    });

    function copyCode(id) {
        var text = document.getElementById(id).innerText || '';
        if (navigator.clipboard) {
            navigator.clipboard.writeText(text).then(function() { showToast('已复制'); });
        } else {
            var ta = document.createElement('textarea');
            ta.value = text;
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            document.body.removeChild(ta);
            showToast('已复制');
        }
    }

    function showToast(msg) {
        var t = document.createElement('div');
        t.textContent = msg;
        t.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);' +
            'background:rgba(0,0,0,0.7);color:#fff;padding:6px 18px;border-radius:16px;' +
            'font-size:12px;z-index:9999;pointer-events:none;';
        document.body.appendChild(t);
        setTimeout(function(){ document.body.removeChild(t); }, 1800);
    }
</script>
</body>
</html>