<template>
    <view :id="id"></view>
</template>

<script>
/**
* @file 手机验证码登录
* @author haoyan
*/

export default {
    config: {
        component: true
    },
    props: {
        phone: {
            'type': String,
            'default': ''
        },
        sms: {
            'type': String,
            'default': ''
        }
    },
    watch: {
        phone(value) {
            // 填入手机号
            const $wrap = $(`#${this.id}`);
            $wrap.find('input[name="mobilenum"]').val(value);
        },
        sms(value) {
            // 填入验证码
            this.usms = value;
            const $wrap = $(`#${this.id}`);
            $wrap.find('input[name="password"]').val(value);
            $wrap.find('.pass-button-submit').removeClass('pass-button-submit-disabled').click();
        }
    },
    data() {
        return {
            id: 'sms-' + Math.ceil(Math.random() * 1000) + '-' + Date.now(),
            uphone: '',
            usms: ''
        };
    },
    lifetimes: {
        attached() {
            this.init();
        }
    },
    components: {
    },
    methods: {
        // 初始化验证码登录组件
        // 参考文档：http://dev.passport.baidu.com/docs/agg/viewv2?path=tech.text&doc=wap/passport/sms.text
        init() {
            const src = 'https://wappass.baidu.com/static/touch/js/api/wrapper.js?cdnversion=' + new Date().getTime();
            this.getScript(src, () => {
                /* eslint-disable no-undef */
                passport.use('smsLogin', {
                    library: true
                }, i => {
                    return this.initSmsLogin(i);
                });
            });
        },
        // 动态添加js
        getScript(src, cb) {
            const script = document.createElement('script');
            script.async = 'async';
            script.src = src;
            if (typeof cb === 'function') {
                script.onload = cb;
            }
            document.getElementsByTagName('head')[0].appendChild(script);
        },
        // 初始化验证码登录
        initSmsLogin(i) {
            const staticPage = `${window.location.origin}/med/web/static/html/v3Jump.html`;
            /* eslint-disable babel/new-cap */
            const login = new i.passport.smsLogin({
                product: 'askdoctor',
                u: window.location.href,
                extrajson: {
                    src: 'se_020003'
                },
                staticPage
            });
            login.on('loginSuccess', e => {
                const $wrap = $(`#${this.id}`);
                this.$emit('success', {
                    phone: $wrap.find('input[name="mobilenum"]').val(),
                    sms: $wrap.find('input[name="password"]').val()
                });
                e.returnValue = false;
            });
            login.on('loginError', e => {
                this.$emit('error', e);

            });
            login.on('render', e => {
                e.returnValue = false;
                const $wrap = $(`#${this.id}`);
                // 填入手机号
                $wrap.find('input[name="mobilenum"]').val(this.phone);
                // 点击[发送动态验证码]
                $wrap.find('.pass-button-send').click();
                // 错误信息
                const $err = $wrap.find('.pass-msg-generalMsgWrapper');
                let observer = new MutationObserver(() => {
                    let errorText = $err.text();
                    if (errorText) {
                        this.$api.showToast({
                            title: errorText,
                            icon: 'none'
                        });
                        this.$emit('errortext', errorText);
                    }
                });
                observer.observe($err.get(0), {
                    attributes: true
                });
                $wrap.css({
                    'opacity': 0,
                    'position': 'absolute',
                    'z-index': -1
                });
            });
            login.render(this.id);
        },
        // 手动发送验证码
        sendSms() {
            const $wrap = $(`#${this.id}`);
            // 点击[发送动态验证码]
            $wrap.find('.pass-button-send').click();
        },
        // 手动登录
        login() {
            const $wrap = $(`#${this.id}`);
            $wrap.find('.pass-button-submit').removeClass('pass-button-submit-disabled').click();
        }
    }
};
</script>

<style lang="less">
</style>