<template>
    <div class="w-1200px">
        <div class="h-20px"></div>

        <div class="flex">
            <div>
                <ui-banner :showPagination="true"
                           flag="首页"
                           bannerClass="w-600px h-337px">

                </ui-banner>
            </div>
            <div class="w-10px"></div>
            <div class="swiper-group">
                <ui-banner
                           flag="首页1"
                           titleClass="swiper-title"
                           >

                </ui-banner>
                <ui-banner
                        flag="首页2"
                        titleClass="swiper-title"
                        >

                </ui-banner>
                <ui-banner
                        flag="首页3"
                        titleClass="swiper-title"
                        >

                </ui-banner>
                <ui-banner
                        flag="首页4"
                        titleClass="swiper-title"
                        >

                </ui-banner>

            </div>
        </div>
        <div class="h-20px"></div>
        <div class="flex justify-between">
            <div class="left w-860px">
                <home-tags></home-tags>
                <div class="h-20px"></div>
                <home-new></home-new>
                <div class="h-20px"></div>
                <div v-for="(cmsArticle,index) in latestArts" :key="item">
                    <ui-main-article :item="cmsArticle"></ui-main-article>
                    <div class="h-20px"></div>
                    <template  v-if="((index + 1) % 4 === 0 && index > 0) || (index < 4 && (index + 1) === (latestArts.length - 1) )">
                        <ui-banner

                                flag="文章列表"
                                bannerClass="h-100px"
                        >
                        </ui-banner>
                        <div class="h-20px"></div>
                    </template>

                </div>
            </div>
            <div class="right w-320px">
                <ui-hot-article></ui-hot-article>
                <div class="h-20px"></div>
                <ui-banner
                        flag="首页右侧1"
                        bannerClass="swiper-title h-181px"
                >

                </ui-banner>
                <div class="h-20px"></div>
                <ui-banner
                        flag="首页右侧2"
                        bannerClass="swiper-title h-181px"
                >

                </ui-banner>
                <div class="h-20px"></div>
                <ui-vip-magazine></ui-vip-magazine>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        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
            };
        },
        methods: {
            async loadLatestArts(pageIndex) {
                let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify({pageIndex: pageIndex}));
                if (resp.data.status === 200) {
                    this.latestArts.push(...resp.data.data.cmsArticles);
                }
            }
        },
        async created() {
            this.loadLatestArts(this.pageIndex);
        }
    };
</script>
<style>
    .swiper-group {
        display: grid;
        grid-template-columns: repeat(2, 290px);
        grid-template-rows: repeat(2, 163px);
        grid-gap: 10px;
    }

    .swiper {
        @apply w-290px;

        /* align-items: end; */
        /* @apply w-290px h-163px; */
    }

    .swiper-title {
        @apply bottom-17px left-17px text-size-16px;
    }
</style>
