<template>
  <div class="container">
    <div class="header">
      <slot name="header" />
    </div>
    <div :class="`main ${footerVisible ? 'footerVisible' : ''}`">
      <div class="aside" v-show="isCollapse">
        <slot name="aside" />
      </div>
      <div class="content">
        <slot name="content" />
      </div>
    </div>
    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2021-09-18 11:22:09
 */
export default {
  name: "MtContainer",
  props: {
    footerVisible: {
      type: Boolean,
      value: false,
    },
    isCollapse: {
      type: Boolean,
      value: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  @include container(#fff);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .main {
    display: flex;
    height: calc(100% - 104px);
    &.footerVisible {
      height: calc(100% - 104px - 76px);
    }
    .aside {
      width: j(90);
    }
    .content {
      height: 100%;
      width: 100%;
      flex:1;
      overflow: scroll;
    }
  }
}
</style>
