<template>
    <tab v-bind:page="'cate'"></tab>
    <brand-cate v-bind:category="category" v-bind:jump="true" v-bind: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 channelTrans = {
        men: {
            key: 'MEN男士',
            code: '1,3'
        },
        women: {
            key: 'WOMEN女士',
            code: '2,3'
        },
        lifestyle: {
            key: 'LIFESTYLE生活',
            code: '1,2,3'
        }
    };

    module.exports = {
        data() {
            return {
                category: [],
                categoryResult: {},
                gender: '1,3'
            };
        },
        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['MEN男士']);
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            }
        },
        created() {
            this.getCateList();

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