<template>
    <div class="channel-tab">
        <a v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click.prevent="changeChannel(index)" href="/{{item.channel}}">
            <span class="name">{{item.name | uppercase}}</span>
        </a>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                current: 0,
                channel: [{
                    name: 'MEN男士',
                    channel: 'men'
                }, {
                    name: 'WOMEN女士',
                    channel: 'women'
                }, {
                    name: 'LIFESTYLE生活',
                    channel: 'lifestyle'
                }]
            };
        },
        methods: {
            changeChannel(index) {
                this.current = index;
                this.$parent.$emit('changeChannel', this.channel[index].channel);
            }
        }
    };
</script>

<style>
    .channel-tab {
        width: 100%;
        height: 90px;
        font-size: 24px;
        text-align: center;
        background: #fff;

        a {
            display: inline-block;
            line-height: 90px;
            width: 33%;
            color: #999;

            &.focus {
                color: #000;
            }
        }

        .name {
            padding: 9px 0;

            &.focus {
                border-bottom: 4px solid #000;
            }
        }

        .focus {
            .name {
                border-bottom: 4px solid #000;
            }
        }
    }
</style>