const $ = require('yoho-jquery');
const $captcha = $('#js-img-check');
const tip = require('js/plugin/tip');
const showErrTip = tip.show;
const api = require('../api');
const validatePWD = require('../password-check');
const Validate = require('js/plugin/validata');
const validate = new Validate($captcha, {
    useREM: {
        rootFontSize: 40,
        picWidth: 150
    }
});

class RegisterNew {
    constructor() {
        this.view = {
            clearMobile: $('#clearMobile'),
            countryCodeBtn: $('#countryCodeBtn'),
            countryCodeSelector: $('#countryCodeSelector'),
            getVerifyCodeBtn: $('#getVerifyCodeBtn'),
            regBtn: $('#regBtn'),
            mobileInput: $('input[name=mobile]'),
            verifyCodeInput: $('input[name=verifyCode]'),
            inviteCodeInput: $('input[name=inviteCode]'),
            passwordInput: $('input[name=password]'),
            passwordEyeIcon: $('#passwordEyeIcon'),
            eyeClose: $('.eye-close'),
            eyeOpen: $('.eye-open'),
            tokenInput: $('input[name=token]'),
            protocolCheckbox: $('.protocol .checkbox')
        };

        if ($captcha.data('userverify')) {
            validate.init();
        }

        this.view.getVerifyCodeBtn.data('oneClick', false); // 是否点击过获取验证码按钮

        this.view.clearMobile.on('click', this.clearMobile.bind(this));
        this.view.regBtn.on('click', this.register.bind(this));
        this.view.mobileInput.bind('input', this.changeBtnStatus.bind(this, 'mobile'));
        this.view.verifyCodeInput.bind('input', this.changeBtnStatus.bind(this));
        this.view.passwordInput.bind('input', this.changeBtnStatus.bind(this));
        this.view.passwordEyeIcon.on('click', this.passwordShowStatus.bind(this));
        this.view.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
        this.view.protocolCheckbox.on('click', this.changePrtclckbxStatus.bind(this));

    }

    /**
     * 改变用户协议勾选按钮状态
     */
    changePrtclckbxStatus() {
        if (this.view.protocolCheckbox.hasClass('icon-cb-radio')) {
            this.view.protocolCheckbox.addClass('icon-radio').removeClass('icon-cb-radio');
        } else {
            this.view.protocolCheckbox.addClass('icon-cb-radio').removeClass('icon-radio');
        }
        this.changeBtnStatus();
    }

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

    /**
     * 隐藏显示密码
     */
    passwordShowStatus() {
        if (this.view.eyeOpen.hasClass('hide')) {
            this.view.passwordInput.attr('type', 'text');
            this.view.eyeClose.addClass('hide');
            this.view.eyeOpen.removeClass('hide');
        } else {
            this.view.passwordInput.attr('type', 'password');
            this.view.eyeOpen.addClass('hide');
            this.view.eyeClose.removeClass('hide');
        }
    }

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

        this.view.getVerifyCodeBtn.removeClass('active');
        this.view.mobileInput.attr('disabled', 'disabled');
        this.view.clearMobile.addClass('hide');

        itime = setInterval(() => {
            if (count === 0) {
                this.view.getVerifyCodeBtn.text('重新获取').addClass('active');
                this.view.mobileInput.removeAttr('disabled');
                this.view.clearMobile.removeClass('hide');
                clearInterval(itime);
            } else {
                this.view.getVerifyCodeBtn.text('重新获取 (' + count-- + '秒)');
                window.setCookie('count', count);

                if (during && parseInt(during, 10) !== 0) {
                    this.view.getVerifyCodeBtn.removeClass('active');
                    this.view.mobileInput.attr('disabled', 'disabled');
                    this.view.clearMobile.addClass('hide');
                }
            }
        }, 1000);
    }

    /**
     * 输入监听，改变按钮状态
     * which
     */
    changeBtnStatus(which) {

        // 获取验证码按钮
        if (which === 'mobile') {
            if (this.view.mobileInput.val()) {
                this.view.getVerifyCodeBtn.addClass('active');
                this.view.clearMobile.removeClass('hide');
            } else {
                this.view.getVerifyCodeBtn.removeClass('active');
                this.view.clearMobile.addClass('hide');
            }
        }

        // 登录按钮
        if (this.view.mobileInput.val() &&
            this.view.passwordInput.val() &&
            this.view.verifyCodeInput.val() &&
            this.view.getVerifyCodeBtn.data('oneClick')) {
            this.view.regBtn.addClass('active');
        } else {
            this.view.regBtn.removeClass('active');
        }
    }

    /**
     * 注册动作处理
     */
    register() {
        let password = this.view.passwordInput.val();

        if (!this.view.regBtn.hasClass('active')) {
            return;
        }

        if (!this.view.protocolCheckbox.hasClass('icon-cb-radio')) {
            showErrTip('您必须同意YOHO!BUY有货服务条款后，才能进行注册！');
            return;
        }

        let validateResult = validatePWD(password, result => {
            if (!result.valid) {
                showErrTip(result.msg);
            }
            return result.valid;
        });

        if (!validateResult) {
            return;
        }

        this.postRegister();
    }

    /**
     * 提交注册请求
     */
    postRegister() {
        if (this.view.regBtn.hasClass('active')) {
            this.view.regBtn.removeClass('active');
            let postData = {
                password: $.trim(this.view.passwordInput.val()),
                phoneNum: this.view.mobileInput.val(),
                areaCode: this.view.countryCodeSelector.val(),
                smsCode: this.view.verifyCodeInput.val(),
                token: this.view.tokenInput.val(),
                inviteCode: this.view.inviteCodeInput.val()
            };

            return $.ajax({
                type: 'POST',
                url: '/passport/register-new',
                data: postData,
                success: (data) => {
                    let res = data.data;

                    if (data.code === 200) {
                        showErrTip('注册成功');

                        window.setCookie('refer', res.session);
                        window.setCookie('msgDelivery', res.msgDelivery, {expires: 1, path: '/' });

                        // 统计代码：用于统计从哪个渠道注册成功的
                        if (window._yas && window._yas.sendCustomInfo) {
                            window._yas.sendCustomInfo({
                                op: 'YB_REGISTER_SUCCESS_L',
                                ud: window.getUid(),
                                param: JSON.stringify({
                                    C_ID: window._ChannelVary[window.cookie('_Channel')] || 1,
                                    UNION_TYPE: window.queryString.union_type || window.cookie('unionTypeYas') || false
                                })
                            }, true);
                        }

                        let _fxcmd = window._fxcmd || [];

                        _fxcmd.push(['trackEvent', 'event', 'reg', '注册', '1']);

                        setTimeout(function() {
                            location.href = res.href;
                        }, 1500);
                    } else {
                        this.view.regBtn.addClass('active');
                        showErrTip(data.message);
                    }
                },
                error: (data) => {
                    this.view.regBtn.addClass('active');

                    if (data && data.responseJSON && data.responseJSON.message) {
                        showErrTip(data.message);
                    }
                }
            });
        }
    }

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

        this.view.getVerifyCodeBtn.data('oneClick', true);

        let areaCode = this.view.countryCodeSelector.val();
        let phoneNum = this.view.mobileInput.val();

        let params = {
            areaCode: areaCode.replace('+', ''),
            phoneNum: this.view.mobileInput.val(),
            inviteCode: this.view.inviteCodeInput.val()
        };

        if (api.phoneRegx[areaCode].test(phoneNum) || areaCode !== '+86') {
            validate.getResults().then(result => {
                $.extend(params, result);
                $.ajax({
                    url: '/passport/reg/verifymobile',
                    type: 'POST',
                    data: params,
                    success: postResult => {
                        validate.type === 2 && validate.refresh();
                        if (postResult.code === 200) {
                            this.view.tokenInput.val(postResult.data.token);
                            this.countDown();
                        } else {
                            (postResult.changeCaptcha && validate.type !== 2) && validate.refresh();

                            showErrTip(postResult.message);
                        }
                    },
                    error: () => {
                        showErrTip('出错了，请重试');
                        validate.refresh();
                    }
                });
            });
        } else {
            showErrTip('手机号输入有错误');
        }
    }
}

module.exports = RegisterNew;