<template>
    <div class="resources">
        <template v-for="floor in resources">
            <div class="focus" v-if="floor.focus" v-bind:style="{height: '182px'}">
                <focus v-bind:floor="floor.data"></focus>
            </div>
            <div class="title-image" v-if="floor.titleImage">
                <title-image v-bind:floor="floor.data"></title-image>
            </div>
            <div class="goods" v-if="floor.goods">
                <goods v-bind:floor="floor.data"></goods>
            </div>
        </template>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const tip = require('common/tip');
    const focus = require('component/resources/focus.vue');
    const titleImage = require('component/resources/title-image.vue');
    const goods = require('component/resources/goods.vue');

    module.exports = {
        data() {
            return {
                resources: []
            };
        },
        components: {
            focus: focus,
            titleImage: titleImage,
            goods: goods
        },
        init() {
            $.ajax({
                url: '/resources'
            }).then(result => {
                this.resources = result;
            }).fail(() => {
                tip('网络错误');
            });
        }
    };
</script>

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