<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">请求路径</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="url" id="q_url" 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="userId" id="q_user_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">token</label>
                    <div class="layui-input-block">
                        <input code="text" class="layui-input" name="dataId" id="data_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="requestTime" id="request_time" 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="status" id="status" value="">
                    </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>

<script code="text/html" id="toolbarDemo">
    // <!-- <div class="layui-btn-container" style="float:right"> <button class="layui-btn layui-btn-sm" lay-event="addData"> 刷新路由</button> </div> -->
</script>
<script>
    layui.use(['laydate', 'layer', 'table', 'form', 'element'], function () {
        var laydate = layui.laydate, layer = layui.layer, table = layui.table, form = layui.form;
        var catUrl = '[(${catUrl})]';
        var listUrl = urlConfig.trace.urlListService;
        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: '应用名称'
            }
            , {
                field: 'ip', title: '应用ip'
            }
            , {
                field: 'url', title: '请求路径'
            }
            , {
                field: 'userId', title: '用户编号'
            }
            , {
                field: 'clientIp', title: '客户端ip'
            }, {
                field: 'groupName', title: '集团编号'
            }, {
                field: 'groupKeyName', title: '手机号'
            }, {
                field: 'dataId', title: 'token'
            }, {
                field: 'logId', title: '链路编号', rowspan: 2, width: 100, templet: function (res) {
                    return '<em><a href="' + catUrl + res.logId + '" target="_blank"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe64c;</i></a></em>'
                }
            },
            {
                field: 'status', title: '是否有效', rowspan: 1, templet: function (res) {
                    var styleString = "style=\"color: red;\"";
                    if (res.status == 200) {
                        styleString = "style=\"color: #5fb878;\"";
                    }
                    return '<em ' + styleString + '>' + res.status + '</em>'
                }
            }
            ,
            {
                field: 'requestTime', title: '请求时长', sort: true, templet: function (res) {
                    var styleString = "style=\"color: red;\"";
                    if (res.requestTime < 500) {
                        styleString = "style=\"color: #5fb878;\"";
                    }
                    return '<em ' + styleString + '>' + res.requestTime + '</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;
            if ("findDetail" == event) {
                // elab_common.getReq("/api/log/url?id=" + obj.data.id, null, function (data) {
                    $('#json-renderer').jsonViewer(JSON.parse(obj.data.jsonContent), {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()
                    });
                // })

            }
        });

        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: -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>