<template>
    <div v-if="loading === 0">
        <section v-if="advertisements[0].length">
            <div class="content_1">
                <div class="img_1"></div>
                <div class="container">
                    <div class="back">
                        <div class="info">
                            <span>آخرین ویژه‌های دسته {{categories[0].title}}</span>
                            <span>تعداد آگهی فعال: {{totalResult[0]}} عدد</span>
                        </div>

                        <a :href="'/list?cat='+categories[0].id">مشاهده بیشتر</a>
                    </div>
                    <div class="padding-right-5 padding-left-5">
                        <div class="row padding-top-75">
                            <div class="col-lg-3 col-md-4 padding-right-10 padding-left-10" v-for="(ad,index) in advertisements[0]" v-if="index<3">
                                <advertisement :ad="ad"></advertisement>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section v-if="advertisements[1].length">
            <div class="content_2">
                <div class="img_1"></div>
                <div class="container">
                    <div class="back">
                        <div class="info">
                            <span>آخرین ویژه‌های دسته {{categories[1].title}}</span>
                            <span>تعداد آگهی فعال: {{totalResult[1]}} عدد</span>
                        </div>

                        <a :href="'/list?cat='+categories[1].id">مشاهده بیشتر</a>
                    </div>
                    <div class="padding-right-5 padding-left-5">
                        <div class="row padding-top-75 flex-row-reverse">
                            <div class="col-lg-3 col-md-4 padding-right-10 padding-left-10" v-for="(ad,index) in advertisements[1]" v-if="index<3">
                                <advertisement :ad="ad"></advertisement>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section v-if="advertisements[2].length">
            <div class="content_1">
                <div class="img_2"></div>
                <div class="container">
                    <div class="back">
                        <div class="info">
                            <span>آخرین ویژه‌های دسته {{categories[2].title}}</span>
                            <span>تعداد آگهی فعال: {{totalResult[2]}} عدد</span>
                        </div>

                        <a :href="'/list?cat='+categories[2].id">مشاهده بیشتر</a>
                    </div>
                    <div class="padding-right-5 padding-left-5">
                        <div class="row padding-top-75">
                            <div class="col-lg-3 col-md-4 padding-right-10 padding-left-10" v-for="(ad,index) in advertisements[2]" v-if="index<3">
                                <advertisement :ad="ad"></advertisement>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section v-if="advertisements[3].length">
            <div class="content_2">
                <div class="img_2"></div>
                <div class="container">
                    <div class="back">
                        <div class="info">
                            <span>آخرین ویژه‌های دسته {{categories[3].title}}</span>
                            <span>تعداد آگهی فعال: {{totalResult[3]}} عدد</span>
                        </div>

                        <a :href="'/list?cat='+categories[3].id">مشاهده بیشتر</a>
                    </div>
                    <div class="padding-right-5 padding-left-5">
                        <div class="row padding-top-75 flex-row-reverse">
                            <div class="col-lg-3 col-md-4 padding-right-10 padding-left-10" v-for="(ad,index) in advertisements[3]" v-if="index<3">
                                <advertisement :ad="ad"></advertisement>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section v-if="advertisements[4].length">
            <div class="content_1 pb-0 pb-md-5">
                <div class="img_3"></div>
                <div class="container">
                    <div class="back">
                        <div class="info">
                            <span>آخرین ویژه‌های دسته {{categories[4].title}}</span>
                            <span>تعداد آگهی فعال: {{totalResult[4]}} عدد</span>
                        </div>

                        <a :href="'/list?cat='+categories[4].id">مشاهده بیشتر</a>
                    </div>
                    <div class="padding-right-5 padding-left-5">
                        <div class="row padding-top-75">
                            <div class="col-lg-3 col-md-4 padding-right-10 padding-left-10" v-for="(ad,index) in advertisements[4]" v-if="index<3">
                                <advertisement :ad="ad"></advertisement>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

</template>

<script>
    import advertisement from '../list/advertisement'
    export default {
        components: {
            advertisement,
        },
        data() {
            return {
                categories:[],
                advertisements:[],
                totalResult:[],
                loading:5,
            }
        },
        watch:{

        },
        mounted() {
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
                this.categories.map((cat,index)=>{
                    if(index<5){
                        axios.post('/advertisement/show',
                            {
                                page:1,
                                cat_parent:cat.id,
                                category_id:null,
                                priority:null,
                                pricemin:null,
                                pricemax:null,
                                orderby:null,
                                city_id:null,
                                state_id:null,
                                q:null,
                                filter:null
                            }).then(res=>{
                            this.advertisements[index]=res.data.data.data
                            this.totalResult[index]=res.data.data.total
                            this.loading--
                        })
                    }
                })
            })
        },
        methods:{

        },
    }
</script>
