<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
        font-family: "microsoft yahei";
    }
    ul li {
        list-style-type: none;
    }
    .box {
        width: 200px;
        /*border: 1px solid red;*/
    }
    ul {
        margin-left: 20px;
        /*border: 1px solid blue;*/
    }

    .menuUl li {
        margin: 10px 0;
    }

    .menuUl li span:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    .menuUl li i { margin-right: 10px; top: 0px; cursor: pointer; color: #161616; 			}
</style>

<div class="content_wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>异常信息</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form class="form-inline" onkeydown="if(event.keyCode==13){ $('#submit').click(); return false; }" role="form" method="post" action="user/searchuser"  data-validate="validateUser" data-callBack="showuserinfo" data-useDefaultCallBack="on" data-sendingText="查询中">
                                        <span class="gap"></span>
                                        <div class="form-group">
                                            <label>关键词:</label>
                                            <input type="text" class="form-control" placeholder="关键词" name="keys" id="keys" value="<?php //echo $key ?? '';?>">
                                        </div>
                                        <span class="gap"></span>
                                        <button type="button" class="btn btn-primary" id="submit">查询</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="innerUl"></div>
                                </div>
                                <div class="col-sm-4">
                                    <div id="tHtml" style="word-break: break-word"></div>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo base_url();?>public/js/proTree.js"></script>
<script type="text/javascript">
    //后台传入的 标题列表
    var arr = <?php echo json_encode($data); ?>;

    $('#submit').click(function () {
        var keys = $('#keys').val();
        if(keys != ''){
            window.location.href = "/#debug/error?key="+keys
        }else{
            window.location.href = "/#debug/error"
        }
    });

    //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
    $(".innerUl").ProTree({
        arr: arr,
        close: true,
        simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file
        mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
        mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
        callback: function(id,name) {
            console.log(id,name);
            if(name.indexOf('log') != -1){
                $.post('Debug/error',{
                    id:id
                },function (data) {
                    var data = JSON.parse(data);
                    var str = data.retdata.str;
                    var tHtml = "";
                    for (var i=0;i<str.length;i++){
                        var timestamp = str[i].time;
                        var d = new Date(timestamp * 1000);    //根据时间戳生成的时间对象
                        var date = (d.getHours())+":"+(d.getMinutes())+":"+(d.getSeconds());
                        tHtml += '<div class="panel panel-default"><div class="panel-heading">时间：'+date+'</div><div class="panel-body">'+str[i].data+'</div></div>'
                    }
                    $('#tHtml').html(tHtml);
                })
            }else{
                // var _this = $('span[id='+id+']').prev();
                // var ischek = _this.attr("ischek");
                // var menuUl = _this.closest("li").children(".menuUl");
                // if(ischek == 'true') {
                //     _this.removeClass(self.mouIconOpen).addClass(self.mouIconClose)
                //     menuUl.hide();
                //     _this.attr("ischek", 'false');
                // } else if(ischek == 'false') {
                //     menuUl.show();
                //     _this.removeClass(self.mouIconClose).addClass(self.mouIconOpen)
                //     _this.attr("ischek", 'true')
                // }
                $.post('Debug/actionError',{
                    date:name
                },function (data) {
                    var data = JSON.parse(data);
                    var state = data.state;
                    console.log(state);
                    if(state == "success"){
                        window.open(data.retdata.path)
                    }
                })
            }
        }

    })
</script>