var $ = require('yoho-jquery'),
    Hbs = require('yoho-handlebars'),
    dialog = require('../common/dialog'),
    Captcha = require('../plugins/captcha');
var meGift;

require('yoho-jquery-placeholder');
require('../common');

meGift = {
    isFlag: false, // 防止用户频繁点击
    // 验证邮箱模板
    emailTpl: Hbs.compile($('#verify-email-tpl').html()),

    // 绑定手机模板
    mobileTpl: Hbs.compile($('#verify-mobile-tpl').html()),

    // 激活礼品卡模板
    giftTpl: Hbs.compile($('#activate-gift-tpl').html()),

    // 消费明细模板
    detailGiftTpl: Hbs.compile($('#detail-gift-tpl').html()),

    // 添加礼品卡按钮
    $addGift: $('.add-gift'),

    // 是否绑定手机
    isBinMobile: +$('.me-content').data('is-bin-mobile'),

    // 用户邮箱
    userEmail: $('.me-content').data('email'),

    init: function() {
        var that = this;

        // 添加礼品卡
        this.$addGift.click(function() {
            if (that.isBinMobile) {
                that.activateGift();
            } else {
                that.verifyEmailCode();
            }
        });

        // 显示手机区号或类型下拉列表
        $('body').on('click', '.mobile-area,.gift-filter', function() {
            $(this).find('.ul-list').toggle();
        });

        // 选择手机区号
        $('body').on('click', '.mobile-area-list', function(event) {
            var $li = $(event.target).closest('li');

            $('.mobile-area').find('em').text($li.data('cc'));
        });

        // 消费明细
        $('.me-gift-table').on('click', '.info-list', function() {

            new dialog.Dialog({
                content: that.detailGiftTpl({}),
                className: 'me-page me-gift-page me-gift-confirm'
            }).show();

            that.infoList('?' + $.param({
                cardCode: $(this).closest('.me-gift-tr').data('card-code')
            }));
        });

        // 消费明细-选择类型筛选
        $('body').on('click', '.gift-filter ul', function(event) {
            var $li = $(event.target).closest('li');

            $('.gift-filter').find('em').text($li.text());
            that.infoList('?' + $.param({
                cardCode: $('.info-gift-header').data('card-code'),
                type: $li.data('cc')
            }));
        });

        // 消费明细翻页
        $('body').on('click', '.detail-gift-content .pager a', function() {
            if ($(this).hasClass('cur')) {
                return false;
            }

            that.infoList($(this).attr('href'));
            return false;
        });
    },

    postAjax: function(url, data, verifyData, captcha) {
        var deferred = $.Deferred(); // eslint-disable-line
        var that = this;
        var x;

        captcha && captcha.hideTip();

        if (that.isFlag) {
            return deferred.resolve({
                code: 401,
                message: '数据请求中...'
            });
        }

        if (verifyData) {
            for (x in verifyData) {
                if (!data[x]) {
                    that.meAlert(verifyData[x], false);
                    return deferred.resolve({
                        code: 401,
                        message: verifyData[x]
                    });
                }
            }
        }

        that.isFlag = true;

        return $.ajax({
            url: url,
            type: 'post',
            data: data
        }).then(function(res) {
            if (res.code === 405) {
                captcha && captcha.showTip(res.message);
            } else if (res.code !== 200) {
                that.meAlert(res.message, false);
            }

            that.isFlag = false;
            return res;
        }, function() {
            that.isFlag = false;
        });
    },

    intTimer: function($dom) {
        var intTime = 60;
        var intval = setInterval(function() {

            if (intTime-- <= 0) {
                clearInterval(intval);
                $dom.removeClass('int-timer').html('获取短信验证码');
                return false;
            }

            $dom.html(intTime + 's');
        }, 1000);

        $dom.addClass('int-timer');
        $dom.html(intTime + 's');
    },

    // 获取邮箱验证码
    getEmailCode: function(captcha) {
        var that = this;

        this.postAjax('/home/megift/sendEmailCode', {
            email: this.userEmail,
            verifyCode: captcha.getResults()
        }, {}, captcha).then(function(res) {
            if (res.code === 200) {
                that.intTimer($('.email-btn'));
            }
        });
    },

    // 效验邮箱验证码
    verifyEmailCode: function() {
        var that = this;
        var captcha;
        var dg = new dialog.Dialog({
            content: that.emailTpl({}),
            className: 'me-gift-confirm',
            btns: [{
                id: 'confirm-email-btn',
                name: '绑定手机号',
                btnClass: ['alert-sure'],
                cb: function() {
                    var emailCode = $('.email-code').val();
                    var verifyData = {code: '验证码不能为空'};

                    that.postAjax('/home/megift/verifyEmail', {
                        email: that.userEmail,
                        code: emailCode
                    }, verifyData).then(function(res) {
                        if (res.code === 200) {
                            dg.close();
                            that.getMobileCode();
                        }
                    });
                }
            }]
        }).show();

        setTimeout(function() {
            $('[placeholder]', dg.$el).placeholder(); // ie8 兼容 placeholder
        }, 10);
        captcha = new Captcha('#captcha').init();

        // 发送邮箱验证码
        $('.me-gift-confirm').find('.email-btn').unbind('click').bind('click', function() {
            if (!$(this).hasClass('int-timer')) {
                that.getEmailCode(captcha);
            }
        });
    },

    // 获取手机验证码
    getMobileCode: function() {
        var that = this;
        var captcha;
        var dg = new dialog.Dialog({
            content: that.mobileTpl({}),
            className: 'me-gift-confirm',
            btns: [{
                id: 'confirm-mobile-cancel',
                name: '取消',
                btnClass: ['confirm-cancel'],
                cb: function() {
                    dg.close();
                }
            }, {
                id: 'confirm-mobile-sure',
                name: '激活',
                btnClass: ['confirm-sure'],
                cb: function() {
                    var verifyData = {
                        area: '请选择手机区号',
                        mobile: '手机号不能为空',
                        code: '手机验证码不能为空'
                    };

                    that.postAjax('/home/megift/changeMobile', {
                        area: ($('.mobile-area').find('em').text() || '').replace(/^\+/, ''),
                        mobile: $('input.mobile').val(),
                        code: $('input.mobile-code').val()
                    }, verifyData, captcha).then(function(res) {
                        if (res.code === 200) {
                            dg.close();
                            that.activateGift();
                        }
                    });
                }
            }]
        }).show();

        setTimeout(function() {
            $('[placeholder]', dg.$el).placeholder(); // ie8 兼容 placeholder
        }, 10);
        captcha = new Captcha('#captcha').init();

        // 发送邮箱验证码
        $('.me-gift-confirm').find('.mobile-btn').unbind('click').bind('click', function() {
            if (!$(this).hasClass('int-timer')) {
                that.smsBind(captcha);
            }
        });
    },

    // 发送手机验证码
    smsBind: function(captcha) {
        var that = this;
        var area = ($('.mobile-area').find('em').text() || '').replace(/^\+/, '');
        var mobile = $('input.mobile').val();
        var verifyData = {
            area: '请选择手机区号',
            mobile: '手机号不能为空'
        };

        this.postAjax('/home/megift/smsBind', {
            area: area,
            mobile: mobile,
            verifyCode: captcha.getResults()
        }, verifyData, captcha).then(function(res) {
            if (res.code === 200) {
                that.intTimer($('.mobile-btn'));
            }
        });
    },

    // 激活礼品卡
    activateGift: function() {
        var that = this;
        var captcha;
        var dg = new dialog.Dialog({
            content: that.giftTpl({}),
            className: 'me-gift-confirm',
            btns: [{
                id: 'confirm-gift-cancel',
                name: '取消',
                btnClass: ['confirm-cancel'],
                cb: function() {
                    dg.close();
                }
            }, {
                id: 'confirm-gift-sure',
                name: '激活',
                btnClass: ['confirm-sure'],
                cb: function() {
                    var $confirm = $('.me-gift-confirm');
                    var verifyData = {
                        cardCode: '礼品卡卡号不能为空',
                        cardPwd: '礼品卡卡密不能为空'
                    };

                    that.postAjax('/home/meGift/activateGift', {
                        cardCode: $confirm.find('.card-code').val(),
                        cardPwd: $confirm.find('.card-pwd').val(),
                        verifyCode: captcha.getResults()
                    }, verifyData, captcha).then(function(res) {
                        if (res.code === 200) {
                            dg.close();
                            that.meAlert('<p>您的礼品卡激活成功</p><p>请尽情享用</p>', false, function() {
                                location.reload();
                            });
                        }
                    });
                }
            }]
        }).show();

        setTimeout(function() {
            $('[placeholder]', dg.$el).placeholder(); // ie8 兼容 placeholder
        }, 10);
        captcha = new Captcha('#captcha').init();
    },

    // 消费明细
    infoList: function(url) {
        url = url || '';
        $.get('/home/megift/detail' + url).then(function(res) {
            if (!res) {
                return false;
            }
            $('.detail-gift-content').html(res);
        });
    },

    // 我的弹框
    meAlert: function(content, mask, callback) {
        var dg;
        var meAlertDialog = $('.me-gift-confirm');

        meAlertDialog.addClass('hide');

        dg = new dialog.Dialog({
            content: content,
            className: 'me-gift-alert',
            mask: !!mask,
            btns: [{
                name: '我知道了',
                id: 'alert-gift-cancel',
                btnClass: ['alert-sure'],
                cb: function() {
                    dg.close();
                    meAlertDialog.removeClass('hide');
                    callback && callback();
                }
            }]
        }).show();
    }
};

$(function() {
    meGift.init();
});