<template>
    <div>
        // fiter component
        <div class="flex flex-col flex-wrap md:flex-row items-start justify-start">
            <template v-if="loading">
                <loading-tile v-for="(item, index) in 6"
                              :key="index"></loading-tile>
            </template>
            <a :href="item.url"
               target="_blank"
               v-else
               v-for="item in data" :key="item.id"
               class="w-full md:w-1/2 lg:w-1/3 group max-w-md text-left md:px-4 lazy-item mb-8 md:mb-16">
                <div class="h-48 lg:h-64 overflow-hidden relative rounded-t-sm">
                    <div class="group-hover:hover-scale transition w-full h-full bg-cover bg-center bg-no-repeat flex items-end"
                         :style="{ 'background-image': 'url(' + item.small_url + ')' }">
                    </div>
                    <i :class="getIconClass(item.type)"
                       class="absolute pin-l pin-b ml-8 mb-4 text-2xl text-white"></i>
                </div>
                <div class="border border-grey-border group-hover:translate-5 transition group-hover:shadow-lg p-8 md:p-4 rounded-b-lg lg:p-8 bg-white">
                    <h3 class="mb-4 md:mb-2 font-black tracking-wide lg:mb-4 text-xl">
                        {{ item.title }}
                    </h3>
                    <p class="leading-normal font-normal">
                        {{ item.summary }}
                    </p>
                </div>
            </a>
        </div>
        <div v-show="data && data.length === 0"
             class="mx-auto px-4 flex items-center justify-center h-64">
            <h2>
                {{ $t('general.no-results') }}
            </h2>
        </div>
        // pagination component
    </div>
</template>

<script>
    export default {
        props: ['apiUrl'],
        data() {
            return {
                data: null,
                pagination: {
                    'current_page': 1
                },
                loading: false,
                limit: 15,
                selectOptions: [
                    {
                        label: 'Facebook',
                        value: 'facebook'
                    },
                    {
                        label: 'Instagram',
                        value: 'instagram'
                    },
                    {
                        label: 'Forum',
                        value: 'forum'
                    }
                ]
            }
        },
        methods: {
            getData() {
                this.loading = true;
                axios.get(`${this.apiUrl}?page=${this.pagination.current_page}`, {
                    params: this.params,
                })
                    .then(result => {
                        this.data = result.data.data.data;
                        this.pagination = {
                            total: parseInt(result.data.data.total),
                            per_page: parseInt(result.data.data.per_page),
                            current_page: parseInt(result.data.data.current_page),
                            last_page: parseInt(result.data.data.last_page),
                            from: parseInt(result.data.data.from),
                            to: parseInt(result.data.data.to)
                        };
                        this.loading = false;
                    })
                    .catch(error => {
                        this.$notify({
                            type: 'error',
                            group: 'errors',
                            duration: 10000,
                            text: this.$t('general.response-error'),
                        });
                    });
            },
            getIconClass(type) {
                switch (type) {
                    case 'facebook':
                        return 'icon-facebook-full';
                    case 'instagram':
                        return 'icon-instagram';
                    case 'forum':
                        return 'icon-messages';
                    default:
                        return 'icon-newspaper-full'
                }
            }
        },
        computed: {
            params: function () {
                return {limit: this.limit}
            },
        },
        mounted() {
            this.getData();
        },
    }
</script>