<!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;
    }
    .layui-form-mid {
        float: none;    
    }
    </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>
            <div class="layui-form">

                <div class="layui-form-item">
                    <label class="layui-form-label">代理类型</label>
                    <div class="layui-input-block">
                      <select name="proxyType" lay-filter="proxyType">
                        <option value="DIRECT" th:selected="${@networkConfig.proxyType == ProxyTypeEnum.DIRECT}">无</option>
                        <option value="HTTP" th:selected="${@networkConfig.proxyType == ProxyTypeEnum.HTTP}">Http(s)</option>
                        <option value="SOCKS" th:selected="${@networkConfig.proxyType == ProxyTypeEnum.SOCKS}">Socks</option>
                      </select>
                    </div>
                </div>  
                
                <div class="layui-form-item">
                    <label class="layui-form-label">代理地址</label>
                    <div class="layui-input-block">
                        <input class="layui-input" autocomplete="off"
                        th:value="${@networkConfig.proxyHost}" name="proxyHost"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">代理端口</label>
                    <div class="layui-input-block">
                        <input class="layui-input" autocomplete="off" type="number" min="1" max="65535"
                          th:value="${@networkConfig.proxyPort}" name="proxyPort" lay-verify="number|gt:0|le:65535"/>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">忽略 HTTPS 证书校验<span>*</span></label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" lay-text="ON|OFF"
                        lay-filter="isAnonymous"
                        th:value="${@networkConfig.ignoreHttpsVerification}"
                        th:checked="${@networkConfig.ignoreHttpsVerification}"
                        name="ignoreHttpsVerification" lay-verify="required"/>
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        出于安全考虑，当且仅当使用 Fiddler/BurpSuite 调试时才建议启用
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">可信 IP 或 CIDR 段</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" name="trustedProxies" class="layui-textarea"
                        th:text="${@networkConfig == null?'':@networkConfig.trustedProxies}"
                        ></textarea>
                        
                    <div class="layui-form-mid layui-word-aux">
                    可信 IP 或 CIDR 段，用于从客户端请求中解析头中的真实 IP
                    </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>
        <div th:replace="~{admin/include::feet}"></div>
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        
        <script>
        layui.use(['form'], function(){
            var form = layui.form;
            document.querySelectorAll('[lay-skin="switch"]').forEach(check => {
                form.on(`switch(${check.getAttribute('lay-filter')})`, (data) => {
                    var el = data.elem;
                    el.value = !!el.checked;
                });
            })
            form.on('submit(submit)', function(data){
                $.ajax({
                    url: location.href,
                    data: JSON.stringify(data.field),
                    contentType: 'application/json',
                    method: 'POST',
                    success: function (result) {
                        layer.msg('保存成功', {time:1000}, function(){
                            location.reload();
                        });
                    },
                    error: function (res) {
                        var r = res.responseJSON;
                        layer.msg(r&&r.data||'服务器错误', {time:2000});
                    }
                });
            });
            form.render();
            
        })
        </script>
    </body>

</html>