<template>
    <tab-panel :class="bem()" :name="name" v-on="$listeners">
        <div :class="bem('tab')" slot="label" slot-scope="{ active }">
            <slot name="tab" :active="active"/>
        </div>
        <div>
            <div v-if="title || $slots.title" :class="bem('title')">
                <slot name="title">
                    {{title}}
                </slot>
            </div>
            <slot/>
        </div>
    </tab-panel>
</template>

<script>
import TabPanel from '../TabPanel';
import { createComponentName, componentMixin } from '../_utils/component';
export default {
    name: createComponentName('editor-sidebar-panel'),
    components: {
        TabPanel,
    },
    mixins: [componentMixin],
    props: {
        name: {
            type: String,
            required: true,
        },
        title: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            isMounted: false,
        };
    },
    mounted() {
        this.isMounted = true;
    },
};
</script>

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

.@{editor-sidebar-panel} {

    height: 100%;
    overflow: auto;
    width: 270px;

    &__tab {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        background: #fff;
        color: #626a77;
        height: 84px;
        width: 80px;
        font-size: 12px;

        .@{icon} {
            font-size: 24px;
            margin-bottom: 8px;
        }

        &:hover::after {
            content: "";
            position: absolute;
            top: 24px;
            left: 0;
            width: 4px;
            height: 36px;
            background-color: #005cf9;
        }
    }

    &__title {
        font-size: 16px;
        padding: 0 16px;
        font-weight: bold;
        line-height: 80px;
    }
}

.@{tabs}__tab--active {
    .@{editor-sidebar-panel}__tab {
        &::after {
            content: "";
            position: absolute;
            top: 24px;
            left: 0;
            width: 4px;
            height: 36px;
            background-color: #005cf9;
        }
    }
}
</style>
