<template>
    <view class="topic--wrapper">
        <view
            v-for="(topic, index) in topics"
            :key="index"
            :class="{
                'topic': true,
                'c-gap-top-ll': index !== 0,
                'SHOW_LOG_MODULE': index >= rn * (pn - 2)
            }"
            :data-show="page + '-topic-' + index"
        >
            <b-navigate
                :url="topic.url"
                :extra="{
                    mod: page + '-topic-header-' + index
                }"
            >
                <view
                    :style="{
                        backgroundImage: 'url(' + topic.background + ')'
                    }"
                    class="topic-header"
                >
                    <view class="topic-header-title c-line-clamp2">
                        <view class="topic-header-icon c-gap-right-small m-icon m-icon-spetopicicon"></view>                    
                        <text>{{ topic.title }}</text>
                    </view>
                    <view class="topic-header-masking"></view>
                </view>
            </b-navigate>
            <view
                v-if="topic.articles && topic.articles.length > 0"
                class="hot-article-articles"
            >
                <recommend-item
                    v-for="(article, articleIndex) in topic.articles"
                    :key="articleIndex"
                    :title="article.title"
                    :doctor="{
                        name: article.doctor,
                        rank: article.information,
                        label: article.hospi_level,
                        hospital: article.hospital
                    }"
                    :image="article.imageUrl"
                    :url="article.url"
                    :module="page + '-topic-recommend-' + articleIndex"
                />
            </view>
            <b-navigate
                v-if="topic.more" 
                :url="topic.url"
                :extra="{
                    mod: page + '-topic-footer-' + index
                }"
            >
                <view class="topic-footer">
                    <view class="c-line-top topic-footer-line"></view>
                    <view class="topic-footer-text">
                        <view>{{ topic.more }}</view>
                        <view>
                            <c-icon name="right" font-size="14px"/>
                        </view>
                    </view>
                </view>
            </b-navigate>
        </view>
        <list-loading
            v-show="loading && nextApi"
            status="loading"
            class="c-gap-top-ll"
        />
    </view>
</template>

<script>
/**
 * @file 专题banner
 * @author yantingxi
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import RecommendItem from '../Recommend/RecommendItem';
import BNavigate from '../../../components/common/navigate';

import ListLoading from '../../../components/common/list-loading';
import {request} from '../../../utils/request';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        topics: {
            type: Array,
            default: () => []
        },
        feedApi: {
            type: String,
            default: ''
        },
        page: {
            type: String,
            default: 'feed'
        },
        resultConcat: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            requesting: false,
            loading: true,
            pn: 2,
            rn: 2,
            nextApi: true
        };
    },
    created() {
        this.nextApi = this.feedApi;
    },
    methods: {
        loadFeeds() {
            if (this.nextApi && !this.requesting) {
                this.requesting = true;
                request({
                    url: this.nextApi,
                    data: {
                        pn: this.pn
                    },
                    isNeedLogin: false,
                    isFirstScreen: false
                })
                .then(({data, update}) => {
                    if (data.list && data.list[0] && data.list[0].data) {
                        this.nextApi = data.list[0].nextApi;
                        this.loading = !!data.list[0].nextApi;
                        let res = data.list[0].data;
                        if (this.resultConcat) {
                            res = this.topics.concat(res);
                        }
                        this.$emit('onLoaded', res, 'topics');
                        this.pn++;
                    }
                    this.$mpUpdated().then(() => {
                        this.requesting = false;
                    });
                })
                .catch(error => console.error(error));
            }
        }
    },
    components: {
        CIcon,
        BNavigate,
        ListLoading,
        RecommendItem
    }
};
</script>

<style lang="less" scoped>
.topic {
    border-radius: 8px;
    overflow: hidden;
    background: #f6f6f6;
    box-shadow: 0 3.3px 16.7px 0 rgba(0,0,0,0.08);

    &-wrapper {
        border-radius: 8px;
        overflow: hidden;
    }

    &-header {
        position: relative;
        padding: 0 .15rem;
        height: 1.44rem;
        font-size: .19rem;
        color: #fff;
        font-weight: bold;
        border-radius: 8px 8px 0 0;
        overflow: hidden;
        background-size: cover;

        &-title {
            position: absolute;
            line-height: .24rem;
            bottom: .13rem;
            padding-right: .15rem;
            z-index: 1;
            margin-bottom: 0;
        }

        &-icon {
            display: inline-block;
        }

        &-masking {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0, 0.35) 100%);
        }
    }

    &-footer {
        background: #fff;

        &-line {
            margin: 0 17px;
            transform: scaleY(.5);
        }
        &-text {
            color: #999;
            padding: 10px 17px;
            font-size: .14rem;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>