<template>
    <ul class="com-tabs">
        <li
            v-for="(item,key) in list"
            :key="key"
            :class="{active:index == key}"
            @click="onClick(item,key)"
        >
            <span>{{item.text}}</span>
        </li>
    </ul>
</template>
<script>
export default {
    name: "com-tabs",
    props: {
        list: {
            type: Array,
            default: () => []
        },
        active: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            index: 0
        };
    },
    watch: {
        active() {
            this.index = this.active;
        }
    },
    created() {
        this.index = this.active;
    },
    methods: {
        onClick(item, index) {
            //this.index = index;
            this.$emit("change", item, index);
        }
    }
};
</script>
<style lang="less" scoped>
.com-tabs {
    display: flex;
    background-color: #434343;
    border-radius: 17px;
    overflow: hidden;
    li {
        flex: 1;
        cursor: pointer;
        height: 34px;
        line-height: 34px;
        text-align: center;
        &.active {
            background-color: @color;
        }
    }
}
</style>