<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><a href="">系统设置</a></li>
                <li>服务器管理</li>
            </ul>
            <h4>服务器设置</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<div class="contentpanel page-servers">
    <div class="panel panel-primary-head">
        <div class="panel-heading">
            <div class="pull-right">
                <a id="new-page" href="/servers/new" class="btn btn-success btn-rounded"><i class="glyphicon glyphicon-plus"></i> 新增服务器</a>
            </div>
            <h4 class="panel-title">服务器设置</h4>
            <p>配置服务器连接方式、可以通过标签区分</p>
            
        </div>
        <!-- panel-heading -->

        <table id="table-servers" class="table table-striped table-bordered responsive">
            <thead class="">
                <tr>
                    <th>Host</th>
                    <th>Username</th>
                    <th>Port</th>
                    <th>Tag</th>
                    <th>Cloud</th>
                    <td>DeployPath</td>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                {{#each servers}}
                <tr>
                    <td>{{host}}</td>
                    <td>{{username}}</td>
                    <td>{{port}}</td>
                    <td><span class="label label-primary {{env}}">{{envName}}</span></td>
                    <td>{{cloud}}</td>
                    <td>{{deployDir}}</td>
                    <td data-id='{{_id}}'>
                        <button class="btn btn-success btn-xs server-edit">修改</button> &nbsp;
                        <button class="btn btn-danger btn-xs server-del">删除</button>
                    </td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
    <!-- panel -->
</div>


<script>
    $(document).off().on('ready pjax:end', function() {
        
        console.log('page: servers');

        // $("#table-servers").on('draw.dt', function() {
        //     eventBind();
        // });

        function eventBind() {
            $('.server-del').off().on('click', function(){
                var id = $(this).parent().data('id');
                $.post('/servers/del', {id: id}, function(ret){
                    if(ret.code == 200){
                        var i = layer.alert('操作成功', function(){
                            layer.close(i);
                            location.href = location.href;
                        });
                    }
                });
            });
            
            $('.server-edit').off().on('click', function(){
                var id = $(this).parent().data('id');
                location.href = '/servers/edit?id=' + id;
            });
        }

        eventBind();

        $("#table-servers").DataTable({
            pageLength: 20,
            retrieve: true,
            responsive: true,
            searching: false
        });
        
    });
    
</script>