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

<script>
    const $ = require('jquery');
    const cookie = require('yoho-cookie');
    const bus = require('common/vue-bus');

    const channelMap = {
        301: 'men',
        302: 'women',
        303: 'lifestyle'
    };

    module.exports = {
        props: {
            current: {
                type: Number,
                default: 0
            },
            page: {
                type: String,
                default: 'channel'
            },
        },
        data() {
            return {
                channel: []
            };
        },
        created() {
            $.ajax({
                url: '/channel/channel.json'
            }).then(res => {
                if (res.data && res.data.length) {
                    const channel = [];

                    res.data.forEach(c => {
                        channel.push({
                            name: c.channelName,
                            channel: channelMap[c.channelId] || ''
                        });
                    });

                    this.channel = channel;
                }
            });
        },
        methods: {
            changeChannel(index) {
                this.current = index;
                bus.$emit('channel.change', this.page, this.channel[index].channel);
                cookie.set('_Channel', this.channel[index].channel);
            }
        }
    };
</script>

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

        .channel {
            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>