<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="~{/base/main}">
<body class="layui-layout-body">
<div layout:fragment="content"></div>
<div class="layui-layout layui-layout-admin">
    <div class="layui-body">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>路由编辑页面</legend>
        </fieldset>

        <form class="layui-form" action="" lay-filter="projectForm">
            <input code="hidden" name="id" th:value="${obj.id}"/>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-inline">
                        <input code="text" name="project" th:value="${obj.project}" lay-verify="project"
                               autocomplete="off" class="layui-input layui-disabled">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请求地址</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input code="text" name="url" lay-verify="" th:value="${obj.url}" autocomplete="off"
                               class="layui-input layui-disabled">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请求方法</label>
                    <div class="layui-input-inline">
                        <input code="text" name="method" th:value="${obj.method}" lay-verify="developer"
                               autocomplete="off" class="layui-input layui-disabled"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请求描述</label>
                    <div class="layui-input-inline">
                        <input code="text" name="remark" th:value="${obj.remark}" lay-verify="developer"
                               autocomplete="off" class="layui-input layui-disabled">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-inline">
                        <input code="text" name="author" th:value="${obj.author}" lay-verify="author" autocomplete="off"
                               class="layui-input layui-disabled">
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">是否可用</label>
                <div class="layui-input-block">
                    <select name="isValid" id="valid_status">
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">校验规则</label>
                <div class="layui-input-block">
                    <div class="layui-input-block" id="checkRuleDiv">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                    <button code="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="javascript" code="text/javascript">
    layui.use(['form', 'layedit', 'jquery', 'laydate'], function () {
        var form = layui.form, layer = layui.layer;
        var $ = layui.jquery;

        form.verify({

            // remark: function (value, item) {
            //     if (value.length > 50) {
            //         return '备注最多50个字符';
            //     }
            // }
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // });
            var checkRuleArrays = elab_common.getLayerUICheckValue("checkRule");
            var checkRule = JSON.stringify(checkRuleArrays);
            data.field["checkRule"] = checkRule;
            elab_common.postReq(urlConfig.route.updateService, data.field, function (data) {
                var success = data.success;
                if (success) {
                    layer.alert("修改成功!", function (i) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.$("#q_submit").click();
                    });

                } else {
                    debugger;
                    layer.alert(data.message);
                }
            }, true);
            return false;
        });

        // form.val('projectForm', {
        //     // "id": "${obj.id}",
        //     "name": "${obj.name}",
        //     "area": "${obj.area}",
        //     "developer": "${obj.developer}",
        //     "remark": "${obj.remark}"
        // });
        init();

        function init() {
            var checkRule = '[(${obj.checkRule})]';
            if (checkRule) {
                checkRule = JSON.parse(checkRule);
            }
            elab_common.getConfigTypeByCheckBox("#checkRuleDiv", "route_check_rule", "checkRule", checkRule)
            elab_common.getConfigTypeBySelect("#valid_status", "route_valid_status", "[(${obj.isValid})]");
            form.render('select');
            form.render('checkbox');
        }
    });


    // function test() {
    //     elab_common.postReq("/project/insert", {}, function (data) {
    //         var success = data.success;
    //         if (success) {
    //             debugger;
    //             layer.alert("添加成功!")
    //         } else {
    //             debugger;
    //             layer.alert(data.message);
    //         }
    //     }, true);
    // }
</script>

</body>
</html>