<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('Summernote富文本编辑器')" />
    <th:block th:include="include :: summernote-css" />
    <style>
        .result-panel {
            border-left: 1px solid #e7eaec;
            height: 100%;
            padding: 15px;
            background-color: #f9f9f9;
        }
        .error-item {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 3px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .error-title {
            font-weight: bold;
            margin-bottom: 8px;
        }
        .common-error .error-title {
            color: #ed5565; /* Red for common errors */
        }
        .political-error .error-title {
            /*color: #f8ac59;*/ /* Orange for political errors */
            color: #ed5565;
        }
        .suggestion-table {
            width: 100%;
            border-collapse: collapse;
        }
        .suggestion-table th, .suggestion-table td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }
        .confidence {
            font-size: 12px;
            color: #888;
        }
        .editor-footer {
            padding: 15px;
            border-top: 1px solid #e7eaec;
            text-align: center;
            background-color: #fff;
        }
        .political-warning {
            /*color: #f8ac59;*/
            font-weight: bold;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-content no-padding">
                    <div class="summernote">
                        <p>疫情爆发</p>
                    </div>
                    <div class="editor-footer">
                        <button id="checkBtn" class="btn btn-primary btn-sm">
                            <i class="fa fa-check"></i> 校对
                        </button>
                        <button id="resetBtn" class="btn btn-warning btn-sm">
                            <i class="fa fa-refresh"></i> 重置
                        </button>
                        <button id="clearBtn" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash"></i> 清空
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>校对结果</h5>
                </div>
                <div class="ibox-content result-panel">
                    <div id="checkResults">
                        <div class="text-muted" style="text-align: center; padding: 20px;">
                            <i class="fa fa-info-circle fa-2x"></i>
                            <p>点击"校对"按钮检查文档内容</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<script>
    var initialContent = '疫情爆发';
    var prefix = ctx + "project/jiaodui";

    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN',
            minHeight: 420,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['picture', 'link', 'video', 'table', 'hr']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });

        $('#checkBtn').click(function() {
            var content = $('.summernote').summernote('code');
            var data = { "content": content, "title": "文本校对", "type": "1" };

            $.get(prefix + "/jiaodui", data, function(result) {
                if (result.code == web_status.SUCCESS) {
                    let errorData = result.data;
                    let resultHtml = '';

                    // 分类错误数据
                    let commonErrors = errorData.filter(error => error.errorType === 'common');
                    let politicalErrors = errorData.filter(error => error.errorType === 'political');

                    // 常见错误部分
                    if (commonErrors.length > 0) {
                        let commonErrorHtml = '';
                        commonErrors.forEach(error => {
                            commonErrorHtml += `
                                <div class="error-content">
                                    <h4>${error.wrongWord}</h4>
                                    <table class="suggestion-table">
                                        <tr>
                                            <th>修改建议</th>
                                            <td>${error.correctWord}</td>
                                        </tr>
                                    </table>
                                </div>
                            `;
                        });

                        resultHtml += `
                            <div class="error-item common-error">
                                <div class="error-title">常见错误（${commonErrors.length}）</div>
                                ${commonErrorHtml}
                            </div>
                        `;
                    }

                    // 政治常识部分 - 不再显示修改建议
                    if (politicalErrors.length > 0) {
                        let politicalErrorHtml = '';
                        politicalErrors.forEach(error => {
                            politicalErrorHtml += `
                                <div class="error-content">
                                    <h4 class="political-warning">${error.wrongWord}</h4>
                                    <table class="suggestion-table">
                                        <tr>
                                            <th>问题类型</th>
                                            <td>政治表述问题</td>
                                        </tr>
                                        <!--<tr>
                                            <th>处理建议</th>
                                            <td>需要人工核查</td>
                                        </tr>-->
                                    </table>
                                </div>
                            `;
                        });

                        resultHtml += `
                            <div class="error-item political-error">
                                <div class="error-title">政治表述（${politicalErrors.length}）</div>
                                ${politicalErrorHtml}
                            </div>
                        `;
                    }

                    // 如果没有错误
                    if (commonErrors.length === 0 && politicalErrors.length === 0) {
                        resultHtml = `
                            <div class="text-muted" style="text-align: center; padding: 20px;">
                                <i class="fa fa-check-circle fa-2x" style="color:#1ab394"></i>
                                <p>未发现需要修改的内容</p>
                            </div>
                        `;
                    }

                    $('#checkResults').html(resultHtml);
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            });
        });

        // 重置按钮
        $('#resetBtn').click(function() {
            $('.summernote').summernote('code', initialContent);
            $('#checkResults').html('<div class="text-muted" style="text-align: center; padding: 20px;"><i class="fa fa-info-circle fa-2x"></i><p>内容已重置，请重新校对</p></div>');
            toastr.success('内容已重置为初始状态');
        });

        // 清空按钮
        $('#clearBtn').click(function() {
            if(confirm('确定要清空编辑器内容吗？')) {
                $('.summernote').summernote('reset');
                $('#checkResults').html('<div class="text-muted" style="text-align: center; padding: 20px;"><i class="fa fa-info-circle fa-2x"></i><p>内容已清空，请重新校对</p></div>');
                toastr.info('编辑器内容已清空');
            }
        });
    });
</script>
</body>
</html>