<template>
    <div id="suspension-skin">
        <div class="suspension-menu" @click.stop>
            <!-- 投票 -->
            <vote-box></vote-box>
            <!-- 抽奖 -->
            <draw-box></draw-box>
            <!-- 邀请卡 -->
            <invite-box v-if="channelInfo.isInvitation == 1"></invite-box>
            <!--提现-->
            <personal-box v-if="channelInfo.drawStatus == 1"></personal-box>
            <!-- 打赏 -->
            <reward-box v-if="ifReward"></reward-box>
            <!-- 点赞 -->
            <prais-box></prais-box>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    const drawBox = resolve => require(['./draw/index'],resolve)
    const personalBox = resolve => require(['./personal/index'],resolve)
    const praisBox = resolve => require(['./prais/index'],resolve)
    const rewardBox = resolve => require(['./reward/index'],resolve)
    const voteBox = resolve => require(['./vote/index'],resolve)

    export default {
        components: {
            drawBox,
            personalBox,
            praisBox,
            rewardBox,
            voteBox,
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'userInfo': 'userInfo',   
            }),
            ifReward(){
                if(this.channelInfo.rewardGiftStatus == 1 || this.channelInfo.rewardStatus == 1){
                    return true;
                }else{
                    return false;
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    *{
        user-select: none;
    }

    .suspension-menu{
        position: absolute;
        bottom: 80px;
        right: 10px;
        width: 40px;
        z-index: 300;
    }
</style>
