<template>
    <v-container>
        <div class="wrapper">
            <div class="wrapper_bd">
                <component :is="currentCommpoent" :user-id="userId" :open-id="openId"></component>
            </div>
        </div>
    </v-container>
</template>
<script>
export default {
    name: 'Index',
    props: {
        userId: {
            type: String,
            default: ''
        },
        openId: {
            type: String,
            default: ''
        }
    },
    components: {
        VContainer: () => import('./../components/VContainer'),
        BindUser: () => import('./components/BindUser'),
        SelectUser: () => import('./components/SelectUser')
    },
    computed: {
        currentCommpoent () {
            let { userId } = this
            return userId ? 'SelectUser' : 'BindUser'
        }
    },
    data () {
        return {}
    },
    created () {},
    mounted () {},
    methods: {}
}
</script>
<style lang="less" scoped>
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #EEF5FB;
    .wrapper_bd {
        position: absolute;
        width: 520px;
        left: 50%;
        margin-left: -260px;
        right: 30px;
        top: 46px;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
        padding: 0 20px 12px;
    }
}
</style>
