<template>
    <div class="resources">
        <div v-for="(floor, index) in resources" :key="index">
            <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>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import tip from 'common/tip';
    import bus from 'common/vue-bus';
    import contentCode from 'content-code';

    import focus from './focus.vue';
    import focusLeftRight from './focus-left-right.vue';
    import titleImage from './title-image.vue';
    import titleFloor from './title-floor.vue';
    import recommendContentFive from './recommend-content-five.vue';
    import goods from './goods.vue';

    const dataCache = {};

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

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

                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();
                    }, 1000);
                }).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.currentContentCode = contentCode[page][channel];
                this.load();
            });
        }
    };
</script>

<style>

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