<template>
    <ui-page-layout title="VIP期刊文章">
        <div class="p-24rem">

            <ui-vip-article class="mb-24rem" :item="p"></ui-vip-article>
            <ui-main-article v-for="item in latestArts" :item="item"></ui-main-article>
        </div>
    </ui-page-layout>
</template>

<script>
    export default {
        data() {
            return {
                banner1: [
                    { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
                    { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
                    { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
                    { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
                    { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
                ],
                latestArts: [],
                pageIndex: 1,
                p:''
            };
        },
        watch:{
            '$route.query.category':{
                immediate:true,
                handler(){
                    this.pageIndex = 1;
                    this.loadLatestArts(this.pageIndex);
                }
            }
        },
        methods: {
            async loadLatestArts(pageIndex) {
                let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify(Object.assign({refMagazine:this.$route.query.refMagazine},{pageIndex: pageIndex})));
                if (resp.data.status === 200) {
                    if(pageIndex === 1){
                        this.latestArts = resp.data.data.cmsArticles;
                    }else{
                        this.latestArts.push(...resp.data.data.cmsArticles);
                    }
                }
            }
        },
        async created() {
            this.loadLatestArts(this.pageIndex);
            this.p = JSON.parse(decodeURIComponent(this.$route.query.data));
        }
    };
</script>
<style>

</style>
  