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

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

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

    const dataCache = {};

    module.exports = {
        props: ['channel', 'contentCode'],
        data() {
            return {
                resources: []
            };
        },
        components: {
            focus,
            focusLeftRight,
            titleImage,
            titleFloor,
            recommendContentFive,
            goods
        },
        watch: {
            channel() {
                this.getResourcesData();
            },
            contentCode() {
                this.getResourcesData();
            }
        },
        methods: {
            getResourcesData() {
                let data = {};

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

                let param = $.param(data);

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

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

                    if (result.length) {
                        dataCache[param] = result;
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            }
        },
        created() {
            this.getResourcesData();
            bus.$on('changeChannel', channel => {
                this.channel = channel;
            });
        }
    };
</script>

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