<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('常见错误监测列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <!-- 新增统计信息展示区域 -->
    <div class="row">
        <div class="col-sm-12">
            <div class="dashboard-stat">
                <div class="stat-item">
                    <div class="stat-number" id="errorWordCount">0</div>
                    <div class="stat-title">错别字</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="processedCount">0</div>
                    <div class="stat-title">已处理数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="noNeedProcessCount">0</div>
                    <div class="stat-title">不必处理数</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <!-- 原有搜索表单内容保持不变 -->
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="biaoji()" shiro:hasPermission="project:sensitiveresult:edit">
                <i class="fa fa-edit"></i> 批量标记
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="project:sensitiveresult:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="project:sensitiveresult:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<style>
    /* 新增统计区域样式 */
    .dashboard-stat {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
        background: #fff;
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .stat-item {
        text-align: center;
        padding: 10px 20px;
    }
    .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #1ab394;
    }
    .stat-title {
        font-size: 14px;
        color: #676a6c;
        margin-top: 5px;
    }
</style>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('project:sensitiveresult:edit')}]];
    var removeFlag = [[${@permission.hasPermi('project:sensitiveresult:remove')}]];
    var errorTypeDatas = [[${@dict.getType('trs_error_type')}]];
    var statusDatas = [[${@dict.getType('trs_oper_type')}]];
    var prefix = ctx + "project/sensitiveresult";

    $(function() {
        // 初始化表格
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "常见错误监测",
            onLoadSuccess: function(data) {
                // 表格加载成功后更新统计数据
                //updateStatistics(data);
            },
            columns: [
                // 原有列配置保持不变
            ]
        };
        $.table.init(options);

        // 初始加载统计数据
        loadStatistics();
    });

    // 加载统计数据
    function loadStatistics() {
        $.ajax({
            url: prefix + "/statistics",
            type: "GET",
            success: function(res) {
                if (res.code === 200) {
                    $('#errorWordCount').text(res.data.errorWordCount || 0);
                    $('#processedCount').text(res.data.processedCount || 0);
                    $('#noNeedProcessCount').text(res.data.noNeedProcessCount || 0);
                }
            }
        });
    }

    // 从表格数据更新统计
    function updateStatistics(data) {
        if (!data || !data.rows) return;

        var errorWordCount = 0;
        var processedCount = 0;
        var noNeedProcessCount = 0;

        data.rows.forEach(function(item) {
            // 根据实际业务逻辑统计
            if (item.errorType === '1') { // 假设1表示错别字
                errorWordCount++;
            }
            if (item.status === '2') { // 假设2表示已处理
                processedCount++;
            }
            if (item.status === '3') { // 假设3表示不必处理
                noNeedProcessCount++;
            }
        });

        $('#errorWordCount').text(errorWordCount);
        $('#processedCount').text(processedCount);
        $('#noNeedProcessCount').text(noNeedProcessCount);
    }

    // 原有biaoji函数保持不变
    function biaoji(id) {
        // 原有实现
    }

    // 在操作成功后刷新统计数据
    function refreshAfterAction() {
        $('#bootstrap-table').bootstrapTable('refresh');
        loadStatistics();
    }
</script>
</body>
</html>