{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-clock-history"></i> 操作日志</h2>
    <div>
        <button class="btn btn-success" onclick="exportLogs()">
            <i class="bi bi-download"></i> 导出Excel
        </button>
    </div>
</div>

<!-- ====== 查询区域 ====== -->
<div class="card mb-4">
    <div class="card-body">
        <form id="searchForm" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">操作人</label>
                <input type="text" id="searchPerson" class="form-control" placeholder="输入操作人姓名">
            </div>
            <div class="col-md-2">
                <label class="form-label">操作类型</label>
                <select id="searchAction" class="form-select">
                    <option value="">全部</option>
                    <option value="login">登录</option>
                    <option value="logout">退出</option>
                    <option value="add_user">添加用户</option>
                    <option value="edit_user">编辑用户</option>
                    <option value="delete_user">删除用户</option>
                    <option value="reset_password">重置密码</option>
                    <option value="checkin">上班打卡</option>
                    <option value="checkout">下班打卡</option>
                    <option value="add_rule">添加考勤规则</option>
                    <option value="edit_rule">编辑考勤规则</option>
                    <option value="delete_rule">删除考勤规则</option>
                    <option value="toggle_rule">启用/停用考勤规则</option>
                    <option value="add_department">添加部门</option>
                    <option value="edit_department">编辑部门</option>
                    <option value="delete_department">删除部门</option>
                    <option value="import_departments">导入部门</option>
                    <option value="import_users">导入用户</option>
                    <option value="export_records">导出考勤记录</option>
                    <option value="export_stats">导出考勤统计</option>
                    <option value="export_rules">导出考勤规则</option>
                    <option value="export_departments">导出部门列表</option>
                    <option value="export_users">导出用户列表</option>
                    <option value="export_logs">导出操作日志</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">开始日期</label>
                <input type="date" id="searchStartDate" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">结束日期</label>
                <input type="date" id="searchEndDate" class="form-control">
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-primary" onclick="searchLogs()">
                    <i class="bi bi-search"></i> 查询
                </button>
                <button type="button" class="btn btn-outline-secondary ms-2" onclick="resetSearch()">
                    <i class="bi bi-arrow-counterclockwise"></i> 重置
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ====== 日志列表 ====== -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>操作人</th>
                        <th>用户名</th>
                        <th>操作类型</th>
                        <th>操作对象</th>
                        <th>操作详情</th>
                        <th>IP地址</th>
                    </tr>
                </thead>
                <tbody id="logsBody">
                    <tr><td colspan="7" class="text-center text-muted">加载中...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="mt-2 text-muted small" id="logCount">共 0 条记录</div>

<script>
// ====== 操作类型映射 ======
const actionMap = {
    'login': '<span class="badge bg-info">登录</span>',
    'logout': '<span class="badge bg-secondary">退出</span>',
    'add_user': '<span class="badge bg-success">添加用户</span>',
    'edit_user': '<span class="badge bg-primary">编辑用户</span>',
    'delete_user': '<span class="badge bg-danger">删除用户</span>',
    'reset_password': '<span class="badge bg-warning text-dark">重置密码</span>',
    'checkin': '<span class="badge bg-success">上班打卡</span>',
    'checkout': '<span class="badge bg-primary">下班打卡</span>',
    'add_rule': '<span class="badge bg-success">添加规则</span>',
    'edit_rule': '<span class="badge bg-primary">编辑规则</span>',
    'delete_rule': '<span class="badge bg-danger">删除规则</span>',
    'toggle_rule': '<span class="badge bg-warning text-dark">启用/停用</span>',
    'add_department': '<span class="badge bg-success">添加部门</span>',
    'edit_department': '<span class="badge bg-primary">编辑部门</span>',
    'delete_department': '<span class="badge bg-danger">删除部门</span>',
    'import_departments': '<span class="badge bg-success">导入部门</span>',
    'import_users': '<span class="badge bg-success">导入用户</span>',
    'export_records': '<span class="badge bg-info">导出考勤记录</span>',
    'export_stats': '<span class="badge bg-info">导出考勤统计</span>',
    'export_rules': '<span class="badge bg-info">导出考勤规则</span>',
    'export_departments': '<span class="badge bg-info">导出部门列表</span>',
    'export_users': '<span class="badge bg-info">导出用户列表</span>',
    'export_logs': '<span class="badge bg-info">导出操作日志</span>'
};

// ====== 加载日志 ======
function loadLogs(logs) {
    const tbody = document.getElementById('logsBody');
    if (!logs || logs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">暂无记录</td></tr>';
        document.getElementById('logCount').textContent = '共 0 条记录';
        return;
    }
    tbody.innerHTML = logs.map(log => `
        <tr>
            <td>${log.created_at}</td>
            <td>${log.real_name}</td>
            <td>${log.username}</td>
            <td>${actionMap[log.action] || '<span class="badge bg-secondary">' + log.action + '</span>'}</td>
            <td>${log.target || '-'}</td>
            <td>${log.details || '-'}</td>
            <td>${log.ip_address || '-'}</td>
        </tr>
    `).join('');
    document.getElementById('logCount').textContent = `共 ${logs.length} 条记录`;
}

// ====== 查询日志 ======
function searchLogs() {
    const person = document.getElementById('searchPerson').value.trim();
    const action = document.getElementById('searchAction').value;
    const startDate = document.getElementById('searchStartDate').value;
    const endDate = document.getElementById('searchEndDate').value;

    let url = '/api/operation_logs/search?';
    const params = [];
    if (person) params.push('person=' + encodeURIComponent(person));
    if (action) params.push('action=' + encodeURIComponent(action));
    if (startDate) params.push('start_date=' + encodeURIComponent(startDate));
    if (endDate) params.push('end_date=' + encodeURIComponent(endDate));
    url += params.join('&');

    fetch(url)
        .then(r => r.json())
        .then(data => {
            loadLogs(data);
        })
        .catch(err => {
            console.error('查询失败:', err);
            alert('查询失败，请重试');
        });
}

// ====== 重置查询 ======
function resetSearch() {
    document.getElementById('searchPerson').value = '';
    document.getElementById('searchAction').value = '';
    document.getElementById('searchStartDate').value = '';
    document.getElementById('searchEndDate').value = '';
    loadAllLogs();
}

// ====== 加载所有日志 ======
function loadAllLogs() {
    fetch('/api/operation_logs/all')
        .then(r => r.json())
        .then(data => {
            loadLogs(data);
        })
        .catch(err => {
            console.error('加载失败:', err);
        });
}

// ====== 导出 ======
function exportLogs() {
    // 获取当前筛选条件
    const person = document.getElementById('searchPerson').value.trim();
    const action = document.getElementById('searchAction').value;
    const startDate = document.getElementById('searchStartDate').value;
    const endDate = document.getElementById('searchEndDate').value;

    let url = '/operation_logs/export?';
    const params = [];
    if (person) params.push('person=' + encodeURIComponent(person));
    if (action) params.push('action=' + encodeURIComponent(action));
    if (startDate) params.push('start_date=' + encodeURIComponent(startDate));
    if (endDate) params.push('end_date=' + encodeURIComponent(endDate));
    url += params.join('&');

    window.location.href = url;
}

// ====== 回车键触发查询 ======
document.getElementById('searchForm').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        searchLogs();
    }
});

// ====== 页面加载时显示所有日志 ======
loadAllLogs();
</script>
{% endblock %}