<template>
    <div class="tabs">
        <div
            v-for="(item, index) in tabs"
            :key="index"
            class="tabs-item"
            :class="{start: index === 0, end: index === tabs.length - 1, actived: item === curTabs}"
            @click="changeTabs(item)">{{item}}</div>
    </div>
</template>

<script>
export default {
    name: 'Knowledge',
    props: {
        tabs: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            curTabs: ''
        };
    },
    created() {
        if (this.tabs.length > 0) {
            this.curTabs = this.tabs[0];
        }
    },
    methods: {
        changeTabs(item) {
            this.curTabs = item;
            this.$emit('change-tabs', item)
        }
    }
}
</script>

<style lang="scss" scoped>
.tabs {
    display: flex;
    margin: 20px auto 0;
    width: 80%;

    .tabs-item {
        border-top: 1px solid #3a3a3a;
        border-bottom: 1px solid #3a3a3a;
        height: 26px;
        line-height: 26px;
        text-align: center;
        flex: 1;
        border-right: 1px solid #3a3a3a;

        &:last-child {
            border-right: none;
        }

        &.actived {
            background: #3a3a3a;
            color: #fff;
        }

        &.start {
            border-left: 1px solid #3a3a3a;
            border-radius: 5px 0 0 5px;
        }

        &.end {
            border-right: 1px solid #3a3a3a;
            border-radius: 0 5px 5px 0;
        }
    }
}
</style>