<!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;
            color: #ed5565;
            margin-bottom: 8px;
        }
        .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;
        }
    </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-title">
                    <h5>Summernote 富文本编辑器</h5>
                </div>-->
                <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": "文本校对" };
            $.get(prefix + "/jiaodui", data ,function(result) {
                if (result.code == web_status.SUCCESS) {
                    let errorData = result.data;
                    // 模拟校对结果 - 实际应用中这里应该是AJAX请求
                    let errorContentHtml = '';
                    errorData.forEach(error => {
                        errorContentHtml += `
                        <div class="error-content">
                          <h4>${error.wrongWord}</h4>
                          <table class="suggestion-table">
                            <tr>
                              <th>修改建议</th>
                              <td>${error.correctWord}</td>
                            </tr>
                            <!--<tr>
                              <th>置信度</th>
                              <td class="confidence">${error.confidence}</td>
                            </tr>-->
                          </table>
                        </div>
                      `;
                    });

                    // Now you can use errorContentHtml in your larger template
                    var resultHtml = `
                      <div class="error-item">
                        <div class="error-title">字词错误（${errorData.length}）</div>
                        ${errorContentHtml}
                      </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>