<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 x-so layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期</label>
                    <div class="layui-input-block">
                        <input type="text" required="true" class="layui-input" name="date" id="d_date"
                               placeholder="yyMMdd">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="applicationName" id="q_application_name" value="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">应用IP</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="ip" id="q_ip" value="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">主题</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="topic" id="q_topic" value="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">分区</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="partitionName" id="q_partition_name" value="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">消息编号</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="msgId" id="q_msg_id" value="">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">索引组</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="groupKeyNameName" id="data_group_name" value="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">索引键</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="groupKeyName" id="data_group_key" value="">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">索引编号</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="dataId" id="data_id">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">执行耗时</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="requestTime" id="q_request_time">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">消息类型</label>
                    <div class="layui-input-block">
                        <select name="mqType" id="mq_type">
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">是否有效</label>
                    <div class="layui-input-block">
                        <select name="status" id="valid_status">
                        </select>
                    </div>
                </div>
            </div>
            <!--            <div class="layui-col-xs6 layui-col-md12">-->
            <!--                <label class="layui-form-label">请求关键字</label>-->
            <!--                <div class="layui-input-block">-->
            <!--                    <input code="text" class="layui-input" name="jsonContent" id="jsonContent" value=""-->
            <!--                           alt="请搜索请求关键字">-->
            <!--                </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>

<script code="text/html" id="toolbarDemo">

</script>
<script>
    var _self = this;
    var catUrl = '[(${catUrl})]';
    var nextTree = function nextTree(logId) {
        let date = $("#d_date").val();
        var requestBody = {};
        requestBody["date"] = date;
        requestBody["parentLogId"] = logId;
        requestBody["pageSize"] = 100;
        elab_common.postReq(urlConfig.trace.mqListService, requestBody, function (result) {
            let resultSet = result.pageModel.resultSet;
            if (resultSet) {
                var jsonConfig = {collapsed: false, withQuotes: true, withLinks: true}
                var resultJson = [];
                $(resultSet).each(function (index, obj) {
                    var data = {};
                    data["应用名称"] = obj.applicationName;
                    data["应用ip"] = obj.ip + "";
                    data["日志"] = catUrl + obj.logId;
                    data["执行状态"] = elab_common.getConfigTypeText("common_status", obj.status);
                    data["创建时间"] = elab_common.longConvertDateTime(obj.createDate);
                    data["请求时长"] = obj.requestTime;
                    resultJson[index] = data;
                })

                showJson(resultJson, jsonConfig);
            }
        });
    }

    function showJson(obj, jsonConfig) {

        if (jsonConfig == undefined) {
            jsonConfig = {collapsed: false, withQuotes: true, withLinks: false};
        }

        $('#json-renderer').jsonViewer(obj, jsonConfig);
        layer.open({
            type: 1
            , title: false //不显示标题栏
            , closeBtn: false
            , area: '800px;'
            , shade: 0.8
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btnAlign: 'c'
            , shadeClose: true
            , moveType: 1 //拖拽模式，0或者1
            , content: $('#json-renderer').show()
        });
    }

    layui.use(['laydate', 'layer', 'table', 'form', 'element'], function () {
        var laydate = layui.laydate, layer = layui.layer, table = layui.table, form = layui.form;
        var listUrl = urlConfig.trace.mqListService;
        var updateUrl = urlConfig.route.updateHtml;
        var delUrl = "";
        var addUrl = urlConfig.route.refreshHtml;
        var method = "post";
        var title = "路由列表";

        // 构建数据
        var dataColumn = [
            {field: 'id', title: '主键', hide: true, sort: false}
            ,
            {
                field: 'applicationName', title: '应用名称', width: 170
            }
            , {
                field: 'ip', title: '应用服务器地址', width: 80
            }
            , {
                field: 'mqType', title: '消息类型', width: 80, hide: true
            }
            , {
                field: 'invokeType', title: '执行类型', hide: true
            }
            , {
                field: 'topic', title: '主题'
            }, {
                field: 'partitionName', title: '分区名称'
            }, {
                field: 'msgId', title: '消息编号'
            }, {
                field: 'groupName', title: '索引组'
            }, {
                field: 'groupKeyName', title: '索引键'
            }, {
                field: 'dataId', title: '索引编号', width: 100
            }, {
                field: 'rootLogId', title: '链路顶层编号', hide: true, templet: function (res) {
                    return '<em><a href="' + catUrl + res.rootLogId + '"  target="_blank" title="点击查看日志详情"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe64c;</i></a></em>'
                }
            }, {
                field: 'parentLogId', title: '链路上级编号', templet: function (res) {
                    if (res.parentLogId && res.parentLogId != null) {
                        var style = "";
                        return '<em> <a href="' + catUrl + res.parentLogId + '"  target="_blank" ' + style + ' title="点击查看日志详情"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe64c;</i></a> </em>' +
                            '<em><a href="javascript:void(0);" onclick="nextTree(\'' + res.logId + '\')"  ' + style + ' title="查看下级消息树"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe62e;</i></a></em>'
                    } else {
                        return '<em><i class="layui-icon" style="font-size: 30px; ">&#xe64d;</i></em>';
                    }
                }
            }, {
                field: 'logId', title: '链路编号', rowspan: 2, width: 100, templet: function (res) {
                    // var style = "style=\"color: blue;text-decoration: underline;\"";
                    var style = "";
                    return '<em><a href="' + catUrl + res.logId + '" target="_blank" ' + style + ' title="点击查看日志详情"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe64c;</i></a></em>'
                }
            }, {
                field: 'status', title: '是否有效', rowspan: 1, width: 80, templet: function (res) {
                    var styleString = "style=\"color: red;\"";
                    if (res.status == 1) {
                        styleString = "style=\"color: #5fb878;\"";
                    }
                    return '<em ' + styleString + '>' + elab_common.getConfigTypeText("common_status", res.status) + '</em>'
                }
            }, {
                field: 'requestTime', title: '执行耗时', rowspan: 1, width: 80, templet: function (res) {
                    var styleString = "style=\"color: red;\"";
                    if (res.requestTime < 500) {
                        styleString = "style=\"color: #5fb878;\"";
                    }
                    return '<em ' + styleString + '>' + res.requestTime + '</em>'
                }
            }
            ,
            {
                field: 'sourceTime', title: '来源时间', width: 160, hide: true, templet: function (res) {
                    return '<em>' + elab_common.longConvertDateTime(res.sourceTime) + '</em>'
                }
            }
            , {
                field: 'createDate', title: '创建时间', width: 160, templet: function (res) {
                    return '<em>' + elab_common.longConvertDateTime(res.createDate) + '</em>'
                }
            }
            , {
                fixed: 'right', title: '操作', width: 100, templet: function (res) {
                    return '<em><a className="layui-btn layui-btn-xs" lay-event="findDetail"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe62a;</i></a></em>'
                }
            }
        ];


        elab_common.layUITableDML(layer, table, title, listUrl, method, dataColumn, updateUrl, delUrl);
        table.on('tool(list_table)', function (obj) {
            var event = obj.event;
            debugger;
            if ("findDetail" == event) {
                // elab_common.getReq("/api/log/mq?id=" + obj.data.id, null, function (data) {
                    showJson(JSON.parse(obj.data.jsonContent));
                // })
            }
        });

        table.on('rowDouble(list_table)', function (obj) {
            showJson(obj.data);
        });

        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: -7
            , max: 0
            , value: new Date()
        });

        init();

        function init() {
            elab_common.getConfigTypeBySelect("#mq_type", "mq_type", "");
            elab_common.getConfigTypeBySelect("#valid_status", "common_status", "");
            form.render('select');
        }

    });


</script>
<!--<script code="text/html" id="barDemo">-->
<!--    <a className="layui-btn layui-btn-xs" lay-event="findDetail">消息内容</a>-->
<!--</script>-->
</body>

</html>