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

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

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

        this.init();
    }

    init() {
        validate.init();
        this.selector.getVerifyCodeBtn.data('oneClick', false);
        this.bindEvents();
    }

    bindEvents() {
        this.selector.mobileInput.on('input', this.changeBtnStatus.bind(this));
        this.selector.clearMobile.on('click', this.clearMobile.bind(this));
        this.selector.verifyCodeInput.on('input', this.changeBtnStatus.bind(this));
        this.selector.passwordInput.on('input', this.changeBtnStatus.bind(this));
        this.selector.passwordEyeIcon.on('click', this.passwordShowStatus.bind(this));
        this.selector.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
        this.selector.backMobileResetBtn.on('click', this.resetPassword.bind(this));
    }

    /**
     * 隐藏显示密码
     */
    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');
        this.selector.getVerifyCodeBtn.removeClass('active');
    }

    /**
     * 输入监听，改变按钮状态
     */
    changeBtnStatus() {
        // 获取验证码按钮
        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.getVerifyCodeBtn.data('oneClick') &&
            this.selector.verifyCodeInput.val() &&
            this.selector.passwordInput.val()) {
            let valiResult = validatePWD(this.selector.passwordInput.val());

            if (valiResult) {
                this.selector.backMobileResetBtn.addClass('active');
            } else {
                this.selector.backMobileResetBtn.removeClass('active');
            }
        } else {
            this.selector.backMobileResetBtn.removeClass('active');
        }
    }

    /**
     * 获取验证码倒计时
     */
    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);
    }


    /**
     * 获取验证码
     */
    getVerifyCode() {
        let pn = $.trim(this.selector.mobileInput.val());
        let area = $.trim(this.selector.countryCodeSelector.val());

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

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

        if (area && pn && api.phoneRegx[area].test(pn)) {
            validate.getResults().then(result => {
                let params = {
                    areaCode: area.replace('+', ''),
                    phoneNum: pn
                };

                $.extend(params, result);

                this.ajax({
                    url: '/passport/back/sendcode',
                    type: 'POST',
                    data: params
                }).then(codeResult => {
                    validate.type === 2 && validate.refresh();
                    if (codeResult.code === 200) {
                        this.countDown();
                        return;
                    } else if (codeResult.code === 409) {
                        showErrTip(codeResult.message);
                    } else {
                        showErrTip(codeResult.message);
                    }
                    (codeResult.changeCaptcha && validate.type !== 2) && validate.refresh();
                }).catch(() => {
                    showErrTip('出错了，请重试');
                    validate.refresh();
                });
            });
        } else if (!area) {
            showErrTip('出错了，请重新刷新页面');
        } else {
            showErrTip('手机号格式不正确，请重新输入');
        }
    }

    /**
     * 重置密码
     */
    resetPassword() {
        if (!this.selector.backMobileResetBtn.hasClass('active')) {
            return;
        }

        let pwd = $.trim(this.selector.passwordInput.val());
        let postData = {
            phoneNum: this.selector.mobileInput.val(),
            password: pwd,
            code: this.selector.verifyCodeInput.val(),
            areaCode: this.selector.countryCodeSelector.val().replace('+', '')
        };

        if (validatePWD(pwd)) {
            this.ajax({
                type: 'POST',
                url: '/passport/back/passwordByMobile-new',
                data: postData
            }).then(result => {
                if (result.code === 200) {
                    showErrTip('密码修改成功');

                    // 1000ms后跳转页面
                    setTimeout(() => {
                        location.href = result.data;
                    }, 1000);
                } else {
                    showErrTip(result.message);
                }
            });
        } else {
            showErrTip('密码6-20位，请重新输入');
        }
    }
}

module.exports = MobileNew;