<template>
    <div class="channel-home">
        <search-slider v-model="searchSlider"></search-slider>
        <layout-body class="page-detail">
            <header-box slot="header" class="channel-header">
                <span slot="title">
                    {{title[gender]}}
                </span>
                <span slot="right">
                    <i class="icon icon-search-new" @click="searchSliderSwitch"></i>
                </span>
            </header-box>
            <scroller ref="scroller" @loading="loading" class="channel-scroll">
                <component
                    :is="component.template_name"
                        v-for="(component, index) in floors.filter(c => ['twoPicture', 'goods', 'tfGoodsList', 'focus', 'blkCategory', 'newSingleImage', 'BlkNewProductFloorResource'].some(k => k === c.template_name) )"
                    :value="component.data"
                    :key="index"></component>
            </scroller>
        </layout-body>
    </div>
</template>

<script>
    import {
        FETCH_CHANNEL_REQUEST,
    } from 'store/channel/types';
    import {mapState} from 'vuex';
    import {
        ResourceGoods,
        ResourceTwoImage,
        ResourceCategory,
        ResourceFocusImage,
        ResourceSingleImage,
        ResourceProductList,
        ResourceBlkNewProductList,
        ResourceTfGoodsList
    } from 'components/resources';
    import {SearchSlider} from 'components/search';

    export default {
        name: 'ChannelHome',
        data() {
            return {
                searchSlider: false,
                title: {
                    men: '男士',
                    women: '女士'
                }
            }
        },
        methods: {
            searchSliderSwitch() {
                this.searchSlider = !this.searchSlider;
            },
            async loading() {
                await this.$store.dispatch(FETCH_CHANNEL_REQUEST, {refresh: true});
                this.$refs.scroller.stop();
            }
        },
        computed: {
            ...mapState(['channel']),
            gender() {
                return this.$store.state.channel.gender;
            },
            floors() {
                return this.$store.state.channel[this.gender].floors;
            }
        },
        beforeRouteEnter (to, from, next) {
            next(vm => {
                vm.$yoho && vm.$yoho.blkBackStatus(true);
            });
        },
        asyncData({store, router: to}) {
            const gender = /\/channel\/men/.test(to.path) ? 'men' : 'women';
            return store.dispatch(FETCH_CHANNEL_REQUEST, {gender});
        },
        components: {
            goods: ResourceGoods,
            focus: ResourceFocusImage,
            twoPicture: ResourceTwoImage,
            newSingleImage: ResourceSingleImage,
            blkCategory: ResourceCategory,
            BlkNewProductFloorResource: ResourceBlkNewProductList,
            tfGoodsList: ResourceTfGoodsList,
            ResourceProductList,
            SearchSlider
        }
    };
</script>

<style lang="scss">
    .channel-scroll {
        padding-bottom: 20px;
    }

    .channel-header {
        .icon-search-new {
            font-size: 42px !important;
        }
    }

</style>