<template>
    <div class="dv-index-switch-item" @click.stop="handleClick" :class="{active: active}">
        <span class="dv-index-switch-item-color" v-if="color" :style="{backgroundColor: color}"></span>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'DvIndexSwitchItem',
        inject: ['indexSwitch'],
        props: {
            value: {
                type: [String, Number]
            },
            color: {
              type: String
            }
        },
        computed: {
            active () {
                return this.indexSwitch.currentValue === this.value;
            }
        },
        methods: {
            handleClick () {
                this.indexSwitch.select(this.value);
            }
        },
        mounted() {
            this.indexSwitch.addItem({
                value: this.value
            });
        }
    };
</script>
