<template>
    <div :class="bem({active: !!currentValue})">
        <tabs tab-position="left" :value="currentValue" @change="onChange">
            <slot/>
            <template slot="extra">
                <slot name="extra"/>
            </template>
        </tabs>
    </div>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import Tabs from '../Tabs'; ;

export default {
    name: createComponentName('editor-sidebar'),
    components: {
        Tabs,
    },
    mixins: [componentMixin],
    model: {
        name: 'value',
        event: 'change',
    },
    props: {
        // 默认展示的 panel
        defaultValue: {
            type: String,
        },
        value: {
            type: String,

        }
    },
    data() {
        let value = '';

        if (this.$hasProp('value')) {
            value = this.value;
        }
        else if (this.$hasProp('defaultValue')) {
            value = this.defaultValue;
        }

        return {
            currentValue: value,
        };
    },
    watch: {
        value(v) {
            this.currentValue = v;
        },
    },
    methods: {
        onChange(value) {
            const v = value === this.currentValue ? '' : value;

            if (!this.$hasProp('value')) {
                this.currentValue = v;
            }

            this.$emit('change', v);
        },
        closePanel() {
            this.onChange('');
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';

.@{editor-sidebar} {

    &__menus {
        list-style: none;
    }

    &__tab {
        display: block;
        position: relative;
        color: #626a77;
        height: 84px;
        width: 80px;
        outline: 0;
    }

    .@{tabs} {
        height: 100%;
    }

    .@{tabs}__content {
        padding: 0;
        width: 0;
        box-shadow: 4px 4px 8px -2px #d3e5ff;
        transition: width .2s ease;
        overflow: hidden;
    }

    .@{tabs}__content:not([data-name='']) {
        width: 270px;
    }

}

</style>
