<template>
    <view class="topic-text--wrapper">
        <b-navigate
            v-for="(topic, topicIndex) in list"
            :key="topicIndex"
            :url="topic.unifiUrl"
            :extra="{
                mod: page + '-topic-text-' + topicIndex
            }"
        >
            <view class="topic-text">
                <view class="topic-text-inner">
                    <view class="topic-text-title">{{topic.title}}</view>
                    <view class="topic-text-content">
                        <view class="topic-text-content-text">{{topic.desc}}</view>
                        <view class="topic-text-content-button">{{topic.buttonText || '立即查看'}}</view>
                    </view>
                </view>
            </view>
        </b-navigate>
        <list-loading
            v-show="loading"
            status="loading"
            class="c-gap-top-ll"
        />
    </view>
</template>

<script>
/**
 * @file 精选
 * @author yantingxi
*/
import BNavigate from '../../../components/common/navigate';
import ListLoading from '../../../components/common/list-loading';
import {request} from '../../../utils/request';
export default {
    config: {
        component: true
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        page: {
            type: String,
            default: 'feed'
        }
    },
    data() {
        return {
            pn: 0,
            loading: true,
            list: []
        };
    },
    created() {
        this.nextApi = this.data.nextApi;
    },
    methods: {
        loadFeeds() {
            if (this.nextApi && !this.requesting) {
                this.requesting = true;
                request({
                    url: this.nextApi,
                    data: {},
                    isNeedLogin: false,
                    isFirstScreen: false
                })
                .then(({data, update}) => {
                    if (data.list) {
                        this.list = this.list.concat(data.list);
                        this.nextApi = data.feed.nextApi;
                        this.loading = !!data.feed.nextApi;
                        this.pn++;
                    }
                    this.$mpUpdated().then(() => {
                        this.$emit('onLoaded');
                        this.requesting = false;
                    });
                })
                .catch(error => console.error(error));
            }
        }
    },
    components: {
        BNavigate,
        ListLoading
    }
};
</script>

<style lang="less" scoped>
.topic-text {
    display: flex;
    margin-bottom: .15rem;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0 3px 16px 0 rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 12px 0;

    &-title {
        font-size: .17rem;
        color: #333;
    }
    &-inner {
        width: 100%;
        padding: 0 15px;
    }
    &-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 7px;
        width: 100%;

        &-text {
            flex: 1 1 auto;
            font-size: .14rem;
            color: #555;
        }

        &-button {
            padding: 7px 12px;
            font-size: 14px;
            color: #FFF;
            background: #00C8C8;
            border-radius: 14px;
            line-height: 1;
            flex: 0 0 auto;
        }
    }
}
</style>