<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li>监控中心</li>
            </ul>
            <h4>运行日志</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<div class="contentpanel">

    <div class="row">
        <div class="col-sm-4 col-md-3">

            <h4 class="md-title mb5">项目列表</h4>
            <select id="projects" data-placeholder="Choose a Project..." class="width100p">
                <option value="">Choose One</option>
                {{#each projects}}
                    <option value="{{_id}}" {{#if checked}}selected{{/if}}>{{subname}}</option>
                {{/each}}
            </select>

            <div class="mb20"></div>

            <h4 class="md-title mb5">运行环境</h4>
            {{#each env}}
                <div class="radio"><label><input type="radio" {{#if checked}}checked=""{{/if}} value="{{value}}"
                                                 name="env"> {{name}}</label></div>
            {{/each}}

            <div class="mb20"></div>

            <h4 class="md-title mb5">Host列表</h4>
            <select id="hosts" data-placeholder="Choose a Host..." class="width100p">
                <option value="">Choose One</option>
                {{#each hosts}}
                    <option value="{{this}}" {{#equals this @root.ip}}selected{{/equals}}>{{this}}</option>
                {{/each}}
            </select>

            <div class="mb20"></div>

            <button class="btn btn-success" id="load-btn">加载</button>

            <br>

        </div><!-- col-sm-4 -->
        <div class="col-sm-8 col-md-9">
            <div class="panel">
                <div class="panel-heading">
                    <div class="pull-right">
                        <a class="btn btn-success btn-rounded mr20 realtime-btn">开启实时加载</a>
                    </div>
                    <h4 class="panel-title">日志</h4>
                    <p>可通过滚动鼠标加载</p>


                </div><!-- panel-heading -->
                <div class="panel-body yoho-log-dark">
                    <div class="results-list ">
                    </div><!-- results-list -->
                </div><!-- panel-body -->
            </div><!-- panel -->
        </div><!-- col-sm-8 -->
    </div><!-- row -->

</div>

<script>
    $(document).on('ready pjax:success', function() {

        $('#projects').select2();
        $('#hosts').select2();

        var pid = $('#projects').val();
        var env = $('input[name="env"]:checked').val();

        var projects = {{{json projects}}};

        var $logs = $('.yoho-log-dark .results-list');
        var $logWrap = $('.yoho-log-dark');

        var oldTime, newTime;
        var influxName, ip;
        var loading = false;

        function changeIp(pid, env) {
            if (pid && env) {
                for (var i = 0; i < projects.length; i++) {
                    var p = projects[i];

                    if (p._id === pid) {
                        var hosts = p.deploy[env].target;

                        $('#hosts').select2("destroy");
                        $('#hosts').empty();
                        $('#hosts').append('<option value="">全部</option>');
                        for (var j = 0; j < hosts.length; j++) {
                            $('#hosts').append('<option value="' + hosts[j] + '">' + hosts[j] + '</option>');
                        }
                        $('#hosts').select2();
                    }
                }
            }
        }

        $('#projects').on('change', function(e) {
            pid = e.val;

            changeIp(pid, env);
        });

        $('input[name="env"]').change(function(e) {
            env = e.target.value;

            changeIp(pid, env);
        });

        $('#load-btn').click(function() {
            ip = $('#hosts').val();

            for (var i = 0; i < projects.length; i++) {
                var p = projects[i];

                if (p._id === pid) {
                    if (p.monitor && p.monitor.influx && p.monitor.influx.name) {
                        influxName = p.monitor.influx.name;
                    } else {
                        $.gritter.add({
                            title: '警告',
                            text: '未配置监控信息!',
                            time: 2000,
                            class_name: 'growl-danger'
                        });
                    }

                }
            }

            if (influxName) {
                $logs.empty();
                $.get('/monitor/log/query', {
                    influxName: influxName,
                    ip: ip
                }, function(data) {
                    $(data).each(function(i) {
                        if (i == 0) {
                            newTime = this.time;
                        } else if (i == data.length - 1) {
                            oldTime = this.time;
                        }
                        appendLog(this, 0);
                    });

                    $logWrap.scrollTop($logWrap[0].scrollHeight);
                });
            }
        });

        function layoutResize() {
            $('.yoho-log-dark').height($('body').height() - 340);
        }

        $(window).resize(function() {
            layoutResize();
        });

        layoutResize();

        function appendLog(l, i) {
            if (l) {
                var html = '<p><span class="timer">' + l.time.replace('T', ' ') + '</span>' +
                        (ip ? '' : '<span class="host">' + l.host + '</span>')
                        + '<span class="pid">[' + l.pid + ']</span><span class="level">[' + l.level + ']</span><span class="message">- ' + l.message + '</span></p>';
                if (i === 0) {
                    $logs.prepend(html);
                } else {
                    $logs.append(html);
                }
            }
        }

        function loadOld() {
            if (loading) {
                return;
            } else {
                loading = true;
                var scH = $logWrap[0].scrollHeight;
                $.get('/monitor/log/query', {
                    influxName: influxName,
                    ip: ip,
                    oldTime: oldTime
                }, function(data) {
                    loading = false;

                    if (data && data.length > 0) {
                        oldTime = data[data.length - 1].time;
                    }
                    $(data).each(function() {
                        appendLog(this, 0);
                    });
                    var scH2 = $logWrap[0].scrollHeight;

                    $logWrap.scrollTop(scH2 - scH);
                });
            }
        }

        function loadNew() {
            if (loading) {
                return;
            } else {
                loading = true;
                var scH = $logWrap[0].scrollHeight;
                $.get('/monitor/log/query', {
                    influxName: influxName,
                    ip: ip,
                    newTime: newTime
                }, function(data) {
                    loading = false;

                    if (data && data.length > 0) {
                        newTime = data[0].time;
                    }
                    $(data).each(function() {
                        appendLog(this);
                    });
                    $logWrap.scrollTop(scH);
                });
            }
        }

        var scrollH, scrollTop = 0;
        $logWrap.scroll(function() {
            scrollH = $(this)[0].scrollHeight;
            scrollTop = $(this)[0].scrollTop;

            if (scrollTop < 10) {
                loadOld();
            } else if (scrollTop + $logWrap.height() + 40 >= scrollH) {
                loadNew();
            }
        });

        var sc;

        $('.realtime-btn').click(function() {
            if ($(this).hasClass('active')) {
                clearInterval(sc);
                $(this).removeClass('active');
                $(this).text('开启实时加载');
            } else {
                $(this).addClass('active');
                $(this).text('关闭实时加载');
                sc = setInterval(loadNew, 2000);
            }
        });
    });
</script>