<template>
    <div>
        <home-slider v-model="homeSlider" :sliders="channel.slider" v-if="loadComponent"></home-slider>
        <search-slider v-model="searchSlider" v-if="loadComponent"></search-slider>
        <layout-body>
            <header-box slot="header" class="home-header">
                <span slot="left">
                    <i class="icon icon-back go-back-btn" @click="goBack"></i>
                </span>
                <span slot="title" class="logo">

                </span>
                <span slot="right">
                    <i class="icon icon-search-new" @click="searchSliderSwitch"></i>
                    <i class="icon icon-nav-new" @click="homeSliderSwitch"></i>
                </span>
            </header-box>
            <scroller ref="scroller" @loading="loading">
                <div class="resources">
                    <component
                        :is="component.template_name"
                        v-for="(component, index) in (channel.home || []).filter(c => ['twoPicture', 'tfGoodsList', 'newSingleImage', 'BlkNewProductFloorResource'].some(k => k === c.template_name) )"
                        :lazy="index > 5"
                        v-if="loadComponent || index < 6"
                        :value="component.data"
                        :key="index"></component>
                </div>
            </scroller>
        </layout-body>
    </div>
</template>

<script>
import {
    FETCH_HOME_REQUEST,
    FETCH_CHANNEL_REQUEST
} from 'store/channel/types';
import ResourceTwoImage from 'components/resources/resource-two-image';
import ResourceSingleImage from 'components/resources/resource-single-image';
import ResourceNewProductList from 'components/resources/resource-new-product-list';
import ResourceTfGoodsList from 'components/resources/resource-tfgoods-list';
import {SearchSlider} from 'components/search';
import {mapState} from 'vuex';
import {HomeSlider} from './components';

export default {
    name: 'Channel',
    data() {
        return {
            homeSlider: false,
            searchSlider: false,
            loadComponent: false
        };
    },
    asyncData({store}) {
        return store.dispatch(FETCH_HOME_REQUEST);
    },
    computed: {
        ...mapState(['channel'])
    },
    methods: {
        homeSliderSwitch() {
            this.homeSlider = !this.homeSlider;
        },
        searchSliderSwitch() {
            this.searchSlider = !this.searchSlider;
        },
        async loading() {
            await this.$store.dispatch(FETCH_HOME_REQUEST, true);
            this.$refs.scroller.stop();
        },
        goBack() {
            this.$yoho.goNewBack();
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.$yoho && vm.$yoho.blkBackStatus(false);
        });
    },
    beforeRouteLeave(to, from, next) {
        this.$yoho && this.$yoho.blkBackStatus(false);
        next();
    },
    components: {
        twoPicture: ResourceTwoImage,
        tfGoodsList: ResourceTfGoodsList,
        newSingleImage: ResourceSingleImage,
        BlkNewProductFloorResource: ResourceNewProductList,
        SearchSlider,
        HomeSlider
    },
    async mounted() {
        setTimeout(() => {
            this.loadComponent = true;
            this.$store.dispatch(FETCH_CHANNEL_REQUEST, {gender: 'men'});
            this.$store.dispatch(FETCH_CHANNEL_REQUEST, {gender: 'women'});
        }, 500);
    }
};
</script>

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

}
.home-header {
    .icon-nav-new {
        font-size: 34px !important;
    }
    .icon-search-new {
        font-size: 42px !important;
    }
    .logo {
        background-image: url('~statics/img/logo.png');
        display: block;
        width: 100%;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 152px 27px;
    }
}
</style>