<template>
    <div v-if="channel.length" class="channel-tab" :class="{'fix-ios-top': fixIosTop}">
        <div class="channel ellipsis" v-for="(item, index) in channel" :key="index" :class="{focus: index === currentChannel}"
        @click="changeChannel(index, item.id)" :style="{width: (1 / channel.length) * 100 + '%'}">
            <span class="name">{{item.name && item.name.toUpperCase()}}</span>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import cookie from 'yoho-cookie';
    import qs from 'yoho-qs';
    import bus from 'common/vue-bus';
    import yoho from 'yoho';

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

    const setAppChannel = {
        301: 1,
        302: 2,
    };


    export default {
        props: {
            current: {
                type: Number,
                default: 0
            },
            page: {
                type: String,
                default: 'channel'
            },
            fixIosTop: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                channel: [],
                currentChannel: +cookie.get('_ChannelIndex') || 0,
            };
        },
        created() {
            $.ajax({
                url: '/channel/channel.json'
            }).then(res => {
                if (res.data && res.data.length) {
                    const channel = [];

                    res.data.forEach((c, index) => {
                        channel.push({
                            id: c.channel_id,
                            name: c.channel_name,
                            channel: channelMap[c.channel_id] || ''
                        });

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

                    this.channel = channel;
                }
            });
        },
        methods: {
            changeChannel(index, id) {
                const objY = {};

                objY[this.page + '_' + this.channel[this.current].channel] = window.scrollY;

                this.currentChannel = index;
                bus.$emit('channel.change', this.page, this.channel[index].channel, objY);
                cookie.set('_Channel', this.channel[index].channel);
                cookie.set('_ChannelIndex', index);

                if(yoho.isApp) {
                    yoho.setChannel({
                        channel_id: setAppChannel[id]
                    });
                }
            }
        },
        watch: {
            current(val) {
                this.currentChannel = val;
            }
        }
    };
</script>

<style>
    .channel-tab {
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 1;
        width: 100%;
        max-width: 750px;
        height: 80px;
        font-size: 26px;
        text-align: center;
        background: #fff;
        transform: translate(-50%, 0);
        border-bottom: 1px solid #f6f6f6;
        font-family: "BrownStd", "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;

        &.fix-ios-top {
            margin-top: 20px;
        }

        .channel {
            display: inline-block;
            line-height: 80px;
            color: #b0b0b0;
            font-family: "BrownStd-Bold", "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;

            &.focus {
                color: #000;

                span {
                    border-bottom: 4px solid #000;
                }
            }
        }

        .name {
            padding: 12px 0;

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