<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{admin/include::head}">
    </head>
    <style>
    .layui-form {
        padding: 18px 50px 1px 10px;background:white;
        box-shadow: 0 10px 20px 0 rgba(236,236,236,.86);
        border-radius: 5px;
    }
    .layui-elem-quote-warning {
        border-left: 5px solid #d8a900;
    }
    li {
        list-style-type: disc;
    }
    </style>
    <body style="background-color: #f2f2f2">
        <ul th:replace="~{admin/include::nav}"></ul>
        
        <div class="manage-body">
            <div>
            <h2 class="manage-title"><b>评论设置</b></h2>
            </div>
            <blockquote th:if="${@commentConfig == null}" class="layui-elem-quote layui-elem-quote-warning layui-text">
                您还没有设置评论规则。若要使规则生效，请配置一份规则并保存。
            </blockquote>
            <blockquote class="layui-elem-quote layui-text">
                设置评论规则，规则优先级按先后顺序排列。部分规则支持<a target="_blank" href="https://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a>
            </blockquote>
            <div class="layui-form" id="editCommentForm" lay-filter="editCommentForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">Markdown 开关</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                        th:attr="checked=${@commentConfig == null || @commentConfig.markdownOn}? ''"
                        th:value="${@commentConfig == null || @commentConfig.markdownOn}"
                        name="markdownOn" lay-skin="switch" lay-filter="markdownOnSwitch" lay-text="ON|OFF">
                    </div>
                    <div class="layui-form-mid layui-word-aux">评论是否开启 Markdown。</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">规则开关</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                        th:attr="checked=${@commentConfig == null || @commentConfig.ruleOn}? ''"
                        th:value="${@commentConfig == null || @commentConfig.ruleOn}"
                        name="ruleOn" lay-skin="switch" lay-filter="ruleOnSwitch" lay-text="ON|OFF">
                    </div>
                    <div class="layui-form-mid layui-word-aux">评论是否开启评论规则。</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最大评论层级<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@commentConfig.maxLevel}" lay-verify="required|number|ge:-1" name="commentPageSize"/>
                        <div class="layui-form-mid layui-word-aux">
                            允许回复的最大评论层级，设为 -1 则不限层级（不建议）。
                        </div>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>屏蔽 IP</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">动作</label>
                    <div class="layui-input-block">
                      <input type="radio" name="blockIpAction" value="NONE" title="无"
                      th:attr="checked=${@commentConfig == null || @commentConfig.blockIpAction.toString() == 'NONE'}? 'checked'">
                      <input type="radio" name="blockIpAction" value="WAITING" title="标记为待审"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockIpAction.toString() == 'WAITING'}? 'checked'">
                      <input type="radio" name="blockIpAction" value="SPAM" title="标记为垃圾"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockIpAction.toString() == 'SPAM'}? 'checked'">
                      <input type="radio" name="blockIpAction" value="FAIL" title="评论失败"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockIpAction.toString() == 'FAIL'}? 'checked'">
                    </div>
                    <div class="layui-form-mid layui-word-aux">如果评论发布者的 IP 在屏蔽 IP 段，将执行该操作</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">屏蔽 IP 段</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" name="blockIpListText" class="layui-textarea"
                        th:text="${@commentConfig == null?'':@commentConfig.blockIpListText}"
                        ></textarea>
                        
                    <div class="layui-form-mid layui-word-aux">多条IP请用换行符隔开
                        <br>支持用*号和?号匹配IP段，如：192.168.*.*，172.1?.*.* <b>不支持</b>正则表达式</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">后续动作</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                      name="blockIpActionAfter[BLOCK_EMAIL]" 
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockIpActionAfter.toString() == 'BLOCK_EMAIL'}? 'checked'"
                      lay-skin="primary" title="将邮箱添加到屏蔽邮箱">
                    </div>
                    <div class="layui-form-mid layui-word-aux">触发垃圾/评论失败后的动作</div>
                </div>
                
                
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>屏蔽邮箱</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">动作</label>
                    <div class="layui-input-block">
                      <input type="radio" name="blockEmailAction" value="NONE" title="无"
                      th:attr="checked=${@commentConfig == null || @commentConfig.blockEmailAction.toString() == 'NONE'}? 'checked'">
                      <input type="radio" name="blockEmailAction" value="WAITING" title="标记为待审"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockEmailAction.toString() == 'WAITING'}? 'checked'">
                      <input type="radio" name="blockEmailAction" value="SPAM" title="标记为垃圾"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockEmailAction.toString() == 'SPAM'}? 'checked'">
                      <input type="radio" name="blockEmailAction" value="FAIL" title="评论失败"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockEmailAction.toString() == 'FAIL'}? 'checked'">
                    </div>
                    <div class="layui-form-mid layui-word-aux">如果评论发布者的邮箱匹配如下的正则表达式（忽略大小写），将执行该操作</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">屏蔽邮箱</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" name="blockEmailListText" 
                        th:text="${@commentConfig == null?'':@commentConfig.blockEmailListText}"
                        class="layui-textarea"></textarea>
                        
                    <div class="layui-form-mid layui-word-aux">一行一条记录，支持正则表达式，请注意：
                        <ul>
                            <li>由于邮箱中可能出现的“-”和“.”属于正则表达式的保留字符，为保证不产生歧义，请手动对邮箱地址中的这两个字符进行转义。</li>
                            <li>欲匹配完整邮箱时，请手动在邮箱起始位置加入“^”字符、结尾位置加入“$”字符，否则可能造成匹配扩散</li>
                        </ul>
                    </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">后续动作</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                      name="blockEmailActionAfter[BLOCK_IP]" 
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockEmailActionAfter.toString() == 'BLOCK_IP'}? 'checked'"
                      lay-skin="primary" title="将IP添加到屏蔽IP">
                    </div>
                    <div class="layui-form-mid layui-word-aux">触发垃圾/评论失败后的动作</div>
                </div>
                
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>非中文评论</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">动作</label>
                    <div class="layui-input-block">
                      <input type="radio" name="nonChineseAction" value="NONE" title="无" 
                      th:attr="checked=${@commentConfig == null || @commentConfig.nonChineseAction.toString() == 'NONE'}? 'checked'">
                      <input type="radio" name="nonChineseAction" value="WAITING" title="标记为待审"
                      th:attr="checked=${@commentConfig != null && @commentConfig.nonChineseAction.toString() == 'WAITING'}? 'checked'">
                      <input type="radio" name="nonChineseAction" value="SPAM" title="标记为垃圾"
                      th:attr="checked=${@commentConfig != null && @commentConfig.nonChineseAction.toString() == 'SPAM'}? 'checked'">
                      <input type="radio" name="nonChineseAction" value="FAIL" title="评论失败"
                      th:attr="checked=${@commentConfig != null && @commentConfig.nonChineseAction.toString() == 'FAIL'}? 'checked'">
                    </div>
                    <div class="layui-form-mid layui-word-aux">如果评论不包含中文，则执行该操作</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">后续动作</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                      name="nonChineseActionAfter[BLOCK_IP]" 
                      th:attr="checked=${@commentConfig != null && (@commentConfig.nonChineseActionAfter.toString() == 'BLOCK_IP' || @commentConfig.nonChineseActionAfter.toString() == 'BOTH')}? 'checked'"
                      lay-skin="primary" title="将IP添加到屏蔽IP">
                      <input type="checkbox" 
                      name="nonChineseActionAfter[BLOCK_EMAIL]" 
                      th:attr="checked=${@commentConfig != null && (@commentConfig.nonChineseActionAfter.toString() == 'BLOCK_EMAIL' || @commentConfig.nonChineseActionAfter.toString() == 'BOTH')}? 'checked'"
                      lay-skin="primary" title="将邮箱添加到屏蔽邮箱">
                    </div>
                    <div class="layui-form-mid layui-word-aux">触发垃圾/评论失败后的动作</div>
                </div>
                
                
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>违禁词（包括姓名）</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">动作</label>
                    <div class="layui-input-block">
                      <input type="radio" name="blockWordAction" value="NONE" title="无" 
                      th:attr="checked=${@commentConfig == null || @commentConfig.blockWordAction.toString() == 'NONE'}? 'checked'">
                      <input type="radio" name="blockWordAction" value="WAITING" title="标记为待审"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockWordAction.toString() == 'WAITING'}? 'checked'">
                      <input type="radio" name="blockWordAction" value="SPAM" title="标记为垃圾"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockWordAction.toString() == 'SPAM'}? 'checked'">
                      <input type="radio" name="blockWordAction" value="FAIL" title="评论失败"
                      th:attr="checked=${@commentConfig != null && @commentConfig.blockWordAction.toString() == 'FAIL'}? 'checked'">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">违禁词列表</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" name="blockWordListText" 
                        th:text="${@commentConfig == null?'':@commentConfig.blockWordListText}"
                        class="layui-textarea"></textarea>
                        
                    <div class="layui-form-mid layui-word-aux">多条违禁词请用换行符隔开，大小写不敏感
                        <br>支持正则表达式，如“[傻啥][B逼壁比]”将屏蔽“傻B”、“啥比”</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">后续动作</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                      name="blockWordActionAfter[BLOCK_IP]" 
                      th:attr="checked=${@commentConfig != null && (@commentConfig.blockWordActionAfter.toString() == 'BLOCK_IP' || @commentConfig.blockWordActionAfter.toString() == 'BOTH')}? 'checked'"
                      lay-skin="primary" title="将IP添加到屏蔽IP">
                      <input type="checkbox" 
                      name="blockWordActionAfter[BLOCK_EMAIL]" 
                      th:attr="checked=${@commentConfig != null && (@commentConfig.blockWordActionAfter.toString() == 'BLOCK_EMAIL' || @commentConfig.blockWordActionAfter.toString() == 'BOTH')}? 'checked'"
                      lay-skin="primary" title="将邮箱添加到屏蔽邮箱">
                    </div>
                    <div class="layui-form-mid layui-word-aux">触发垃圾/评论失败后的动作</div>
                </div>
                
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>敏感词（包括姓名）</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">动作</label>
                    <div class="layui-input-block">
                      <input type="radio" name="sensitiveWordAction" value="NONE" title="无"  
                      th:attr="checked=${@commentConfig == null || @commentConfig.sensitiveWordAction.toString() == 'NONE'}? 'checked'">
                      <input type="radio" name="sensitiveWordAction" value="WAITING" title="标记为待审" 
                      th:attr="checked=${@commentConfig != null && @commentConfig.sensitiveWordAction.toString() == 'WAITING'}? 'checked'">
                      <input type="radio" name="sensitiveWordAction" value="SPAM" title="标记为垃圾"
                      th:attr="checked=${@commentConfig != null && @commentConfig.sensitiveWordAction.toString() == 'SPAM'}? 'checked'">
                      <input type="radio" name="sensitiveWordAction" value="FAIL" title="评论失败"
                      th:attr="checked=${@commentConfig != null && @commentConfig.sensitiveWordAction.toString() == 'FAIL'}? 'checked'">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">敏感词列表</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" name="sensitiveWordListText" 
                        th:text="${@commentConfig == null?'':@commentConfig.sensitiveWordListText}"
                        class="layui-textarea"></textarea>
                        
                    <div class="layui-form-mid layui-word-aux">多条敏感词请用换行符隔开，大小写不敏感
                        <br>支持正则表达式，如“[傻啥][B逼壁比]”将屏蔽“傻B”、“啥比”</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">后续动作</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                      name="sensitiveWordActionAfter[BLOCK_IP]" 
                      th:attr="checked=${@commentConfig != null && (@commentConfig.sensitiveWordActionAfter.toString() == 'BLOCK_IP' || @commentConfig.sensitiveWordActionAfter.toString() == 'BOTH')}? 'checked'"
                      lay-skin="primary" title="将IP添加到屏蔽IP">
                      <input type="checkbox" 
                      name="sensitiveWordActionAfter[BLOCK_EMAIL]" 
                      th:attr="checked=${@commentConfig != null && (@commentConfig.sensitiveWordActionAfter.toString() == 'BLOCK_EMAIL' || @commentConfig.sensitiveWordActionAfter.toString() == 'BOTH')}? 'checked'"
                      lay-skin="primary" title="将邮箱添加到屏蔽邮箱">
                    </div>
                    <div class="layui-form-mid layui-word-aux">触发垃圾/评论失败后的动作</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">HTML 审核开关</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                        th:attr="checked=${@commentConfig == null || @commentConfig.htmlWaitingOn}? ''"
                        th:value="${@commentConfig == null || @commentConfig.htmlWaitingOn}"
                        name="htmlWaitingOn" lay-skin="switch" lay-filter="htmlWaitingOnSwitch" lay-text="ON|OFF">
                    </div>
                    <div class="layui-form-mid layui-word-aux">当评论渲染 Markdown 后产生 a 标签和 img 标签时，是否置于待审核</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="~{admin/include::feet}"></div>
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        <div style="display:none" id="commentConfigJSON" th:text="${T(com.alibaba.fastjson2.JSON).toJSONString(@commentConfig)}"></div>
    <script>
        console.log(JSON.parse(document.querySelector('#commentConfigJSON').textContent))
        layui.use(['form'], function(){
            var form = layui.form;
            form.render();
            function getActionAfter(v) {
                var keyValue = v.attr('name'), s = keyValue.indexOf('['),
                key = keyValue.substring(0, s),
                value = keyValue.substring(s + 1, keyValue.length - 1);
                return {key:key, value:value, checked:!!v.prop('checked')};
            }
            form.on('submit(submit)', function(data){
                // 处理 ActionAfter
                var exData = {};
                $.each($('[lay-skin="switch"]'), function (i, v) {
                    v = $(v);
                    exData[v.attr('name')] = v.prop('checked');
                });
                var actionAfters = $('[type="checkbox"][lay-skin="primary"]');
                $.each(actionAfters, function (i, v){
                    v = $(v);
                    var thisKVC = getActionAfter(v),
                    siblings = v.siblings('input');
                    
                    if (!siblings.length) {
                        // 只有一个选项
                        exData[thisKVC.key] = thisKVC.checked?thisKVC.value:'NONE';
                    }
                    else {
                        // 有两个选项
                        var siblingKVC = getActionAfter($(siblings[0])), value = 'NONE';
                        
                        if (thisKVC.checked && siblingKVC.checked) {
                            value = 'BOTH';
                        }
                        else if (thisKVC.checked) {
                            value = thisKVC.value;
                        }
                        else if (siblingKVC.checked) {
                            value = siblingKVC.value;
                        }
                        exData[thisKVC.key] = value;
                        return true;
                    }
                });
                var postData = {};
                $.each($.extend(data.field, exData), function (i, v) {
                    if (i.indexOf('[') == -1) {
                        postData[i] = v;
                    }
                });
                
                $.ajax({
                    url: location.href,
                    data: JSON.stringify(postData),
                    method: 'POST',
                    contentType: 'application/json',
                    success: function (result) {
                        layer.msg('保存成功', {time:1000}, function(){
                            location.reload();
                        });
                    },
                    error: function (res) {
                        var r = res.responseJSON;
                        layer.msg(r&&r.data||'服务器错误', {time:2000});
                    }
                });
            });
        })
        </script>
    </body>

</html>