
<template>
    <div :class="bem([tabPosition])">
        <div :class="bem('tab-list')" ref="tabList">
            <template v-for="(panel) in panels">
                <div
                    @click="changeValue(panel.name)"
                    :key="panel.name"
                    :data-name="panel.name"
                    :class="bem('tab', { active: panel.active })"
                />
            </template>
            <slot name="extra"/>
        </div>
        <div :class="bem('content')" :data-name="currentValue">
            <slot/>
        </div>
    </div>
</template>
<script>
import { componentMixin, createComponentName } from '../_utils/component';

export default {
    name: createComponentName('tabs'),
    mixins: [componentMixin],
    provide() {
        return {
            rootTabs: this,
        };
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        defaultValue: {
            type: [String, Number],
            default: '',
        },
        value: {
            type: [String, Number, undefined],

        },
        tabPosition: {
            type: String,
            default: 'top',
        },
        border: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        let value = '';
        if (this.$hasProp('value')) {
            value = this.value;
        }
        else if (this.$hasProp('defaultValue')) {
            value = this.defaultValue;
        }
        return {
            panels: [],
            currentValue: value,
            isMounted: false,
        };
    },
    watch: {
        value(v) {
            this.currentValue = v;
        },
    },
    mounted() {
        this.isMounted = true;
    },
    methods: {
        addPanel(vm) {
            let children = vm;
            const childrenComponents = this.$slots.default.map(vnode => vnode.componentInstance);
            while (childrenComponents.indexOf(children) === -1) {
                if (children === this || children === this.$root) return;
                children = children.$parent;
            }
            const index = childrenComponents.indexOf(children);
            this.panels.splice(index, 0, vm);
        },
        getIndex(vm) {
            return this.panels.indexOf(vm);
        },
        removePanel(vm) {
            this.panels = this.panels.filter(panel => panel !== vm);
        },
        changeValue(value) {
            if (!this.$hasProp('value')) {
                this.currentValue = value;
            }
            this.$emit('change', value);
        },
    },
};
</script>

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

.@{tabs} {
    position: relative;

    &__tab-list {
        position: relative;
    }

    &__content {
        position: relative;
    }

    &--left {
        display: flex;

        .@{tabs}__tab {
            display: block;
            cursor: pointer;
        }

        .@{tabs}__content {
            padding-left: 24px;
        }
    }

}

</style>
