<template>
    <div v-if="channel.length" class="channel-tab">
        <div class="channel ellipsis" v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click="changeChannel(index)" v-bind:style="{width: (1 / channel.length) * 100 + '%'}">
            <span class="name">{{item.name | uppercase}}</span>
        </div>
    </div>
</template>

<script>
    const $ = require('jquery');
    const cookie = require('yoho-cookie');
    const qs = require('yoho-qs');
    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, index) => {
                        channel.push({
                            name: c.channelName,
                            channel: channelMap[c.channelId] || ''
                        });

                        if (qs.channel === channelMap[c.channelId]) {
                            this.current = index;
                            bus.$emit('channel.change', this.page, qs.channel);
                        }
                    });

                    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 {
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 1;
        width: 100%;
        max-width: 750px;
        height: 90px;
        font-size: 26px;
        text-align: center;
        background: #fff;
        transform: translate(-50%, 0);

        .channel {
            display: inline-block;
            line-height: 90px;
            color: #b0b0b0;

            &.focus {
                color: #000;
            }
        }

        .name {
            padding: 12px 0;

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

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