<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">
                {{#if is_master}}
                    <a class="btn btn-info btn-rounded mr5 log-btn"><i class="fa fa-eye"></i> 查看构建日志</a>
                    <a class="btn btn-success btn-rounded mr20 build-btn"><i class="glyphicon glyphicon-plus"></i> 新增构建</a>
                {{/if}}
                <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';
                        {{#if is_master}}
                            return '<button ' + (disabled ? 'disabled' : '') + ' class="btn btn-success btn-xs deploy-btn" data-id="' + data + '" data-build=' + row.buildTime + '>分发</button>';
                        {{^}}
                            return '';
                        {{/if}}
                    },
                    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>