<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>Memcached 管理</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<div class="contentpanel">
    <div class="row">
        <div class="col-md-2">
            <button class="btn btn-success" id="add-btn">添加</button>
        </div>
        <div class="col-md-5">
            <input type="text" style="width: 100%; height: 40px;" id="api-key" placeholder="清除key">
        </div>
        <div class="col-md-2">
            <a class="btn btn-success btn-rounded mr20 api-clean-btn">删除缓存</a>
        </div>
        <div class="col-md-3">
            <button class="btn btn-danger" id="flush-btn">Flush All</button>
        </div>
    </div>
    <hr />
    <div class="row mt20">
        {{#each hosts}}
        <div class="col-md-4" id="ho-{{hostFm}}">
            <div class="panel panel-info noborder">
                <div class="panel-heading noborder">
                    <div class="panel-btns">
                        <a class="tooltips host-remove" data-id="{{_id}}" data-host="{{host}}" title="删除"><i
                                                class="fa fa-times"></i></a>
                    </div>
                    <!-- panel-btns -->
                    <div class="panel-icon"><i class="fa fa-cloud" style="padding-left:12px;"></i></div>
                    <div class="media-body">
                        <h2 class="nomargin">{{host}}</h2>
                        <h5 class="md-title mt5">版本： <span class="version">...</span></h5>
                    </div>
                    <!-- media-body -->
                    <hr class="mt10 mb10">
                    <div class="clearfix mt5" style="padding-left:10px;">
                        <button class="btn btn-info btn-xs restart-btn" data-host='{{host}}'>重启</button>
                    </div>
                    <div class="clearfix" style="padding-left:10px;">
                        <h5 class="md-title mt10">服务器状态</h5>
                    </div>
                    <div class="clearfix" style="padding-left:10px;">
                        <div class="col-xs-4">
                            <span class="label label-success label-status conn-num">连接数：0</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="label label-info label-status thread-num">线程数：0</span>
                        </div>
                        <div class="col-xs-4">
                            <span class="label label-warning label-status evictions">evictions：0</span>
                        </div>
                        <div class="col-xs-4 mt10">
                            <span class="label label-success label-status hit">命中率：0</span>
                        </div>
                        <div class="col-xs-4 mt10">
                            <span class="label label-info label-status heap-info">内存：0</span>
                        </div>
                    </div>

                    <div class="clearfix mt5">
                        <div class="info-msg ml10 mt5" style="min-height: 20px;"></div>
                    </div>
                </div>
                <!-- panel-body -->
            </div>
            <!-- panel -->
        </div>
        {{/each}}
    </div>
</div>

<script>
$(function() {

    $('#add-btn').click(function(){
        var i = layer.prompt({
            title: '请输入host，例如 127.0.0.1:11211'
        }, function(host) {
            $.post('/api_cache/host/add', {host: host}, function(ret) {
                if (ret.code == 200) {
                    layer.close(i);
                    location.href = location.href;
                }
            });
        });
    });

    $('.api-clean-btn').click(function() {
        var key = $('#api-key').val();

        if (key) {
            $.post('/api_cache/clean', {key: key}, function(ret) {
                if (ret.code == 200) {
                    layer.msg('正在清理中');
                }
            });
        } else {
            layer.msg('请输入key');
        }
    });

    $('.host-remove').click(function(){
        var id = $(this).data('id');
        var host = $(this).data('host');
        var parent = $(this).parent();
        var i = layer.confirm('确定删除host：<code>' + host + '</code>吗？', {
            btn: ['确定', '取消']
        }, function() {
            $.post('/api_cache/host/del', {id: id}, function(ret) {
                if (ret.code === 200) {
                    layer.close(i);
                    location.href = location.href;
                }
            });
        });
    });

    $('#flush-btn').click(function(){
        var i = layer.confirm('确定清除所有缓存吗？', {
            btn: ['确定', '取消']
        }, function() {
            $.post('/api_cache/flush', function(ret) {
                if (ret.code === 200) {
                    layer.close(i);
                }
            });
        });
    });

    $('.restart-btn').click(function() {
        var host = $(this).data('host');

        var i = layer.confirm('确定重启该吗？', {
            btn: ['确定', '取消']
        }, function() {
            $.post('/api_cache/restart', {host: host}, function(ret) {
                if (ret.code === 200) {
                    layer.close(i);
                }
            });
        });
    });

    var ws = io();
    ws.on('connect', function() {
        ws.on('/api_cache/log', function(data) {
            $('#ho-' + data.host.replace(/\./g, '-').replace(/:/g, '-')).find('.info-msg').text(data.msg);
        });

        ws.on('/api_cache/monit', function(data) {
            $('#ho-' + data.host.replace(/\./g, '-').replace(/:/g, '-')).find('.version').text(data.stats.version);
            $('#ho-' + data.host.replace(/\./g, '-').replace(/:/g, '-')).find('.conn-num').text('连接数：' + data.stats.curr_connections);
            $('#ho-' + data.host.replace(/\./g, '-').replace(/:/g, '-')).find('.thread-num').text('线程数：' + data.stats.threads);
            $('#ho-' + data.host.replace(/\./g, '-').replace(/:/g, '-')).find('.evictions').text('evictions：' + data.stats.evictions);
            $('#ho-' + data.host.replace(/\./g, '-').replace(/:/g, '-')).find('.hit').text('命中率：' + data.stats.hits_percent);
            $('#ho-' + data.host.replace(/\./g, '-').replace(/:/g, '-')).find('.heap-info').text('内存：' + data.stats.heap_info);
        });
    });
    ws.on('error', function() {
        console.log('connect fail');
    });

    function monit() {
        $.get('/api_cache/monit');
    }

    setInterval(monit, 5000);
});
</script>