<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Posts"/>
    <StackLayout>
        <ListView for="post in posts" :loadMoreItems="proxPagina()">
          <v-template>
            <StackLayout backgroundColor="#3c495e">
              <Label textWrap="true" :text="post.titulo" style="font-weight: bold; color: white; padding: 0 0 20"/>
              <Label textWrap="true" :text="post.resumo" style="color: white"/>
            </StackLayout>
          </v-template>
        </ListView>
        <StackLayout>
          <Label v-if="carregando" text="Carregando..." style="font-weight: bold; color: white; font-size: 15; text-transform: uppercase;" />
        </StackLayout>
    </StackLayout>
  </Page>
</template>
<script>
const httpModule = require("http");
export default {
  data: function() {
      return {
          posts: [], // Array to receive JSON response
          carregando: true, // Sets to false when AJAX call is complete
          pgNum: 1, // Will be used to display current page of posts loaded
          httpPath: 'http://academiadoautismo.com.br/wp-json/wp/v2/posts?per_page=10&page=' // Base HTTP Path to request data
      }
  },
  methods: {
    proxPagina: function () {
      if (!this.carregando) {
        // Trying to stop it from firing before the ajax finishes loading;
        // This works, but when the ajax finishes the event fires right away (twice), before scrolling;
        // setTimeout was tested without success. The event fires twice after the timeout before scrolling;
        alert("AEHOOOOOO");
      }
    },
    loadItems: function (pageNum) {
      let uri = this.httpPath+pageNum.toString();
      this.pgNum = pageNum;
      httpModule.getJSON(uri).then(response =>
        {
          this.posts = response.map(
            post => {
              return {
                id: post.id,
                titulo: post.title.rendered,
                data: post.date,
                resumo: post.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, ""),
              }
            }
          );
          this.carregando = false;
        }
      );
    }
  },
  created: function () {
    this.loadItems(1);
    this.pgNum = 1;
  },
}
</script>