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

class Login {
    constructor() {
        this.view = {
            loginBtn: $('#loginBtn'),
            clearUsrname: $('#clearUsrname'),
            usernameInput: $('input[name=username]'),
            passwordInput: $('input[name=password]'),
            passwordEyeIcon: $('#passwordEyeIcon'),
            eyeClose: $('.eye-close'),
            eyeOpen: $('.eye-open'),
            getPswrdBtn: $('#getPswrdBtn'),
            getPasswordBox: $('.get-password-box'),
            showYohoFamilyTip: $('#showYohoFamilyTip')
        };

        this.view.loginBtn.on('click', this.login.bind(this));
        this.view.clearUsrname.on('click', this.clearUsrname.bind(this));
        this.view.passwordEyeIcon.on('click', this.passwordShowStatus.bind(this));
        this.view.getPswrdBtn.on('click', this.showGetPasswordBox.bind(this));
        this.view.getPasswordBox.on('click', this.hiddenGetPasswordBox.bind(this));
        this.view.showYohoFamilyTip.on('click', this.showYohoFamilyTip.bind(this));
        this.view.usernameInput.bind('input', this.changeBtnStatus.bind(this, 'username'));
        this.view.passwordInput.bind('input', this.changeBtnStatus.bind(this));

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

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

        if (which === 'username') {
            // 清除按钮
            if (this.view.usernameInput.val()) {
                this.view.clearUsrname.removeClass('hide');
            } else {
                this.view.clearUsrname.addClass('hide');
            }
        }

        // 登录按钮
        if (this.view.usernameInput.val() && this.view.passwordInput.val()) {
            this.view.loginBtn.removeClass('disable');
        } else {
            this.view.loginBtn.addClass('disable');
        }
    }

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

    /**
     * 登录
     */
    login() {
        if (this.view.loginBtn.hasClass('disable')) {
            return;
        }
        let acc = trim(this.view.usernameInput.val()),
            pwd = trim(this.view.passwordInput.val());

        // 验证账号（数字或者邮箱）和密码合理性
        if ((/^[0-9]+$/.test(acc) || api.emailRegx.test(acc)) && api.pwdValidate(pwd)) {
            let params = {
                account: acc,
                password: pwd,
                isskip: window.queryString.isskip
            };

            if ($captcha.data('userverify')) {
                validate.getResults().then((result) => {
                    this.view.loginBtn.text('正在登录...').addClass('disable');

                    $.extend(params, result);

                    // auth
                    this.loginAuth(params, acc);
                }, () => {});
            } else {
                this.loginAuth(params, acc);
            }
        } else {
            showErrTip('账号或密码有错误，请重新输入');
            this.view.loginBtn.text('登录').removeClass('disable');
        }
    }

    loginAuth(params, acc) {
        $.ajax({
            type: 'POST',
            url: '/passport/login/auth',
            data: params,
            success: (data) => {
                let res,
                    LOGI_TYPE;

                if (acc.indexOf('@') > 0) {
                    LOGI_TYPE = 8;
                } else {
                    LOGI_TYPE = 5;
                }

                if (window._yas && window._yas.sendCustomInfo) {
                    window._yas.sendCustomInfo({
                        op: 'YB_MY_LOGIN_C',
                        param: JSON.stringify({
                            C_ID: window._ChannelVary[window.cookie('_Channel')],
                            LOGI_TYPE: LOGI_TYPE
                        })
                    }, true);
                }
                validate && validate.type === 2 && validate.refresh();
                if (data.code === 200) {
                    res = data.data;

                    showErrTip('登录成功');
                    location.href = res.href;
                    this.view.loginBtn.text('登录成功');
                } else if (data.code === 4189) {
                    localStorage.loginJumpUrl = $('#account').val();
                    localStorage.loginJump = 'true';
                    location.href = data.url;
                } else if (data.code === 510) {
                    location.href = data.url;
                } else {
                    $captcha.data('userverify', data.captchaShow);
                    if (data.captchaShow) {
                        if (validate.atWorking) {
                            ((data.changeCaptcha && validate.type !== 2) && validate.refresh());
                        } else {
                            validate.init();
                        }
                    }

                    showErrTip(data.message);
                    this.resetForm();
                }

                return data;
            },
            error: () => {
                showErrTip('网络断开连接啦~');

                validate && validate.refresh();
            },
            complete: () => {
                this.view.loginBtn.text('登录').removeClass('disable');
            }
        });
    }

    resetForm() {
        this.view.loginBtn.text('登录').addClass('disable');
    }

    /**
     * 清除输入的用户名
     */
    clearUsrname() {
        this.view.usernameInput.val('');
        this.view.clearUsrname.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');
        }
    }

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

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

module.exports = Login;