<template>
    <div class="ui-label-article-list px-24rem   pt-12rem">
        <template v-for="(article,index) in articles" :key="item">
            <UiMainArticle  :item="article"></UiMainArticle>


            <template  v-if="((index + 1) % 4 === 0 && index > 0) || (index < 4 && (index + 1) === (articles.length - 1) )">
                <div  class="h-22rem border-t-1rem  border-[#B8B8B8]"></div>

                <ui-banner

                        flag="文章列表"
                        bannerClass="h-78rem"
                >
                </ui-banner>
                <div class="h-22rem"></div>
            </template>

        </template>
        <van-empty v-if="!articles.length" :description="$t('暂无数据')" />
    </div>
</template>

<script>
    export default {
        props:{
            params:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        data(){
            return {
                articles:[]
            }
        },
        methods:{
            async listArticles(pageIndex) {
                let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify(Object.assign({pageIndex: pageIndex},this.params)));
                if (resp.data.status === 200) {
                    if(pageIndex === 1){
                        this.articles = resp.data.data.cmsArticles;
                    }else{
                        this.articles.push(...resp.data.data.cmsArticles);
                    }
                }
            }
        },
        created() {
            this.listArticles(1);
        }

    }
</script>

<style scoped>

</style>