<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="~{/base/main}">

<head>
    <script src="/lib/json-viewer/jquery.json-viewer.js"></script>
    <link href="/lib/json-viewer/jquery.json-viewer.css" type="text/css" rel="stylesheet">
    <script src="/lib/jsoneditor/dist/jsoneditor.js"></script>
    <link href="/lib/jsoneditor/dist/jsoneditor.css" type="text/css" rel="stylesheet">
</head>
<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 layui-form-pane" action="" lay-filter="projectForm">
            <input type="hidden" name="id" th:value="${obj.id}"/>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">告警标题</label>
                <div class="layui-input-block">
                    <input code="text" name="alertName" th:value="${obj.alertName}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">告警平台</label>
                <div class="layui-input-block">
                    <select id="form_platformType" name="platformType" lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">请求地址</label>
                <div class="layui-input-block">
                        <textarea name="url" lay-verify="required|url" autocomplete="off" placeholder="请输入内容"
                                  class="layui-textarea" th:text="${obj.url}">
                        </textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请求描述</label>
                <div class="layui-input-block">
                    <input code="text" name="remark" th:value="${obj.remark}" lay-verify="remark"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">是否可用</label>
                <div class="layui-input-block">
                    <select name="status" id="valid_status" lay-verify="required">
                    </select>
                </div>
            </div>

            <div class="layui-form-item" style="height: 70%;width: 80%">
                <label class="layui-form-label">拓展参数</label>
                <div class="layui-input-block">
                    <span id="json-renderer" name="extJson">
                    </span>
                </div>
            </div>

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

<!-- 后台参数暂存路径 -->
<input type="hidden" th:value="${alertPlatformList}" id="alertPlatformList"/>

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

        // 参数校验阶段
        form.verify({
            url_verify: function (value) {
                if (!value.startsWith("http://") && !value.startsWith("https://")) {
                    return '请填写合法的链接地址';
                }
            }
        });

        // 提交前的数据格式化准备
        form.on('submit(submit)', function (data) {
            try {
                editorComponents.get();
            }catch (e){
                layer.alert("拓展参数不是合法的json格式!");
                return false;
            }
            data.field['extJson'] = JSON.stringify(editorComponents.get());
            elab_common.postReq(apiService, 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;
        });

        // 初始化数据内容
        init();

        function init() {
            elab_common.initSelectDataRender("#form_platformType", "#alertPlatformList", "[(${obj.platformType})]")
            elab_common.getConfigTypeBySelect("#valid_status", "route_valid_status", "[(${obj.status})]");
            const container = document.getElementById("json-renderer")
            editorComponents = new JSONEditor(container, {
                modes: ['text', 'code', 'tree', 'form', 'view'],
                mode: 'code',
                theme:'jsoneditor',
                mainMenuBar: true,
                statusBar: true,
                indentation: 4,
                onChange: (updatedContent, previousContent, patchResult) => {
                    console.log('onChange', updatedContent, previousContent, patchResult)
                    // content = updatedContent
                },
                onValidationError: function (errors) {
                    errors.forEach((error) => {
                        console.log("type:" + error.type + " msg:");
                        switch (error.type) {
                            case 'validation': // schema validation error
                                break;
                            case 'customValidation': // custom validation error
                                break;
                            case 'error':  // json parse error
                                break;
                        }
                    });
                }
            });
            try {
                editorComponents.set(JSON.parse([[${obj.extJson}]] || "{}"));
            } catch (e) {
                console.error(e);
            }
            form.render('select');
            form.render('checkbox');
        }
    });
</script>

<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        font-family: unset;
    }
</style>
</body>
</html>