import $ from 'yoho-jquery';
import tip from 'plugin/tip';
import Modal2 from 'plugin/modal2';
import checkPoint from './check-point';
import Page from 'yoho-page';
import Validate from 'plugin/validata';
const $captcha = $('#js-img-check');
const validate = new Validate($captcha, {
    useREM: {
        rootFontSize: 40,
        picWidth: 150
    }
});

class SmsLoginNew extends Page {
    constructor() {
        super();

        this.selector = {
            clearMobile: $('#clearMobile'),
            countryCodeSelector: $('#countryCodeSelector'),
            mobileInput: $('input[name=mobile]'),
            getVerifyCodeBtn: $('#getVerifyCodeBtn'),
            verifyCode: $('input[name=verifyCode]'),
            smsLoginBtn: $('#smsLoginBtn'),
            getPswrdBtn: $('#getPswrdBtn'),
            getPasswordBox: $('.get-password-box'),
            showYohoFamilyTip: $('#showYohoFamilyTip')
        };

        this.init();
    }

    /**
     * 初始化
     */
    init() {
        validate.init();
        this.bindEvents();

        // 多次登录失败跳短信认证填充手机号
        this.selector.mobileInput.val(localStorage.loginJumpUrl);
        localStorage.removeItem('loginJumpUrl');
    }

    /**
     * 事件绑定
     */
    bindEvents() {
        this.selector.clearMobile.on('click', this.clearMobile.bind(this));
        this.selector.mobileInput.bind('input', this.changeBtnStatus.bind(this, 'mobile'));
        this.selector.verifyCode.bind('input', this.changeBtnStatus.bind(this));
        this.selector.smsLoginBtn.on('click', this.login.bind(this));
        this.selector.getPswrdBtn.on('click', this.showGetPasswordBox.bind(this));
        this.selector.getPasswordBox.on('click', this.hiddenGetPasswordBox.bind(this));
        this.selector.showYohoFamilyTip.on('click', this.showYohoFamilyTip.bind(this));
        this.selector.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
    }

    /**
     * 展示弹窗
     */
    showYohoFamilyTip() {
        Modal2.alert('Yoho!Family账号可登录Yoho!Buy有货、Yoho!Now、Mars及SHOW', 'Yoho!Family');
    }

    /**
     * 获取验证码倒计时
     */
    countDown(during) {
        let count = during || 59;
        let itime;

        this.selector.getVerifyCodeBtn.removeClass('active');

        itime = setInterval(() => {
            if (count === 0) {
                this.selector.getVerifyCodeBtn.text('重新获取').addClass('active');
                clearInterval(itime);
            } else {
                this.selector.getVerifyCodeBtn.text('重新获取 (' + count-- + '秒)');
                window.setCookie('count', count);

                if (during && parseInt(during, 10) !== 0) {
                    this.selector.getVerifyCodeBtn.removeClass('active');
                }
            }
        }, 1000);
    }

    /**
     * 输入监听，改变按钮状态
     * which
     */
    changeBtnStatus(which) {
        // 获取验证码按钮
        if (which === 'mobile') {
            if (this.selector.mobileInput.val()) {
                this.selector.getVerifyCodeBtn.addClass('active');
                this.selector.clearMobile.removeClass('hide');
            } else {
                this.selector.getVerifyCodeBtn.removeClass('active');
                this.selector.clearMobile.addClass('hide');
            }
        }

        // 登录按钮
        if (this.selector.mobileInput.val() && this.selector.verifyCode.val()) {
            this.selector.smsLoginBtn.addClass('active');
        } else {
            this.selector.smsLoginBtn.removeClass('active');
        }
    }

    /**
     * 登录
     */
    login() {
        if (!this.selector.smsLoginBtn.hasClass('active')) {
            return;
        }

        let code = this.selector.verifyCode.val();

        this.ajax({
            url: '/passport/sms_login/check.json',
            data: {
                code: code
            }
        }).then(res => {
            if (res.code === 200) {
                checkPoint('YB_MOBILE_LOGIN_C'); // 埋点

                if (res.newer) {
                    res.redirect = res.redirect + '&registerCode=' + res.registerCode;
                }

                location.href = res.redirect;
                return;
            }
            tip.show(res.message);
        }).catch(() => {
            tip.show('出错了！');
        });
    }

    /**
     * 获取验证码
     */
    getVerifyCode() {
        if (!this.selector.getVerifyCodeBtn.hasClass('active')) {
            return;
        }

        let areaCode = this.selector.countryCodeSelector.val();
        let phone = $.trim(this.selector.mobileInput.val());

        validate.getResults().then(result => {
            let params = {
                area: areaCode.replace('+', ''),
                mobile: phone
            };

            $.extend(params, result);
            this.ajax({
                method: 'POST',
                url: '/passport/sms_login/step1_check',
                data: params
            }).then(data => {
                validate.type === 2 && validate.refresh();
                if (data.code === 200) {
                    checkPoint('YB_MOBILE_NEXT_C'); // 埋点
                    this.countDown();
                } else {
                    (data.changeCaptcha && validate.type !== 2) && validate.refresh();
                    tip.show(data.message);
                }
            }).catch(() => {
                validate.refresh();
            });
        });
    }

    /**
     * 清除输入的手机号
     */
    clearMobile() {
        this.selector.mobileInput.val('');
        this.selector.clearMobile.addClass('hide');
    }

    /**
     * 显示找回密码遮罩
     */
    showGetPasswordBox() {
        this.selector.getPasswordBox.removeClass('hide');
    }

    /**
     * 隐藏找回密码遮罩
     */
    hiddenGetPasswordBox() {
        this.selector.getPasswordBox.addClass('hide');
        return false;
    }
}

module.exports = SmsLoginNew;