<template>
    <div class="ht-base-split-nest-demo">
        <p style="margin: 10px 0;">嵌套面板分割-上嵌左右</p>
        <div class="demo-split demo-up-nest">
            <ht-base-split v-model="split5" mode="vertical" min="100px">
                <div slot="top" class="demo-split-pane demo-no-padding">
                    <ht-base-split v-model="split6">
                        <div slot="left" class="demo-split-pane">
                            左边面板
                        </div>
                        <div slot="right" class="demo-split-pane">
                            右边面板
                        </div>
                    </ht-base-split>
                </div>
                <div slot="bottom" class="demo-split-pane">
                    下边面板
                </div>
            </ht-base-split>
        </div>

        <p style="margin: 10px 0;">嵌套面板分割-下嵌左右</p>
        <div class="demo-split demo-up-nest">
            <ht-base-split v-model="split7" mode="vertical" max="100px">
                <div slot="top" class="demo-split-pane">
                    上边面板
                </div>
                <div slot="bottom" class="demo-split-pane  demo-no-padding">
                    <ht-base-split v-model="split8">
                        <div slot="left" class="demo-split-pane">
                            左边面板
                        </div>
                        <div slot="right" class="demo-split-pane">
                            右边面板
                        </div>
                    </ht-base-split>
                </div>
            </ht-base-split>
        </div>

        <p style="margin: 10px 0;">嵌套面板分割-左嵌上下</p>
        <div class="demo-split">
            <ht-base-split v-model="split1" min="100px">
                <div slot="left" class="demo-split-pane demo-no-padding">
                    <ht-base-split v-model="split2" mode="vertical">
                        <div slot="top" class="demo-split-pane">
                            上边面板
                        </div>
                        <div slot="bottom" class="demo-split-pane">
                            下边面板
                        </div>
                    </ht-base-split>
                </div>
                <div slot="right" class="demo-split-pane">
                    右边面板
                </div>
            </ht-base-split>
        </div>

        <p style="margin: 10px 0;">嵌套面板分割-右嵌上下</p>
        <div class="demo-split">
            <ht-base-split v-model="split3" min="100px">
                <div slot="left" class="demo-split-pane">
                    左边面板
                </div>
                <div slot="right" class="demo-split-pane demo-no-padding">
                    <ht-base-split v-model="split4" mode="vertical">
                        <div slot="top" class="demo-split-pane">
                            上边面板
                        </div>
                        <div slot="bottom" class="demo-split-pane">
                            下边面板
                        </div>
                    </ht-base-split>
                </div>
            </ht-base-split>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseSplitNestDemo',
        data() {
            return {
                split1: 0.5,
                split2: 0.5,
                split3: 0.5,
                split4: 0.5,
                split5: 0.5,
                split6: 0.5,
                split7: 0.5,
                split8: 0.5
            }
        }
    }
</script>
<style lang="less">
    .ht-base-split-nest-demo {
        .demo-split {
            height: 200px;
            border: 1px solid #dcdee2;

            .demo-split-pane {
                padding: 10px;
            }

            .demo-split-pane.demo-no-padding {
                height: 200px;
                padding: 0;
            }

        }

        .demo-up-nest {
            .demo-split-pane.demo-no-padding {
                height: 100%;
                padding: 0;
            }

            .ivu-split-trigger-vertical {
                width: 6px;
                height: 100%;
                background: #f8f8f9;
                border-top: none;
                border-bottom: none;
                cursor: col-resize;
            }

            .ivu-split-trigger-horizontal {
                height: 6px;
                width: 100%;
                background: #f8f8f9;
                border-left: none;
                border-right: none;
                cursor: row-resize;
            }

            .ivu-split-vertical .ivu-split-trigger-con {
                left: 50%;
                height: 0;
                width: 100%;
            }

            .ivu-split-horizontal .ivu-split-trigger-con {
                top: 50%;
                height: 100%;
                width: 0;
            }
        }
    }
</style>

