<template>
    <view class="van-sidebar">
        <slot></slot>
    </view>
</template>

<script>
    import Util from '../../utils/utils.js';
    export default {
        props: {
            activeKey: {
                type: Number,
                value: 0
            }
        },
        watch: {
            activeKey: function(newData) {
                this.setActive(newData);
            }
        },
        beforeCreate: function() {
            this.currentActive = -1;
        },
        mounted() {
            this.setActive(this.activeKey);
        },
        methods: {
            setActive: function(activeKey) {
                var _a = this,
                    children = _a.$children,
                    currentActive = _a.currentActive;
                if (!children.length) {
                    return Promise.resolve();
                }
                this.currentActive = activeKey;
                var stack = [];
                if (currentActive !== activeKey && children[currentActive]) {
                    stack.push(children[currentActive].setActive(false));
                }
                if (children[activeKey]) {
                    stack.push(children[activeKey].setActive(true));
                }
                return Promise.all(stack);
            }
        }
    };
</script>
<style>
    @import '../common/index.css';

    .van-sidebar {
        width: 100%;
        width: var(--sidebar-width, 100%);
    }
</style>