/**
 * 弹框公共组件
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2016/2/24
 */

var $ = require('yoho-jquery'),
    Handlebars = require('yoho-handlebars');

var defaultOptions = {
    mask: true,
    closeIcon: true
};

var tpl =
    '<div class="yoho-dialog {{className}} hide">' +
        '{{#if closeIcon}}' +
            '<span class="close {{#if myCloseIcon}}{{myCloseIcon}}{{/if}}">' +
                '{{#unless myCloseIcon}}' +
                    '<i class="iconfont">&#xe602;</i>' +
                '{{/unless}}' +
            '</span>' +
        '{{/if}}' +
        '<div class="content">' +
            '{{{content}}}' +
        '</div>' +
        '<div class="btns">' +
            '{{# btns}}' +
                '<span {{#if id}}id="dialog-{{id}}"{{/if}} class="btn{{#each btnClass}} {{.}}{{/each}}">' +
                    '{{name}}' +
                '</span>' +
            '{{/ btns}}' +
        '</div>' +
    '</div>';

var tplFn = Handlebars.compile(tpl);

// 背景蒙版
function createMask() {
    if ($('.body-mask').length === 0) {
        $('body').append('<div class="body-mask hide"></div>');
    }

    return $('.body-mask').css({
        height: $(document).height(),
        width: $(document).width()
    });
}

function createDialog(data) {
    $('body').append(tplFn(data));

    return $('.yoho-dialog');
}

function Dialog(options) {
    var opt = $.extend({}, defaultOptions, options);
    var that = this,
        i;

    // 实现继承时，只返回实例，不生成html
    if (opt.inherit) {
        return this;
    }

    if (opt.mask) {
        that.$mask = createMask();
    }
    that.$el = createDialog(opt);

    // 绑定x关闭事件
    that.$el.find('.close').click(function() {
        that.close();
    });

    function bindBtnEvt(index) {
        that.$el.find('#dialog-' + opt.btns[index].id).on('click', function() {
            opt.btns[index].cb && opt.btns[index].cb();
        });
    }

    // 绑定按钮事件
    if (opt.btns) {
        for (i = 0; i < opt.btns.length; i++) {
            bindBtnEvt(i);
        }
    }
}

Dialog.prototype.close = function() {
    this.$mask && this.$mask.addClass('hide');
    this.$el.remove();
};

Dialog.prototype.show = function() {
    this.$mask && this.$mask.removeClass('hide');
    this.$el.removeClass('hide').css({
        'margin-top': -this.$el.height() / 2,
        'margin-left': -this.$el.width() / 2
    });
};

exports.Dialog = Dialog;

// Alert
function Alert(content) {
    var that = this;
    var option = {
        content: content,
        className: 'alert-dialog',
        btns: [
            {
                id: 'alert-sure',
                btnClass: ['alert-sure'],
                name: '确定',
                cb: function() {
                    that.close();
                }
            }
        ]
    };

    Dialog.call(this, option);
}

Alert.prototype = new Dialog({
    inherit: true
});
Alert.prototype.constructor = Alert;
exports.Alert = Alert;

// Confirm
function Confirm(opt) {
    var that = this;

    var option = {
        content: opt.content,
        className: 'confirm-dialog',
        btns: [
            {
                id: 'confirm-sure',
                btnClass: ['confirm-sure'],
                name: '确定',
                cb: opt.cb
            },
            {
                id: 'confirm-cancel',
                btnClass: ['confirm-cancel'],
                name: '取消',
                cb: function() {
                    that.close();
                }
            }
        ]
    };

    Dialog.call(this, option);
}

Confirm.prototype = new Dialog({
    inherit: true
});
Confirm.prototype.constructor = Confirm;
exports.Confirm = Confirm;