<template>
    <div class="resources">
        <template v-for="floor in resources">
            <focus v-if="floor.focus && floor.focus_type === '1'" :floor="floor.data" :style="{height: '9.1rem'}">
                <!-- 轮播图，通栏 -->
            </focus>
            <focus-left-right v-if="floor.focus && floor.focus_type === '2'" :floor="floor.data">
                <!-- 轮播图，左右滑动 -->
            </focus-left-right>
            <title-image v-if="floor.titleImage" :floor="floor.data">
                <!-- 标题图片 -->
            </title-image>
            <title-floor v-if="floor.titleFloor" :title="floor.data.title">
                <!-- 楼层标题 -->
            </title-floor>
            <recommend-content-five v-if="floor.recommendContentFive" :floor="floor.data.list">
                <!-- 带标题的12个小图推荐 -->
            </recommend-content-five>
            <goods v-if="floor.goods" :floor="floor.data">
                <!-- 商品 -->
            </goods>
        </template>
    </div>
</template>

<script>
    const $ = require('jquery');
    const tip = require('common/tip');
    const bus = require('common/vue-bus');
    const contentCode = require('content-code');

    const focus = require('./focus.vue');
    const focusLeftRight = require('./focus-left-right.vue');
    const titleImage = require('./title-image.vue');
    const titleFloor = require('./title-floor.vue');
    const recommendContentFive = require('./recommend-content-five.vue');
    const goods = require('./goods.vue');

    const dataCache = {};

    module.exports = {
        props: {
            contentCode: {
                type: String,
                default: contentCode.channel.men
            }
        },
        data() {
            return {
                scroll_y: 0,
                objY: {},
                resources: []
            };
        },
        components: {
            focus,
            focusLeftRight,
            titleImage,
            titleFloor,
            recommendContentFive,
            goods
        },
        watch: {
            contentCode() {
                this.getResourcesData();
                bus.$emit('contentCode.change', this.contentCode);
                setTimeout(()=> {
                    window.scrollTo(0, this.scroll_y);
                }, 1);
            }
        },
        methods: {
            getResourcesData() {
                let data = {};

                if (this.contentCode) {
                    data.contentCode = this.contentCode;
                }

                let param = $.param(data);

                if (dataCache[param]) {
                    this.resources = dataCache[param];
                    return;
                }

                return $.ajax({
                    url: '/channel/resources.json',
                    data: data
                }).then(result => {
                    this.resources = result;

                    if (result.length) {
                        dataCache[param] = result;
                    }
    
                    setTimeout(()=> {
                        $('#ssr').remove();
                    }, 2000);
                }).fail(() => {
                        tip('网络错误');
                });
            }
        },
        created() {
            this.getResourcesData();
            bus.$on('channel.change', (page, channel, objY) => {
                if (objY) {
                    this.objY = Object.assign(this.objY, objY);
                }
                this.scroll_y = this.objY[page + '_' + channel] || 0;
                this.contentCode = contentCode[page][channel];
            });
        }
    };
</script>

<style>
    .resources {
        background: #f6f6f6;
    }
</style>