<template>
    <div :class="bem()">
        <div :class="bem('title')"><img :class="bem('icon-wechat')" src="../../assets/img/wechat-inner.svg" alt="wechat">微信扫码登录/注册</div>
        <div :class="bem('qrcode-wrapper')">
            <div :class="bem('message')" v-if="loading">
                <span v-if="loading">生成二维码中...</span>
            </div>
            <template v-else-if="error">
                <span :class="bem('message')">
                    <span v-if="error">二维码生成失败</span><br>
                    <Button type="primary" @click="createWechatQrcode">点击重试</Button>
                </span>
            </template>
            <template v-else>
                <qrcode :class="bem('qrcode')" :value="qrcodeUrl" :options="qrcodeOption" />
                <div :class="bem('tips')">微信扫码关注即可登录</div>
            </template>
        </div>
        <div :class="bem('third-parties')">
            <div @click="vm.switchType('phone')">
                <img src="../../assets/img/phone.svg" :class="bem('icon-phone')" alt="phone">
                手机号登录
            </div>
            <div @click="vm.switchType('qq')">
                <img src="../../assets/img/qq.svg" :class="bem('icon-qq')" alt="qq">
                QQ登录
            </div>
        </div>
        <div :class="bem('footer')">
            <Button type="text"  @click="vm.switchType('register')" >
                手机号注册
                <Icon name="arrow-right" />
            </Button>
        </div>
    </div>
</template>

<script>
import Qrcode from '@xkeshi/vue-qrcode';
import Button from '../Button';
import Icon from '../Icon';
import tips from '../Tips';
import { sessionCache } from '../cache';
import { componentMixin, createComponentName } from '../_utils/component';

export default {
    name: createComponentName('auth-wechat'),
    components: { Button, Qrcode, Icon },
    mixins: [componentMixin],
    inject: ['vm'],
    data() {
        return {
            qrcodeUrl: '',
            qrcodeOption: {
                size: 160,
            },
            // invalid: false,
            loading: false,
            error: false,
        };
    },
    mounted() {
        this.init();
    },
    beforeDestroy() {
        if (!this.success && this.qrcodeUrl && this.qrcodeId) {
            sessionCache.set('wechat-qrcode', {
                url: this.qrcodeUrl,
                id: this.qrcodeId
            }, {
                time: '8m'
            });
        }
        else {
            sessionCache.remove('wechat-qrcode');
        }
        this.clearTimer();
    },
    methods: {
        init() {
            const data = sessionCache.get('wechat-qrcode');
            if (data) {
                this.qrcodeUrl = data.url;
                this.qrcodeId = data.id;
                this.queryWechatStatus(data.id);
            }
            else {
                this.createWechatQrcode();
            }
        },
        createWechatQrcode() {
            this.loading = true;
            this.error = false;

            this.clearTimer();
            this.vm.requestUms('createWechatQrcode', { native: 1 }).then((res) => {
                this.qrcodeUrl = res.url;
                this.qrcodeId = res.id;
                this.loading = false;

                this.queryWechatStatus(res.id);
            }).catch((e) => {
                tips(e.message);
                this.loading = false;
                this.error = true;
            });
        },
        clearTimer() {
            clearTimeout(this.queryTimer);
        },
        queryWechatStatus(id) {
            this.queryTimer = setTimeout(() => {
                this.vm.requestUms('queryWechatStatus', { id: id })
                    .then(res => {
                        if (res.result !== 0) {
                            this.clearTimer();
                        }

                        switch (res.result) {
                            case 1:
                                this.vm.bindphoneType = 'wechat';
                                this.success = true;
                                this.vm.switchType('bindphone');
                                break;
                            case 2:
                                this.success = true;
                                this.vm.onLogin(res.authorization_code, 'wechat');
                                break;
                            case 3:
                                this.createWechatQrcode();
                                break;
                            default:
                                this.queryWechatStatus(id);
                                break;
                        }
                    }).catch(e => {
                        tips(e.message);
                        this.createWechatQrcode();
                    });
            }, 1000);
        }
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';

@auth-wechat: ~'@{prefix}-auth-wechat';

.@{auth-wechat} {
    display: flex;
    flex-direction: column;
    align-items: center;

    & &__title {
        color: #000;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: @margin-base;
        text-align: center;
        display: flex;
        align-items: center;
    }

    & &__qrcode {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    & &__tips {
        color: #A3A3A3;
        font-size: 14px;
        font-weight: 300;
        margin-top: 6px;
    }

    & &__back-btn {
        color: #000;
        margin-top: 65px;
    }

    & &__qrcode-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 188px;
        height: 214px;
        padding: @margin-sm;
        border: 1px solid #E4E4E4;
    }

    & &__mask {
        position: absolute;
        background: #000;
        opacity: .5;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
    }

    & &__invalid-tips {
        color: #FFF;
        cursor: pointer;
        top: 80px;
        left: 30px;
        line-height: 20px;
        position: absolute;
        text-align: center;
        width: 134px;
        z-index: 100;
    }

    & &__message {
        cursor: pointer;
        line-height: 20px;
        text-align: center;
        width: 134px;
        font-size: 16px;

        .@{button} {
            margin-top: 12px;
        }
    }

    & &__third-parties {
        width: 100%;
        margin-top: 27px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        & > div {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 16px;
            cursor: pointer;
        }
    }

    & &__icon-wechat,
    & &__icon-phone,
    & &__icon-qq {
        width: 24px;
        height: 24px;
        margin-right: 6px;
    }

    & &__icon-wechat {
        margin-right: @margin-sm;
    }

    & &__footer {
        position: absolute;
        display: flex;
        flex-direction: row-reverse;
        bottom: 0;
        left: 0;
        height:48px;
        width: 100%;
        color: #005CF9;
        padding: 0 @margin-lg;
        background:linear-gradient(216deg,rgba(249,250,251,1) 0%,rgba(248,250,251,1) 57%,rgba(240,242,246,1) 100%);
    }
}
</style>
