<template>
    <div :class="bem()">
        <Modal :visible.sync="visible" width="886px" :class="bem('modal')">
            <iframe
                v-once
                :class="bem('qq')"
                :src="src"
                frameborder="0"
            />
        </Modal>
    </div>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import Modal from '../Modal';
import { UMS_URL } from '../_utils/constant';

export default {
    name: createComponentName('auth-qq'),
    components: {
        Modal
    },
    mixins: [componentMixin],
    inject: ['vm'],
    data() {
        return { visible: true };
    },
    watch: {
        visible(value) {
            if (!value) {
                this.vm.switchType(this.vm.lastType);
            }
        }
    },
    created() {
        this.src = UMS_URL + '/sso/qq';
    },
    mounted() {
        window.addEventListener('message', (event) => {
            if (event.data) {
                if (event.data.action === 'login.success') {
                    this.vm.onLogin(event.data.data.authorization_code, 'qq');
                    this.vm.switchType(this.vm.lastType);
                }
                else if (event.data.action === 'bindphone') {
                    this.vm.bindphoneType = 'qq';
                    this.vm.switchType('bindphone');
                }
            }
        });
    }
};
</script>

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

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

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

    &__qq {
        width: 100%;
        height: 500px;
    }

    &__modal {
        .@{modal} {
            padding: 0;
        }

        .@{modal}__body {
            margin: 0;
        }

        .@{modal}__close {
            right: -20px;
            top: 0;
            color: #000;
            font-size: 18px;
        }
    }
}
</style>
