<template>
    <layout :class="layoutClassName" ref="editViewLayout">
        <header class="view-header">
            <div class="view-header__top">
                <slot name="headerTop" />
            </div>
            <div class="view-header__content">
                <div class="view-header__left">
                    <slot name="headerLeft" />
                </div>
                <div class="view-header__center">
                    <slot name="headerCenter" />
                </div>
                <div class="view-header__right">
                    <slot name="headerRight" />
                </div>  
            </div>
            <div class="view-header__bottom">
                <slot name="headerBottom" />
            </div>  
        </header>
        <content class="view-content content-container">
            <slot name="contentTop" />
            <slot />
            <slot name="contentBottom" />
        </content>
        <footer class="view-footer">
            <slot name="footer" />
        </footer>
    </layout>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppEditViewLayout extends Vue {

    /**
     * 视图默认使用
     *
     * @type {boolean}
     * @memberof AppEditViewLayout
     */
    @Prop({ default: false }) public viewDefaultUsage?: boolean;

    /**
     * 布局类名
     *
     * @memberof AppEditViewLayout
     */
    get layoutClassName(){
      return {'edit-view-layout view-layout':true, 
        'view-container': true, 
        'view-default-usage': this.viewDefaultUsage ? true :false}
    }

    mounted(){
      if (this.viewDefaultUsage) {
        const layout:any = this.$refs.editViewLayout;
        if (layout && layout.$el ){
          const header = layout.$el.querySelector('.view-header');
          const content = layout.$el.querySelector('.view-content');
          console.log(layout, header, content);
          setTimeout(() => {
            const height = header.offsetHeight;
            content.style.marginTop = height + 'px';
          }, 500);
        }
      }
    }

}
</script>

<style lang="scss">
@import "./edit-view-layout.scss";
</style>
