<template>
    <section class="blog-popular">
        <h3>Popular content</h3>
        <ul class="popular-items">
            <li v-for="article of articles" :key="article.id" @click="onClick(article)">
                <span class="arrow">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </span>
                <a class="link" href="javascript:void(0)">
                    {{ article.title }}
                </a>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    data() {
        return {
            loading: true,
            articles: [],
            error: null,
        };
    },
    mounted() {
        axios.get("/api/blog/popular").then((res) => {
            if (res.status > 399) {
                this.error = res.statusText;
            } else {
                this.articles = res.data;
            }

            this.loading = false;
        }).catch(ex => {
            this.loading = false;
            this.error = ex.message;
        });
    },
    methods: {
        onClick(article) {
            const date = moment(article.date);
            const year = date.year();
            const month = date.month() + 1;
            const day = date.date();
            const id = article.id;
            const slug = article.slug;

            this.$router.push({ name: 'blog-article', params: { year, month, day, id, slug }});
        },
    },
};
</script>
