<template>
    <el-container class="su-container su-container-lr" :style="style" v-if="mode==='lr'">
        <su-aside v-if="$slots.aside" :is-collapse="asideCollapse" :slide-btn="size===0 && slideBtn"><slot name="aside"></slot></su-aside>
        <el-container>
            <el-header v-if="$slots.header" class="su-header"><slot name="header"></slot></el-header>
            <el-main v-if="$slots.main" class="su-main"><slot name="main"></slot></el-main>
            <el-footer v-if="$slots.footer" class="su-footer" :height="footerHeight"><slot name="footer"></slot></el-footer>
        </el-container>
    </el-container>
    <el-container class="su-container su-container-ud" :style="style" v-else-if="mode==='ud'">
        <el-header v-if="$slots.header" class="su-header"><slot name="header"></slot></el-header>
        <el-container class="su-container-down">
            <su-aside v-if="$slots.aside" :is-collapse="asideCollapse" :slide-btn="size===0 && slideBtn"><slot name="aside"></slot></su-aside>
            <el-container>
                <el-main v-if="$slots.main" class="su-main"><slot name="main"></slot></el-main>
                <el-footer v-if="$slots.footer" class="su-footer"><slot name="footer"></slot></el-footer>
            </el-container>
        </el-container>
    </el-container>
    <el-container class="su-container su-container-ucd" :style="style" v-else-if="mode==='ucd'">
        <el-header v-if="$slots.header" class="su-header"><slot name="header"></slot></el-header>
        <el-container>
            <su-aside v-if="$slots.aside" :is-collapse="asideCollapse" :slide-btn="size===0 && slideBtn"><slot name="aside"></slot></su-aside>
            <el-main v-if="$slots.main" class="su-main"><slot name="main"></slot></el-main>
        </el-container>
        <el-footer v-if="$slots.footer" class="su-footer"><slot name="footer"></slot></el-footer>
    </el-container>

</template>

<script>
import suAside from "./su-aside"
export default {
    name: "index",
    components:{suAside},
    props:{
        mode:{
            type:String,
            default:"lr",//lr 左右布局 ud 上下布局 ucd 上中下布局
        },
		size:{
			type:Number,
			default:0,
		},
		slideBtn:{
			type: Boolean,
			default: true,
		},
		footerHeight:{
			type: String,
			default: '60px'
		},
        asideCollapse:{
            type:Boolean,
            default:false,//是否折叠菜单 64px 200px
        }
    },
    computed: {
        style() {
            return {
                width: this.size===0?'100vw':"100%",
                height: this.size===0?'100vh':(this.size+"px"),
            }
        }
    },
    methods: {
    }
}
</script>

<style scoped lang="less">
    .su-container{
        overflow-y: auto;
        /deep/.el-header{
            padding: 0 0;
        }
        /deep/.el-main{
            padding: 0 0;
        }
        /deep/.el-footer{
            padding: 0 0;
        }
    }
    .su-container-ud{
        .su-container-down{
            height: calc(100% - 60px);
        }
    }
</style>
