<template>
    <tab :page="'cate'"></tab>
    <brand-cate :category="category" :jump="true" :gender="gender"></brand-cate>
</template>
<script>
    const tip = require('common/tip');
    const brandCate = require('channel/brand-cate.vue');
    const tab = require('channel/tab.vue');
    const $ = require('jquery');
    const bus = require('common/vue-bus');
    const qs = require('yoho-qs');
    const cookie = require('yoho-cookie');

    const channelTrans = {
        men: {
            key: 'MEN男士',
            code: '1,3'
        },
        women: {
            key: 'WOMEN女士',
            code: '2,3'
        },
        lifestyle: {
            key: 'LIFESTYLE生活',
            code: '1,2,3'
        }
    };

    module.exports = {
        data() {
            const detaultChannel = qs.channel || cookie.get('_Channel') || 'men';
            
            return {
                category: [],
                categoryResult: {},
                detaultChannel: detaultChannel,
                gender: channelTrans[detaultChannel].code,
            };
        },
        components: {
            tab,
            brandCate
        },
        methods: {
            getCateList() {

                $.ajax({
                    url: '/cate/list.json'
                }).then(result => {
                    if (result.code === 200 && result.data) {
                        this.$set('categoryResult', result.data);
                        this.$set('category', this.categoryResult[channelTrans[this.detaultChannel].key]);
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            }
        },
        created() {
            this.getCateList();

            bus.$on('channel.change', (page, channel) => {
                this.$set('detaultChannel', channel || qs.channel || cookie.get('_Channel') || 'men');
                this.$set('gender', channelTrans[this.detaultChannel].code);
                this.$set('category', this.categoryResult[channelTrans[this.detaultChannel].key]);
            });
        }
    };
</script>