<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>令牌使用日志</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">令牌使用日志</div>
            <div class="layui-card-body">
                <table id="log-table" lay-filter="log-table"></table>
            </div>
        </div>
    </div>

    <!-- 状态模板 -->
    <script type="text/html" id="statusTpl">
        {{# if(d.status === 'success'){ }}
            <span class="layui-badge layui-bg-green">成功</span>
        {{# } else { }}
            <span class="layui-badge layui-bg-red">失败</span>
        {{# } }}
    </script>

    <!-- 操作类型模板 -->
    <script type="text/html" id="actionTpl">
        {{# var types = {
            'create': '创建',
            'use': '使用',
            'revoke': '撤销'
        }; }}
        {{# var type = types[d.action] || d.action; }}
        <span>{{type}}</span>
    </script>

    <script src="/static/layui/layui.js"></script>
    <script>
    layui.use(['table', 'layer'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        
        // 获取令牌ID
        var tokenId = location.search.match(/id=(\d+)/)[1];
        
        // 初始化表格
        table.render({
            elem: '#log-table',
            url: '/api/tokens/' + tokenId + '/logs',
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('token')
            },
            cols: [[
                {field: 'action', title: '操作类型', width: 100, templet: '#actionTpl'},
                {field: 'ip', title: 'IP地址', width: 150},
                {field: 'userAgent', title: 'User-Agent', width: 300},
                {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                {field: 'message', title: '详细信息'},
                {field: 'createdAt', title: '时间', width: 160}
            ]],
            page: true
        });
    });
    </script>
</body>
</html> 