<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="/servers">Projects</a></li>
                <li>{{project.name}}</li>
            </ul>
            <h4>{{project.name}} ({{project.subname}})</h4>
        </div>
    </div>
    <!-- media -->
</div>

<div class="contentpanel project-index-page">
    <div class="panel panel-default" data-env='{{deploy.env}}'>
        <div class="panel-heading">
            <div class="pull-right">
                <a class="btn btn-info btn-rounded mr5 log-btn"><i class="fa fa-eye"></i> 查看构建日志</a>
                <a class="btn btn-warning btn-rounded mr5 rollback-btn"><i class="fa fa-reply"></i> 回滚</a>
                <a class="btn btn-success btn-rounded mr20 build-btn"><i class="glyphicon glyphicon-plus"></i> 新增构建</a>
                <a href="" class="tooltips panel-minimize"><i class="fa fa-minus"></i></a>
            </div>
            <h4 class="panel-title">{{deploy.name}}</h4>
            <p>分支：<code>{{deploy.branchName}}</code></p>
        </div>
        <div class="panel-body">
            <table id="table-{{deploy.env}}" class="table table-striped table-bordered building-table">
                <thead>
                    <tr>
                        <th>构建版本</th>
                        <th>分支名称</th>
                        <th>状态</th>
                        <th>构建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4>服务器信息</h4>
            <p>点击状态Label，可以查看实时日志</p>
        </div>
        <div class="panel-body">
            <div class="row">
                {{#each targets}}
                <div class="col-md-4" id="d-{{hostFm}}">
                    <div class="panel panel-info noborder">
                        <div class="panel-heading noborder">
                            <div class="panel-btns">
                            </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">当前运行版本：&nbsp;<code>{{#if info}}{{info.building}}{{^}}未知部署{{/if}}</code></h5>
                            </div><!-- media-body -->
                            <hr class="mt10 mb10">
                            <div class="clearfix mt5">
                                <div class="col-xs-6 project-env" data-env="test">
                                    <h5 class="md-title mt10">当前状态</h5>
                                    <span class="label label-success deploy-log-btn" data-host="{{host}}"><i class="fa fa-spinner fa-spin fa-fw margin-bottom"></i> <b>{{#if info}}{{info.state}}{{^}}未知部署{{/if}}</b></span>
                                </div>
                                <div class="col-xs-6">
                                    
                                </div>
                            </div>
                        </div><!-- panel-body -->
                    </div><!-- panel -->
                </div>
                {{/each}}
            </div>
        </div>
    </div>
</div>

<div id="log-area" class="panel panel-default panel-alt" style="display:none;height: 100%;">
    <div class="panel-body nopadding" style="height: 100%;"> 
        <textarea name="code" id="code" style="height: 100%;"></textarea>
    </div>
</div>

<script>
    
    $(function(){
        
        var tables = {};
        $('.building-table').each(function(){
            var env = $(this).parents('.panel').data('env');
            tables[env] = $(this).DataTable({
                responsive: true,
                ajax: '/projects/{{project._id}}/buildings?env=' + env,
                columns: [
                    { data: "buildTime"},
                    { data: "branch"},
                    { data: "state"},
                    { data: "updatedAt"},
                    { data: "_id" }
                ],
                order: [[0, 'desc']],
                columnDefs: [{
                    render: function(data, type, row){
                        var color = 'warning';
                        if(data == 'success'){
                            color = 'success';
                        }else if(data == 'fail'){
                            color = 'danger';
                        }
                        var html = '<span id="b-'+row._id+'" class="label label-' + color + '">';
                        if(data != 'success' && data != 'fail'){
                            html += '<i class="fa fa-spinner fa-spin fa-fw margin-bottom"></i>';
                        }                  
                        html += data + '</span>';
                        return html;
                    },
                    targets: 2
                }, {
                    render: function(data, type, row){
                        var disabled = row.state !== 'success';
                        return '<button '+(disabled? 'disabled' : '')+' class="btn btn-success btn-xs deploy-btn" data-id="'+data+'" data-build='+row.buildTime+'>分发</button>';
                    },
                    targets: 4
                }]
            });
            
            $(this).on( 'draw.dt', function () {
                $('.deploy-btn').click(function(){
                        var id = $(this).data('id');
                        var build = $(this).data('build');
                        layer.confirm('确定发布版本<code>' + build + '</code>吗？', {
                            btn: ['确定', '取消']
                        }, function(){
                            doDeploy(id);
                        });
                    });
            } );
        });
        
        function doDeploy(build){
            $.post('/projects/deploy/' + build, function(ret) {
                if(ret.code == 200){
                    layer.msg('正在分发中');
                }else{
                    layer.msg(ret.msg, {icon: 5});
                }
            });
        }
        
        $('.build-btn').click(function(){
            var env = $(this).parents('.panel').data('env');
            var i  = layer.prompt({
                title: '请输入需要构建的分支，默认为 {{deploy.branchName}}'
            }, function(branch){
                branch = branch || '{{deploy.branchName}}';
                $.post('/projects/build/{{project._id}}', {env: env, branch: branch}, function(ret){
                    if(ret.code == 200) {
                        tables[env].ajax.reload();
                        layer.close(i);
                    }
                });
            });
            
        });
        
        
        $('.rollback-btn').click(function(){
            layer.prompt({
                title: '请输入回滚到哪个版本'
            }, function(build){
               doDeploy(build);
            });
        });

        var cm = CodeMirror.fromTextArea(document.getElementById("code"), {
            lineNumbers: true,
            theme: 'ambiance'
        });

        var tag;
        
        $('.log-btn').click(function(){
            viewLog('');
        });

        $('.deploy-log-btn').click(function(){
            var host = $(this).data('host');
            viewLog(host);
        });

        function viewLog(tag){
            tag = tag;
            $('#log-area').show();
            cm.setValue("");
            cm.clearHistory();
            layer.open({
                type: 1,
                title: '实时日志',
                content: $('#log-area'),
                area: ['1000px', '600px'],
                maxmin:true,
                cancel: function(){
                    $('#log-area').hide();
                }
            });
        }

        var ws = io();
        ws.on('connect', function(){
            ws.on('/building/{{project._id}}', function(data){
                console.log(data);
                $('#b-' + data.bid).text(data.state);
                if(data.state == 'success'){
                    $('#b-' + data.bid).removeClass('label-warning').addClass('label-success')
                    $('#b-' + data.bid).parent().parent().find('.deploy-btn').removeAttr('disabled');
                    $('#b-' + data.bid).find('i').remove();
                }else if(data.state == 'fail'){
                    $('#b-' + data.bid).removeClass('label-warning').addClass('label-danger');
                    $('#b-' + data.bid).find('i').remove();
                }
            });
            
           // ws.on('/building/{{project._id}}/log', function(data){
           //     if(tag == '') {
           //         cm.replaceRange("> " + data + "\n", {line: Infinity});
           //     }
           // });

            ws.on('/deploy/{{project._id}}', function(data){
                console.log(data);
                $('#d-' + data.host.replace(/\./g, '-')).find('b').text(data.state);
            });

           // ws.on('/deploy/{{project._id}}/log', function(data){
           //     if(tag == data.host){
           //         cm.replaceRange("> " +data.msg+ "\n", {line: Infinity});
           //     }
           // });
        });
        ws.on('error', function(){
            console.log('connect fail');
        });
    });
</script>