<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="~{/base/main}">
<head>
    <meta charset="UTF-8"/>
    <title>告警平台管理</title>
    <script src="/lib/json-viewer/jquery.json-viewer.js"></script>
    <link href="/lib/json-viewer/jquery.json-viewer.css" type="text/css" rel="stylesheet">
</head>

<body>
<div layout:fragment="content">
</div>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">告警平台管理</a>
        <a>
          <cite>查询列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12">
            <div class="layui-form-item layui-col-md12">
                <div class="layui-col-md4">
                    <label class="layui-form-label">平台类型</label>
                    <div class="layui-input-block">
                        <select id="q_platformType" name="platformType">

                        </select>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">平台标题</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="alertName" id="q_alertName" value=""/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label">是否可用</label>
                    <div class="layui-input-block">
                        <select name="status" id="valid_status" lay-verify="required">
                        </select>
                    </div>
                </div>
            </div>
            <!--            <div class="layui-form-item">-->
            <!--                <label class="layui-form-label">请求关键字</label>-->
            <!--                <div class="layui-input-block">-->
            <!--                    <input code="text" class="layui-input " name="jsonContent" id="jsonContent" value="" alt="请搜索请求关键字"-->
            <!--                           style="width: 90%">-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md12 " style="text-align: center">
                    <a class="layui-btn" id="q_submit" lay-submit="" lay-filter="submit_from">查询</a>
                    <button id="q_reset" code="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <!--<button class="layui-btn" lay-submit="" lay-filter="submit_from"><i class="layui-icon"></i>增加</button>-->
        </form>
    </div>
    <table class="layui-table" id="list_table" lay-filter="list_table"></table>

    <pre id="json-renderer"></pre>

</div>
<input type="hidden" th:value="${alertPlatformList}" id="alertPlatformList"/>

<div class="layui-btn-container" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
</div>

<script>
    layui.use(['laydate', 'layer', 'table', 'form', 'element'], function () {
        var laydate = layui.laydate, layer = layui.layer, table = layui.table, form = layui.form;
        var title = "告警平台列表";
        var method = "post";

        // ======================== 参数构建阶段 =========================
        var dataColumn = [
            {field: 'id', title: '主键', hide: true, sort: false}
            ,
            {
                field: 'platformType', title: '平台类型', align: 'center', templet: function (res) {
                    return '<b>' + elab_common.getDataRenderValue("#alertPlatformList", res.platformType) + '</b>'
                }
            }
            , {
                field: 'alertName', title: '告警名称'
            }
            , {
                field: 'url', title: '平台调用地址'
            }
            , {
                field: 'remark', title: '描述'
            },
            {
                field: 'status', title: '是否有效', rowspan: 1, templet: function (res) {
                    var styleString = "style=\"color: red;\"";
                    if (res.status === 1) {
                        styleString = "style=\"color: #5fb878;\"";
                    }
                    return '<em ' + styleString + '>' + (res.status === 1 ? "有效" : "无效") + '</em>'
                }
            }
            ,
            {
                field: 'createDate', title: '创建时间', width: 160, templet: function (res) {
                    return '<em>' + elab_common.longConvertDateTime(res.createDate) + '</em>'
                }
            }
            , {
                fixed: 'right', title: '操作', width: 150, templet: function (res) {
                    return '<em>' +
                        '<a className="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe642;</i></a>' +
                        '<a className="layui-btn layui-btn-xs" lay-event="del_status_btn"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe60b;</i></a>' +
                        '<a className="layui-btn layui-btn-xs" lay-event="del"><i class="layui-icon" style="font-size: 30px; color: palevioletred;">&#x1007;</i></a>' +
                        '</em>'
                }
            }
        ];

        // ======================== 初始化表格阶段 ========================
        var layDMLConfig = {};
        layDMLConfig["layer"] = layer;
        layDMLConfig["table"] = table;
        layDMLConfig["title"] = title;
        layDMLConfig["method"] = method;
        layDMLConfig["dataColumn"] = dataColumn;
        layDMLConfig["routeConfig"] = urlConfig.alertPlatform;

        elab_common.renderLayUIDMLTable(layDMLConfig);

        // ============================================ 特殊操作阶段 ===================================
        table.on('rowDouble(list_table)', function (obj) {
            $('#json-renderer').jsonViewer(obj.data, {collapsed: false, withQuotes: true, withLinks: false});
            layer.open({
                type: 1
                , title: false //不显示标题栏
                , closeBtn: false
                , area: '500px;'
                , shade: 0.8
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btnAlign: 'c'
                , shadeClose: true
                , moveType: 1 //拖拽模式，0或者1
                , content: $('#json-renderer').show()
            });
        });

        form.on('submit(submit_from)', function (data) {
            //执行重载
            table.reload('tableList', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: data.field
            });
            return false;
        });

        laydate.render({
            elem: '#d_date'
            , format: 'yyyy-MM-dd'
            , isInitValue: true
            , min: -100
            , max: 0
            , value: new Date()
        });

        laydate.render({
            elem: '#d_s_date'
            , type: 'time'
            , isInitValue: true
            , range: ['#']
            , value: '00:00:00 # 23:59:59'
        });


        // ============================ 数据初始化阶段 ===============================
        init();

        function init() {
            elab_common.initSelectDataRender("#q_platformType", "#alertPlatformList", "")
            elab_common.getConfigTypeBySelect("#valid_status", "route_valid_status", "1");
            form.render('select');
        }

    });
</script>
</body>

</html>