<!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;*/
            word-break: break-all;
            word-wrap: break-word;
            white-space: normal;
            display: inline-block;
            max-width: 100%;
        }
        .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;
        }
        /* 错误词高亮样式 */
        .error-highlight {
            background-color: #ffcccc;
            color: #ed5565;
            border-bottom: 1px dashed #ed5565;
            padding: 0 2px;
        }
        .error-content a {
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
        }
    </style>

    <style>
        /* 最简单的修改：只添加固定定位 */
        .col-sm-4 {
            position: fixed !important;
            /*top: 70px !important;*/
            right: 0px !important;
            /*width: 350px !important;*/
            z-index: 1000 !important;
            max-height: 80vh !important;
        }

        .col-sm-4 .ibox-content {
            max-height: calc(80vh - 50px) !important;
            overflow-y: auto !important;
        }
    </style>

    <style>
        /* 编辑器容器固定高度 */
        .ibox-content.no-padding {
            height: 500px; /* 固定高度 */
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* 编辑器区域自动滚动 */
        .summernote {
            flex: 1;
            overflow-y: auto;
        }

        /* 底部按钮固定在容器底部 */
        .editor-footer {
            position: sticky;
            bottom: 0;
            background-color: #fff;
            z-index: 100;
            padding: 15px;
            border-top: 1px solid #e7eaec;
            text-align: center;
        }
    </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  fixed-result-panel">
                <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";
    // 存储当前错误信息
    var currentErrors = [];

    $(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']]
            ]
        });

        // 清除所有错误高亮
        function clearErrorHighlights() {
            $('.summernote').summernote('code', $('.summernote').summernote('code').replace(/<span class="error-highlight"[^>]*>(.*?)<\/span>/g, '$1'));
        }

        // 高亮显示错误词
        function highlightErrors(errors) {
            var content = $('.summernote').summernote('code');

            errors.forEach(function(error) {
                // 创建正则表达式，确保不会重复高亮已标记的内容
                var regex = new RegExp(error.wrongWord.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), 'g');
                content = content.replace(regex, '<span class="error-highlight" data-error-type="' + error.sitename + '">$&</span>');
            });

            $('.summernote').summernote('code', content);
        }

        $('#checkBtn').click(function() {
            clearErrorHighlights(); // 先清除之前的高亮

            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;
                    currentErrors = errorData; // 存储当前错误信息

                    // 高亮显示错误词
                    if (errorData.length > 0) {
                        highlightErrors(errorData);
                    }

                    let resultHtml = '';

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

                    // 常见错误部分
                    if (commonErrors.length > 0) {
                        let commonErrorHtml = '';
                        commonErrors.forEach((error, index) => {
                            commonErrorHtml += `
                                <div class="error-content">
                                    <h4>${index + 1}、${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, index) => {
                            politicalErrorHtml += `
                                <div class="error-content">
                                    <h4 class="political-warning">${index + 1}、${error.wrongWord}</h4>
                                    <table class="suggestion-table">
                                        <tr>
                                            <th>问题类型</th>
                                            <td>${error.errorType}</td>
                                        </tr>
                                        <tr>
                                            <th>来源</th>
                                            <td>${error.source}</td>
                                        </tr>
                                        <tr>
                                            <th>链接</th>
                                            <td>${error.url}</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() {
            clearErrorHighlights(); // 清除高亮
            $('.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('内容已重置为初始状态');
            currentErrors = []; // 清空错误信息
        });

        // 清空按钮
        $('#clearBtn').click(function() {
            if(confirm('确定要清空编辑器内容吗？')) {
                clearErrorHighlights(); // 清除高亮
                $('.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('编辑器内容已清空');
                currentErrors = []; // 清空错误信息
            }
        });
    });
</script>
</body>
</html>