<template>
    <Block :class="[$style.mainContent,hasBtnGroup&&$style.hasBtnGroup]">
        <RingRoller v-if="status==1"/>
        <template v-else>
            <div :class="[$style.content,className]">
                <slot/>
                <div v-if="hasBtnGroup" :class="[$style.btnGroup,btnGroupAlign]">
                    <slot name="btnGroup"/>
                </div>

            </div>
        </template>
    </Block>
</template>

<script>
    import Block from "./Block";
    import RingRoller from "../effect/RingRoller";
    export default {
        name: "MainContent",
        components: {RingRoller, Block},
        props:{
            status:{},
            className:{
                type:String
            },
            btnGroupAlign:{
                type:String,
                default:'right'
            }
        },
        computed: {
            hasBtnGroup () {
                return this.$slots.btnGroup
            }
        },
        mounted(){
            console.log(this.$scopedSlots)
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';
    .mainContent {
        display: flex;
        flex: 1;
        padding-right: 10px;
        padding-left: 0;
        &.hasBtnGroup{
            padding-top: 4PX;
            >.content{
                $btnGroupHeight:60px;
                padding-top: $btnGroupHeight;
                >.btnGroup {
                    padding-left: 22px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: $btnGroupHeight;

                    &:global(.left){
                        @extend %FlexRowStartCenter;
                    }
                    &:global(.right){
                        @extend %FlexRowEndCenter;
                    }
                    > p {
                        color: #585858;
                        font-size: 16px;
                    }
                }
            }
        }
        >.content{
            position: relative;
            padding-left: 20px;
            padding-right: 10px;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            @include ScrollBarStyle();
            >:first-child{
                margin-top: 0 !important;
            }
        }
    }
</style>
