<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" v-if="showBack" @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">
                <resource-box>
                    <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"
                            :index="index"
                            :key="index"></component>
                    </div>
                </resource-box>
            </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';
import {REPORT_YAS} from 'store/yoho/types';
import ResourceBox from 'components/resources/resource-box';

export default {
    name: 'Channel',
    data() {
        return {
            homeSlider: false,
            searchSlider: false,
            loadComponent: false,
            showBack: false
        };
    },
    asyncData({store}) {
        return store.dispatch(FETCH_HOME_REQUEST);
    },
    computed: {
        ...mapState(['channel', 'yoho'])
    },
    methods: {
        homeSliderSwitch() {
            this.homeSlider = !this.homeSlider;

            if (this.homeSlider) {
                this.$store.dispatch(REPORT_YAS, {
                    params: {
                        appop: 'YB_H5_SECOND_HOME_BLK_SIDEBAR_C'
                    }
                });
            }
        },
        searchSliderSwitch() {
            this.searchSlider = !this.searchSlider;

            if (this.searchSlider) {
                this.$store.dispatch(REPORT_YAS, {
                    params: {
                        appop: 'YB_H5_SECOND_HOME_BLK_SEARCH_C',
                        param: {
                            POS_ID: 101
                        }
                    }
                });
            }
        },
        async loading() {
            await this.$store.dispatch(FETCH_HOME_REQUEST, true);
            this.$refs.scroller.stop();
        },
        goBack() {
            this.$store.dispatch(REPORT_YAS, {
                params: {
                    appop: 'YB_H5_SECOND_HOME_BLK_BACK_C'
                }
            });
            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,
        ResourceBox
    },
    mounted() {
        if (this.$yoho.isAndroid) {
            let appVersion = this.$cookie.get('app_version');

            if (appVersion && typeof appVersion === 'string') {
                let versions = appVersion.split('.');

                if (versions.length === 3 &&
                    (+versions[0] > 6 ||
                    (+versions[0] === 6 && +versions[1] > 5) ||
                    (+versions[0] === 6 && +versions[1] === 5 && +versions[2] > 1))) {
                    this.showBack = true;
                }
            }
        } else {
            this.showBack = true;
        }
        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 {
        width: auto !important;
        float: left;
    }

    .icon-nav-new {
        font-size: 34px !important;
        margin-left: 30px;
    }

    .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: 124px 28px;
    }
}
</style>