<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>Api缓存清理</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">memcached列表</h4>
            <div class="host-list">
                {{#each hosts}}
                <p><span>{{host}}</span><span class="fa fa-times pull-right host-remove" style="color: red; cursor: pointer;" data-id="{{_id}}" data-host="{{host}}"></span></p>
                {{/each}}
            </div>

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

            <button class="btn btn-success" id="add-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 api-clean-btn">删除缓存</a>
                    </div>
                    <div class="panel-title">
                        缓存key前缀：
                        <input type="text" style="width: 33%; height: 40px;" id="api-key">
                    </div>


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

</div>

<script>
    $(document).on('ready pjax:success', 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) {
                        $('.host-list').append('<p>' + host + '</p>');
                        layer.close(i);
                    }
                });
            });
        });

        $('.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) {
                        $(parent).remove();
                        layer.close(i);
                    }
                });
            });
        });

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

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

        layoutResize();
        
        var $logWrap = $('.yoho-log-dark');

        var ws = io();
        ws.on('connect', function() {
            ws.on('/api_cache/log', function(data) {
                $('#api-cache-log').append('<p><span class="host">'+data.host+'</span><span class="message">'+data.msg+'</span></p>');

                $logWrap.scrollTop($logWrap[0].scrollHeight);
            });
        });
        ws.on('error', function() {
            console.log('connect fail');
        });
    });
</script>