import $ from 'yoho-jquery';
import tip from 'plugin/tip';
import Page from 'yoho-page';
import api from '../api';
import dialog from 'plugin/dialog';
import bindDialogHbs from 'passport/bind-dialog-tip.hbs';
import Validate from 'plugin/validata';

const validate = new Validate('#js-img-check', {
    useREM: {
        rootFontSize: 40,
        picWidth: 150
    }
});
const showErrTip = tip.show;

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

        this.selector = {
            itime: 0,
            openId: $.trim($.queryString().openId),
            sourceType: $.trim($.queryString().sourceType),
            countrySelect: $('.mobile-form-login select.country-select'),
            mobileInput: $('.mobile-form-login input.mobile-input'),
            clearMobile: $('.mobile-form-login .clear'),
            verifyCodeInput: $('.mobile-form-login input.verify-code-input'),
            verifyCodeBtn: $('.mobile-form-login .get-verify-code'),
            loginBtn: $('.mobile-form-login .sms-login-btn'),
            $captcha: $('#js-img-check')
        };

        this.init();
    }

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

        this.bindEvents();
    }

    bindEvents() {
        this.selector.countrySelect.on('change', this.changeBtnStatus.bind(this));
        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, true));
        this.selector.verifyCodeBtn.on('click', this.getVerifyCode.bind(this));
        this.selector.loginBtn.on('click', this.login.bind(this));
    }

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

    /**
     * 输入监听，改变按钮状态
     */
    changeBtnStatus(isVerifycode) {
        let areaCode = $.trim(this.selector.countrySelect.val());
        let phoneNum = $.trim(this.selector.mobileInput.val());
        let verifyCode = $.trim(this.selector.verifyCodeInput.val());

        if (!api.phoneRegx[areaCode]) {
            return showErrTip('出错了，请重新刷新页面');
        }

        if (phoneNum) {
            this.selector.clearMobile.removeClass('hide');
        }

        // 验证码输入框单独处理
        if (isVerifycode === true) {
            // 提交表单按钮激活
            if (verifyCode && api.phoneRegx[areaCode].test(phoneNum)) {
                this.selector.loginBtn.addClass('active');
            } else {
                this.selector.loginBtn.removeClass('active');
            }

            return;
        }

        clearInterval(this.selector.itime);
        this.selector.verifyCodeBtn.text('获取验证码');

        if (api.phoneRegx[areaCode].test(phoneNum)) {
            this.selector.verifyCodeBtn.addClass('active');
            if (verifyCode) {
                this.selector.loginBtn.addClass('active');
            }
        } else {
            this.selector.verifyCodeBtn.removeClass('active');
            this.selector.loginBtn.removeClass('active');
        }
    }

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

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

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

        this.selector.itime = setInterval(() => {
            window.setCookie('intTimer', count, {path: '/' });

            if (count <= 0) {
                this.selector.verifyCodeBtn.text('重新获取').addClass('active');
                clearInterval(this.selector.itime);
            } else {
                this.selector.verifyCodeBtn.text('重新获取 (' + count-- + '秒)');
            }

        }, 1000);
    }


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

        if (!this.selector.verifyCodeBtn.hasClass('active') ||
            this.selector.verifyCodeBtn.data('oneClick')) {
            return;
        }

        if (!api.phoneRegx[area]) {
            return showErrTip('出错了，请重新刷新页面');
        } else if (!api.phoneRegx[area].test(pn)) {
            return showErrTip('手机号格式不正确，请重新输入');
        }

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

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

            $.extend(params, result);

            this.ajax({
                url: '/passport/bind/thirdSendMsg',
                type: 'POST',
                data: params
            }).then(codeResult => {
                this.selector.verifyCodeBtn.data('oneClick', false);
                validate.type === 2 && validate.refresh();

                if (codeResult.code === 200) {
                    this.countDown();
                    return;
                } else {
                    showErrTip(codeResult.message);
                }

                (codeResult.changeCaptcha && validate.type !== 2) && validate.refresh();
            }).catch(() => {
                this.selector.verifyCodeBtn.data('oneClick', false);
                showErrTip('出错了，请重试');
                validate.refresh();
            });
        }).catch(() => {
            this.selector.verifyCodeBtn.data('oneClick', false);
        });
    }

    login() {
        let pn = $.trim(this.selector.mobileInput.val());
        let area = $.trim(this.selector.countrySelect.val());
        let verifyCode = $.trim(this.selector.verifyCodeInput.val());

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

        if (!api.phoneRegx[area]) {
            return showErrTip('出错了，请重新刷新页面');
        } else if (!api.phoneRegx[area].test(pn)) {
            return showErrTip('手机号格式不正确，请重新输入');
        }

        let params = {
            area: area.replace('+', ''),
            mobile: pn,
            code: verifyCode,
            open_id: this.selector.openId,
            source_type: this.selector.sourceType,
        };

        this.ajax({
            url: '/passport/bind/thirdMobileCheck',
            type: 'POST',
            data: params
        }).then(codeResult => {
            if (codeResult.code === 200) {
                this.continueBind(
                    $.extend({isBind: 'N', isRegister: 'N'}, codeResult.data),
                    params
                );
            } else {
                showErrTip(codeResult.message);
            }
        }).catch(() => {
            showErrTip('出错了，请重试');
        });
    }

    continueBind(codeResult, params) {
        let that = this;
        let goUrl = '/passport/bind/success';
        let bindParams = {
            isBind: codeResult.isBind === 'Y',
            isRegister: codeResult.isRegister === 'Y'
        };

        // 如果没有绑定没有注册，直接注册
        if (!(bindParams.isBind || bindParams.isRegister)) {
            document.location.href = goUrl;
            return;
        }

        dialog.showDialog({
            dialogText: bindDialogHbs(bindParams),
            fast: true,
            hasFooter: {
                leftBtnText: '去登录',
                rightBtnText: '继续'
            }
        }, function() {
            return that.ajax({
                url: '/passport/bind/thirdContinueMobile',
                type: 'POST',
                data: params
            }).then(cresult => {
                if (cresult.code === 200) {
                    document.location.href = goUrl;
                    return;
                } else {
                    showErrTip(cresult.message);
                }
            }).catch(() => {
                showErrTip('出错了，请重试');
            });
        }, function() {
            document.location.href = '//m.yohobuy.com/signin.html?area=' +
                params.area + '&mobile=' + params.mobile;
        });

        $('.dialog-wrapper').addClass('s-dialog-bind');
    }
}

module.exports = ThirdBindMobile;