<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>
            <input id="info" type="hidden" data-id='{{project._id}}' data-env='{{deploy.env}}'>
        </div>
    </div>
    <!-- media -->
</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>
    $(document).on('ready pjax:success', function() {

        var tables = {};
        $('#table-building-{{project._id}}').each(function() {
            var env = $(this).parents('.panel').data('env');
            tables[env] = $(this).DataTable({
                retrieve: true,
                responsive: true,
                searching: false,
                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';
                        var button_str = '<button ' + (disabled ? 'disabled' : '') + ' class="btn btn-success btn-xs deploy-btn" data-id="' + data + '" data-build=' + row.buildTime + '>分发</button>';
                        {{#if is_master}}
                            return button_str;
                        {{^}}
                            {{#if deploy.is_preview}}
                                return button_str;
                            {{^}}
                                return '';
                            {{/if}}
                        {{/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}}',
                value: 'master'
            }, 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);
                    }
                });
            });

        });

        $('.restart-btn').click(function(){
            var id = $('#info').data('id');
            var env = $('#info').data('env');
            var host = $(this).parents('.host-info').data('host');

            layer.confirm('确定重启吗？', {
                btn: ['确定', '取消']
            }, function() {
                $.post('/projects/restart', {
                    id: id,
                    host: host,
                    env: env
                },function(ret) {
                    if (ret.code == 200) {
                        layer.msg('正在重启中');
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                });
            });
        });

        $('.deleterestart-btn').click(function(){
            var id = $('#info').data('id');
            var env = $('#info').data('env');
            var host = $(this).data('host');

            layer.confirm('确定删除后重启吗？', {
                btn: ['确定', '取消']
            }, function() {
                $.post('/projects/deleterestart', {
                    id: id,
                    host: host,
                    env: env
                },function(ret) {
                    if (ret.code == 200) {
                        layer.msg('正在删除重启中');
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                });
            });
        })

        $('.rollback-btn').click(function() {
            layer.prompt({
                title: '请输入回滚到哪个版本'
            }, function(build) {
                doDeploy(build);
            });
        });

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

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

        function viewLog(tag) {
        }
    });

    $(function() {
        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('/restart/{{project._id}}', function(data) {
                console.log(data);
                $('#d-' + data.host.replace(/\./g, '-')).find('b').text(data.state);
            });

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

            ws.on('/monit/{{project._id}}', function(data) {
                console.log(data);
                var label = $('#d-' + data.host.replace(/\./g, '-')).find('.label-status');
                var servers = $('#d-' + data.host.replace(/\./g, '-')).find('.label-serstatus');

                data = data.monitdata;
                if (data.errmsg) {
                    label.text(data.errmsg).removeClass('label-success').addClass('label-danger');
                    servers.text("获取失败").removeClass('label-success').addClass('label-danger');
                } else {
                    var msg = "线程：" + data.total
                    for(var s in data.status) {
                        msg += ';   [' + s + ']：' + data.status[s];
                    }
                    label.text(msg);

                    if (data.total != data.status.online) {
                        label.removeClass('label-success').addClass('label-danger');
                    } else {
                        label.removeClass('label-danger').addClass('label-success');
                    }

                    msg = "";
                    if (data.cpuUsg) msg += "CPU：" + data.cpuUsg + "；";
                    if (data.freeMen) msg += "可用内存：" + data.freeMen;
                    servers.text(msg).removeClass('label-danger').addClass('label-success');
                }
            });

            // 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');
        });
        
        var projectid = $('#info').data('id');
        var env = $('#info').data('env');
        var monit = function() {
            $.post('/projects/monit', {
                id: projectid,
                env: env
            },function(ret) {
                if (ret.code != 200) {
                    layer.msg(ret.msg, {icon: 5});
                }
            });
        }
        setInterval(function(){
            // 监控服务状态(轮训)
            monit();
        }, 5000);

        monit(); 
        
    });
</script>