import $ from 'yoho-jquery';
import tip from 'plugin/tip';
import Page from 'yoho-page';
import api from '../api';
import Validate from 'plugin/validata';
const showErrTip = tip.show;
const trim = $.trim;
const $captcha = $('#js-img-check');
const useVerify = $captcha.data('userverify'); // 170406 是否使用验证
const validate = new Validate($captcha, {
    useREM: {
        rootFontSize: 40,
        picWidth: 150
    }
});

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

        this.selector = {
            countryCodeSelector: $('#countryCodeSelector'),
            clearMobile: $('#clearMobile'),
            mobileInput: $('input[name=mobile]'),
            passwordInput: $('input[name=password]'),
            passwordEyeIcon: $('#passwordEyeIcon'),
            eyeClose: $('.eye-close'),
            eyeOpen: $('.eye-open'),
            internationalLoginBtn: $('#internationalLoginBtn')
        };

        this.init();
    }

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

    bindEvents() {
        this.selector.clearMobile.on('click', this.clearMobile.bind(this));
        this.selector.passwordEyeIcon.on('click', this.passwordShowStatus.bind(this));
        this.selector.internationalLoginBtn.on('click', this.internationalLogin.bind(this));
        this.selector.mobileInput.bind('input', this.changeLoginBtnStatus.bind(this, 'mobile'));
        this.selector.passwordInput.bind('input', this.changeLoginBtnStatus.bind(this));
    }

    /**
     * 改变登录按钮的状态
     * which
     */
    changeLoginBtnStatus(which) {
        if (which === 'mobile') {
            // 清除手机号按钮
            if (this.selector.mobileInput.val()) {
                this.selector.clearMobile.removeClass('hide');
            } else {
                this.selector.clearMobile.addClass('hide');
            }
        }

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

    /**
     * 登录操作处理
     */
    internationalLogin() {
        let pn = trim(this.selector.mobileInput.val()),
            areaCode = this.selector.countryCodeSelector.val(),
            pwd = trim(this.selector.passwordInput.val());

        if (!this.selector.internationalLoginBtn.hasClass('active')) {
            return;
        }

        if ((api.phoneRegx[areaCode].test(pn) || areaCode !== '+86') && api.pwdValidate(pwd)) {
            let params = {
                areaCode: areaCode.replace('+', ''),
                account: pn,
                password: pwd
            };

            if (useVerify) {
                validate.getResults().then((result) => {
                    this.selector.internationalLoginBtn.text('正在登录...').addClass('disable');
                    $.extend(params, result);
                    this.postInternationalLogin(params);
                });
            } else {
                this.postInternationalLogin(params);
            }
        } else {
            showErrTip('账号或密码有错误，请重新输入');
            this.selector.internationalLoginBtn.text('登录').addClass('disable');
        }
    }

    /**
     * 发送国际账号登录请求
     */
    postInternationalLogin(params) {
        this.ajax({
            type: 'POST',
            url: '/passport/login/auth',
            data: params
        }).then(data => {
            let res;

            validate && validate.type === 2 && validate.refresh();
            if (data.code === 200) {
                res = data.data;
                showErrTip('登录成功');

                // 3秒后强制跳转
                setTimeout(() => {
                    location.href = res.href;
                }, 1500);

                this.selector.internationalLoginBtn.text('登录成功');
                showErrTip('登录成功');
            } 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();
            }
        });
    }

    /**
     * 重置表单
     */
    resetForm() {
        this.selector.passwordInput.val('').focus();
        this.selector.internationalLoginBtn.text('登录').removeClass('active');
    }

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

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

module.exports = InternationalNew;