<template>
    <view class="detail-subviews">
        <view
            v-for="(component, index) in components"
            :key="index"
            :data-show="'subviews-' + component.type"
            class="SHOW_LOG_MODULE"
        >
            <view v-if="component.type !== 'statement'" class="c-line-thick-bottom"/>
            <advert
                v-if="component.type === 'ad' && component.data"
                :data="component.data"
            />
            <recommends
                v-if="component.type === 'recommends' && component.data"
                ref="medRecommends"
                :title="component.data.title"
                :load-more="component.data.serverUrl"
                :recommends="component.data.items"
                :page="page"
                :from="from"
                font-size="0.17rem"
                show-brief
                show-portrait
                @onLoaded="onFeedsModuleLoaded"
            />
            <statement
                v-if="component.type === 'statement' && component.data"
                :icon="component.data.logo"
                :source="component.data.source"
                :msg="component.data.msg"
            />
            <related-entries
                v-if="component.type === 'related' && component.data"
                :list="component.data.list"
                :title="component.data.title"
            />
        </view>
        <view v-if="requesting" class="c-line-thick-bottom"/>
        <view v-if="requesting" class="detail-subviews__loading"/>

        <!-- 右侧悬浮运营位 -->
        <float-operation
            v-if="brandEntryData && brandEntryData.img"
            ref="floatOperation"
            :data="brandEntryData"
        />

        <!-- 服务按钮 -->
        <service-button
            v-if="arrText && arrText.length"
            :arr-text="arrText"
            content-type="video"
        />
    </view>
</template>
<script>

/**
 *  @file 内容落地页B区模块聚合
 *  @author yantingxi
 */

import Statement from './Statement';
import ServiceButton from './ServiceButton';
import RelatedEntries from './RelatedEntries';
import Recommends from './../Recommend/index';
import Advert from './../../common/advert';
import FloatOperation from './../../common/floatOperation';

import {request} from './../../../utils/request';
import {sendWebb} from './../../../utils/monitor';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        url: {
            type: String,
            default: ''
        },
        common: {
            type: Object,
            default: () => {}
        },
        arrText: {
            type: Array,
            default: () => []
        },
        brandEntryData: {
            type: Object,
            default: () => {}
        },
        page: {
            type: String,
            default: 'detail'
        },
        from: {
            type: String,
            default: ''
        },
        contentType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            components: [],
            requesting: false,
            renderStart: Date.now(),
            renderEnd: 0
        };
    },
    components: {
        Advert,
        Statement,
        Recommends,
        ServiceButton,
        RelatedEntries,
        FloatOperation
    },
    created() {
        this.common && this.common.burl && this.getSubviewsData(this.common.burl);
    },
    methods: {
        getSubviewsData(url) {
            this.requesting = true;
            request({
                url,
                method: 'GET',
                isFirstScreen: false,
                isNeedLogin: false
            })
                .then(({data}) => {
                    this.components = data && data.template;

                    this.$mpUpdated().then(() => {
                        this.requesting = false;
                        this.renderEnd = Date.now();
                        this.$emit('mounted', data);
                        this.sendPerformance();
                    });
                })
                .catch(error => {
                    this.requesting = false;
                });
        },
        onReachBottom() {
            // 相关推荐feed
            this.$refs.medRecommends && this.$refs.medRecommends[0] && this.$refs.medRecommends[0].loadFeeds();
        },
        onFeedsModuleLoaded(data) {
            this.components = this.components.map(component => {
                if (component.type === 'recommends') {
                    component.data.items = data;
                }
                return component;
            });
        },
        onPageScroll(scrollTop) {
            this.$refs.floatOperation
                && this.$refs.floatOperation.onPageScroll
                && this.$refs.floatOperation.onPageScroll(scrollTop);
        },
        sendPerformance() {
            const params = {
                type: 'pf_comm',
                group: 'healthLandpage',
                info: {
                    swanSubviewsRenderTime: this.renderEnd - this.renderStart
                },
                dim: {
                    env: 'selfpage-swan',
                    enterType: 'syncEnter',
                    contentType: `${this.page}-${process.env.MARS_ENV}`
                }
            };
            sendWebb(params);
        }
    }
};
</script>
<style lang="less" scoped>
.detail-subviews {
    &__loading {
        margin-top: 8px;
        position: relative;
        height: 188px;
        width: 100%;
        background: #fff;
        overflow: hidden;
        text-align: center;
        z-index: 302;
        padding-bottom: 58px;

        &::before {
            content: ' ';
            display: inline-block;
            background: url('https://medical-kg.cdn.bcebos.com/5a0f2e0176fd5f9dfd0addce4.png') no-repeat;
            background-size: 147px 48px;
            height: 48px;
            width: 147px;
            margin-top: 60px;
        }
    }
}
</style>

