<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 { IPSPanelItem } from '@ibiz/dynamic-model-api';
import { IParams } from 'ibiz-core';
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class AppScrollContainer extends Vue {
    /**
     * 子容器模型
     *
     * @type {*}
     * @memberof AppScrollContainer
     */
    @Prop() public panelItems!: any;

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

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

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

    /**
     * 初始化滚动容器
     *
     * @memberof AppScrollContainer
     */
    public initScrollContainer() {
        let minusHeight = 0;
        let minusWidth = 0;
        if (this.panelItems && this.panelItems.length > 0) {
            this.panelItems.forEach((panelItem: IPSPanelItem) => {
                const { name, width, height } = panelItem;
                const tag = (panelItem.getPSLayoutPos() as any).layoutPos;
                const style = {};
                if (width) {
                    Object.assign(style, { width: `${width}px` });
                    if (tag && (Object.is(tag, 'WEST') || Object.is(tag, 'EAST'))) {
                        minusWidth += width;
                    }
                }
                if (height) {
                    Object.assign(style, { height: `${height}px` });
                    if (tag && (Object.is(tag, 'NORTH') || Object.is(tag, 'SOUTH'))) {
                        minusHeight += height;
                    }
                }
                if (this.containerModel.hasOwnProperty(tag)) {
                    Object.assign(this.containerModel[tag], { style });
                    this.containerModel[tag].name.push(name);
                } else {
                    this.containerModel[tag] = { 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%';
        }
    }
}
</script>

<style lang="less">
@import './app-scroll-container.less';
</style>
