<template>
    <div class="ht-base-drawer-storeys-demo">
        <ht-base-button type="primary" @click="showDrawer"> 多层抽屉</ht-base-button>
        <ht-base-drawer title="多层抽屉" width=520 :closable="false" @on-close="onClose" v-model="visible">
            <ht-base-button type="primary" @click="showChildrenDrawer"> 第二层抽屉</ht-base-button>
            <div class="demo-btn">
                <ht-base-button style="marginRight: 8px" @click="onClose"> 取消</ht-base-button>
                <ht-base-button @click="onClose" type="primary"> 提交</ht-base-button>
            </div>
        </ht-base-drawer>
        <ht-base-drawer title="第二层抽屉" width=320 :closable="false" @on-close="onChildrenDrawerClose"
                        v-model="childrenDrawer">
            <p>这里显示第二层抽屉一些相关内容…</p>
            <p>这里显示第二层抽屉一些相关内容…</p>
            <p>这里显示第二层抽屉一些相关内容…</p>
        </ht-base-drawer>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseDrawerStoreysDemo',
        data() {
            return {
                visible: false,
                childrenDrawer: false
            }
        },
        methods: {
            showDrawer() {
                this.visible = true
            },
            onClose() {
                this.visible = false
            },
            showChildrenDrawer() {
                this.childrenDrawer = true
            },
            onChildrenDrawerClose() {
                this.childrenDrawer = false
            },
        },
    }
</script>
<style lang="less">
    .demo-btn {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px 16px;
        text-align: right;
        left: 0;
        background: #fff;
        border-top: 1px solid #e4e4e4;
    }
</style>

