<template>
  <reco-lazy-loading-list :isAllLoaded="isAllLoaded" v-on:loadNextPage="loadNextPage($event)" :avgHeight="80" :step="20">
    <ion-list>
      <reco-chat-item v-for="chat in chats" :me="{uid: 'sdasda'}" :chat="chat" :recoDate="false" :key="chat.id" v-on:openChat="openChat($event)" v-on:deleteChat="deleteChat(chat)"/>
    </ion-list>
  </reco-lazy-loading-list>
</template>

<script>
import RecoLazyLoadingList from '@/components/complex/RecoLazyLoadingList.vue';
import RecoChatItem from '@/components/complex/RecoChatItem.vue';
import Chats from '@/dummydb/chats'

export default {
  components: {
    RecoLazyLoadingList, RecoChatItem
  },
  data() {
    return {
      chats: Chats.slice(0, 20),
      isAllLoaded: false,
    };
  },
  methods: {
    loadNextPage(e) {
      for (var i = e.start; i < e.end; i++) {
        if (i < Chats.length) {
          this.chats.push(Chats[i]);
        } else {
          this.isAllLoaded = true;
        }
      }
    },
    openChat(chat) {
      console.log('open chat: ', chat);
    },
    deleteChat(chat){
      console.log('delete chat: ', chat);
    }
  },
}
</script>

<style scoped lang="css">
  
</style>