<template>
    <el-container class="ap-ctn-a flex-col" style="height: 100%;">
        <el-header class="ap-ctn-a-header flex-justify-between">
            <div>
                <slot name="headerForm"></slot>
            </div>
            <div class="ap-ctn-a-btn">
                <slot name="headerBtn"></slot>
            </div>
        </el-header>
        <el-container class="flex-1" style="min-height: 0;">
            <el-aside class="ap-ctn-a-tree" :style="{ 'width': asideWidth}">
                <slot name="aside"></slot>
            </el-aside>
            <el-main class="ap-ctn-a-main">
                <el-container style="height: 100%;">
                    <el-header class="ap-ctn-a-form">
                        <slot name="mainTop"></slot>
                    </el-header>
                    <el-main style="padding: 0px;height: 40%">
                        <slot name="mainCenter"></slot>
                    </el-main>
                    <el-main  style="padding: 0px;height: 40%">
                        <slot name="mainBottom"></slot>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

export default {
    name: 'ApCtnA',
    props: {
        asideWidth: {
            type: String,
            default: '250px'
        }
    }
};
</script>

<style scoped>
.ap-ctn-a-header {
    background-color: white;
    margin: 10px;
    padding: 10px;
    min-height: 50px;
    height: auto !important;
}
.ap-ctn-a-tree {
    background-color: white;
    margin: 0 10px 10px 10px;
    padding: 10px;
}
.ap-ctn-a-main {
    background-color: white;
    margin: 0 10px 10px 0px;
    padding: 10px;
    min-height: 0;
}
.ap-ctn-a-form {
    border-bottom: 1px solid #e2e7ef;
    padding: 0px;
    overflow: scroll;
    height: auto !important;
    min-height: 100px;
    max-height: 45%;
}

.ap-ctn-a-header /deep/ .el-form-item--mini {
    margin-bottom: 0px;
}
.ap-ctn-a /deep/ .form-title {
    font-weight: bold;
    margin-bottom: 5px;
}
.ap-ctn-a-form /deep/ .el-form-item__error {
    z-index: 10;
}
.ap-ctn-a-form /deep/ .el-input--mini {
    width: 130px !important;
}
.ap-ctn-a-form /deep/ .el-input-group__append, .el-input-group__prepend {
    padding: 0 10px;
}
.ap-ctn-a-form /deep/ .el-textarea{
    width: 360px;
}
.ap-ctn-a-form /deep/ .el-form-item--mini {
    margin-bottom: 4px;
}
.ap-ctn-a-btn /deep/ .el-button--mini {
    margin-left: 0;
    padding: 7px 9px;
}
.ap-ctn-a-btn /deep/ .el-button-group {
    margin-right: 10px;
}
</style>