<template>
    <el-container :style="containerStyle" :class="'container-'+mode">
        <el-header v-if="$slots.header" style="border-bottom: solid 1px #ebebeb;padding: 0 0;  box-shadow: 0 2px 5px rgba(0,0,0,.08);">
            <slot name="header"></slot>
        </el-header>
        <el-container :class="{
            middle:!!$slots.header,
            'full-middle':!$slots.header,
        }">
            <el-aside v-if="$slots.aside" :width="asideWidth+'px'" style="background-color: #ffffff;">
                <div :class="asideClass">
                    <slot name="aside"></slot>
                </div>
            </el-aside>
            <el-container class="main">
                <el-main v-if="$slots.main">
                    <slot name="main"></slot>
                </el-main>
            </el-container>
        </el-container>
<!--            <el-footer v-if="$slots.footer">Footer</el-footer>-->
    </el-container>
</template>

<script>
export default {
    name: "index",
    props: {
        mode: {
            type: String,
            default: "relative"//absolute 窗口大小 ，relative 父容器大小， fixed 自定义宽高
        },
        width: {
            type: String,
            default: "100%"//absolute 窗口大小 ，relative 父容器大小， fixed 自定义宽高
        },
        height: {
            type: String,
            default: "100%"//absolute 窗口大小 ，relative 父容器大小， fixed 自定义宽高
        },
        asideWidth:{
            type: Number,
            default: 200
        }

    },
    data() {
        return {}
    },
    created() {

    },
    methods: {
        loadAsideClass() {
            this.asideClass = {};
        }
    },
    computed: {
        containerStyle(){
            switch (this.mode){
                case "absolute":
                    return {
                    }
                    break;
                case "relative":
                    return {
                    }
                    break;
                case "fixed":
                    return {
                        width:this.width,
                        height:this.height
                    }
                    break;
            }
            return {

            }
        },
        asideClass() {
            if (this.isSticky) {
                return {
                    "aside-noHeader": true,
                }
            }
            let hasHeader = !!this.$slots.header;
            return {
                "aside-header": hasHeader,
                "aside-noHeader": !hasHeader,
            }
        },
    }
}
</script>

<style scoped lang="less">
.container-absolute{
    width:100vw;
    height:calc(100vh - 10px)
}
.container-relative{
    width:100%;
    height:100%;//calc(100% - 10px);
    .middle{
       height: calc(100% - 60px);
    }
    .full-middle{
        height: 100%;
    }
}
.container-fixed{
    width:100vw;
    height:calc(100% - 10px)
}

.aside-header {
    height: 100%;
}

.aside-noHeader {
    height: 100%;
    width: 100%;
}
.main{
    width: 100%;
    height: 100%;
}
</style>
