<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="ruleName" th:value="${obj?.ruleName}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input code="text" name="project" th:value="${obj?.project}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--            <div class="layui-row">-->
            <!--                <div class="layui-col-md3">-->
            <!--                    <div class="grid-demo grid-demo-bg1">75%</div>-->
            <!--                </div>-->
            <!--                <div class="layui-col-md9">-->
            <!--                    <div class="grid-demo">25%</div>-->
            <!--                </div>-->
            <!--            </div>-->
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>告警表达式</legend>
            </fieldset>

            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="150">
                    <col width="350">
                    <col width="50">
                    <col width="50">
                </colgroup>
                <thead>
                <tr>
                    <th>告警标题</th>
                    <th>告警表达式</th>
                    <th><button type="button"  onclick="addTableRow('#tbody_primary','#copyNode')" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">添加</i></button></th>
                </tr>
                </thead>
                <tbody id="tbody_primary">
                <tr th:each="rule,ruleStat:${obj?.ruleNodes}">
                    <td><input code="text" name="title" lay-verify="required" th:value="${rule?.title}"
                               autocomplete="off" class="layui-input"></td>
                    <td><textarea name="expressionContent" lay-verify="required" autocomplete="off" placeholder="请输入内容"
                                  class="layui-textarea" th:text="${rule?.expressionContent}"></textarea></td>
                    <td th:if="${ruleStat.index != 0}">
                        <button type="button" onclick="delTableRow(this)"
                                class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i> 删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>告警平台</legend>
            </fieldset>

            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <!--                    <col width="150">-->
                    <col width="350">
                    <col width="50">
                </colgroup>
                <thead>
                <tr>
                    <!--                    <th>平台类型</th>-->
                    <th>平台组</th>
                    <th> <button type="button" onclick="addTableRow('#tbody_platform_primary','#copyPlatformNode')"
                                 class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"> 添加</i></button></th>
                </tr>
                </thead>
                <tbody id="tbody_platform_primary">
                <tr th:each="platform,stat:${obj?.alertPlatformList}">
                    <!--                        <td><select id="form_platformType" name="platformType" lay-verify="required"></select></td>-->
                    <td><select name="alertPlatformId" lay-verify="required" th:value="${platform?.alertPlatformId}"
                                lay-search=""></select></td>
                    <td th:if="${stat.index != 0}">
                        <button type="button" onclick="delTableRow(this)"
                                class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i> 删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>


            <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">
                <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="${alertPlatformConfigList}" id="alertPlatformConfigList"/>
<table style="display: none" id="copyNode">
    <tr>
        <td><input code="text" name="title" lay-verify="required" autocomplete="off" class="layui-input"></td>
        <td><textarea name="expressionContent" lay-verify="required" autocomplete="off" placeholder="请输入内容"
                      class="layui-textarea"></textarea></td>
        <td>
            <button type="button" onclick="delTableRow(this)" class="layui-btn layui-btn-primary layui-btn-sm"><i
                    class="layui-icon"></i> 删除
            </button>
        </td>
    </tr>
</table>

<table style="display: none" id="copyPlatformNode">
    <tr>
        <td><select name="alertPlatformId" lay-verify="required" lay-search=""></select></td>
        <td>
            <button type="button" onclick="delTableRow(this)" class="layui-btn layui-btn-primary layui-btn-sm"><i
                    class="layui-icon"></i> 删除
            </button>
        </td>
    </tr>
</table>

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

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

        // 提交前的数据格式化准备
        form.on('submit(submit)', function (data) {
            var ruleNodes = [];
            $("#tbody_primary input[name='title']").each(function (index, obj) {
                ruleNodes.push({"title": obj.value});
            });
            $("#tbody_primary textarea[name='expressionContent']").each(function (index, obj) {
                ruleNodes[index].expressionContent = obj.value;
            });
            var alertPlatformList = [];
            $("#tbody_platform_primary select[name='alertPlatformId']").each(function (index, obj) {
                alertPlatformList.push({"alertPlatformId": obj.value})
            });

            if(ruleNodes.length <= 0){
                layer.msg("至少要有一条告警表达式规则!");
                return false;
            }
            if(alertPlatformList.length <=0){
                layer.msg("至少要选择一个平台组!");
                return false;
            }

            data.field["ruleNodes"] = ruleNodes;
            data.field["alertPlatformList"] = alertPlatformList;
            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 {
                    layer.alert(data.message);
                }
            }, true);
            return false;
        });

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

        // $("#addTableRowBtn").click(function () {
        //     var isNullValue = false;
        //     $("#tbody_primary input[name='title']").each(function (index, obj) {
        //         if (obj.value === undefined || obj.value === '') {
        //             isNullValue = true;
        //             layer.alert("第[" + (index + 1) + "]行告警标题不能为空!");
        //             return false;
        //         }
        //     });
        //     if (isNullValue) {
        //         return;
        //     }
        //     $("#tbody_primary textarea[name='expressionContent']").each(function (index, obj) {
        //         if (obj.value === undefined || obj.value === '') {
        //             isNullValue = true;
        //             layer.alert("第[" + (index + 1) + "]行告警表达式不能为空!");
        //             return false;
        //         }
        //     });
        //     if (isNullValue) {
        //         return;
        //     }
        //     let trNode = $("#copyNode").children().html();
        //     $("#tbody_primary").append(trNode);
        // });

        function init() {
            elab_common.initSelectClassDataRender("select[name='alertPlatformId']", "#alertPlatformConfigList");
            elab_common.getConfigTypeBySelect("#valid_status", "route_valid_status", "[(${obj?.status})]");
            refreshComponent();
        }

        function refreshComponent() {
            form.render('select');
            form.render('checkbox');
        }
    });

    function delTableRow(obj) {
        $(obj).parent().parent().remove();
    }

    function addTableRow(appendNodeId, copyNodeId) {
        let trNode = $(copyNodeId).children().html();
        $(appendNodeId).append(trNode);
        form.render('select');
    }
</script>

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