<template>
    <div class="app-scroll-container">
        <div
            v-if="containerModel.NORTH"
            :style="containerModel.NORTH.style"
            class="no-style overflow-auto app-scroll-container__header"
        >
            <template v-for="name of containerModel.NORTH.name">
                <slot :name="name"></slot>
            </template>
        </div>
        <div class="app-scroll-container__middle" :style="middleContainerStyle">
            <div
                v-if="containerModel.WEST"
                :style="containerModel.WEST.style"
                class="no-style overflow-auto app-scroll-container__left"
            >
                <template v-for="name of containerModel.WEST.name">
                    <slot :name="name"></slot>
                </template>
            </div>
            <div
                v-if="containerModel.CENTER"
                :style="containerModel.CENTER.style"
                class="no-style overflow-auto app-scroll-container__center"
            >
                <template v-for="name of containerModel.CENTER.name">
                    <slot :name="name"></slot>
                </template>
            </div>
            <div
                v-if="containerModel.EAST"
                :style="containerModel.EAST.style"
                class="no-style overflow-auto app-scroll-container__right"
            >
                <template v-for="name of containerModel.EAST.name">
                    <slot :name="name"></slot>
                </template>
            </div>
        </div>
        <div
            v-if="containerModel.SOUTH"
            :style="containerModel.SOUTH.style"
            class="no-style overflow-auto app-scroll-container__bottom"
        >
            <template v-for="name of containerModel.SOUTH.name">
                <slot :name="name"></slot>
            </template>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class AppScrollContainer extends Vue {
    /**
     * 名称
     *
     * @type {string}
     * @memberof AppScrollContainer
     */
    @Prop() public name!: string;

    /**
     * 布局模型详情
     *
     * @type {string}
     * @memberof AppScrollContainer
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 插槽对象
     *
     * @memberof AppScrollContainer
     */
    public containerModel: any = {};

    /**
     * 中间区域样式
     *
     * @memberof AppScrollContainer
     */
    public middleContainerStyle: any = {};

    /**
     * 组件初始化
     *
     * @memberof AppScrollContainer
     */
    public created() {
        this.initScrollContainer();
    }

    /**
     * 初始化滚动容器
     *
     * @memberof AppScrollContainer
     */
    public initScrollContainer() {
        let minusHeight = 0;
        let minusWidth = 0;
        const curLayoutModelDetails = this.layoutModelDetails[this.name];
        if (curLayoutModelDetails && curLayoutModelDetails.details && curLayoutModelDetails.details.length > 0) {
            curLayoutModelDetails.details.forEach((key: string) => {
                const { name, layoutWidth, layoutHeight, layoutPos } = this.layoutModelDetails[key];
                const style = {};
                if (layoutWidth) {
                    Object.assign(style, { width: `${layoutWidth}px` });
                    if (layoutPos && (Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))) {
                        minusWidth += layoutWidth;
                    }
                }
                if (layoutHeight) {
                    Object.assign(style, { height: `${layoutHeight}px` });
                    if (layoutPos && (Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))) {
                        minusHeight += layoutHeight;
                    }
                }
                if (this.containerModel.hasOwnProperty(layoutPos)) {
                    Object.assign(this.containerModel[layoutPos], { style });
                    this.containerModel[layoutPos].name.push(name);
                } else {
                    this.containerModel[layoutPos] = { style, name: [name] };
                }
            });
        }
        this.middleContainerStyle.height = minusHeight ? `calc(100% - ${minusHeight}px)` : '100%';
        if (this.containerModel.CENTER) {
            this.containerModel.CENTER.style.width = minusWidth ? `calc(100% - ${minusWidth}px)` : '100%';
        }
        console.log(this.containerModel);
    }
}
</script>
<style lang='less'>
@import 'app-scroll-container.less';
</style>