<template>
  <Article ref="article" title="话题" :on-fetch="onFetch"></Article>
</template>

<script>
import Article from './components/article/article';
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions, mapMutations} = createNamespacedHelpers('article');

export default {
  name: 'ArticlePage',
  data() {
    return {
      inx: 0,
      tag: '',
      reload: false
    };
  },
  beforeRouteUpdate(to, from, next) {
    if (this.$route.params.tag !== to.params.tag) {
      this.$refs.article.init();
      this.reload = true;
      this.inx = 0;
    }
    next();
  },
  methods: {
    onFetch() {
      console.log('onFetch')
      if (!this.allList) {
        this.allList = [];
      }
      const items = Array.from({length: 5}).map((v, i) => {
        return {
          name: 'chenfeng' + (i + 5 * this.inx),
          id: (i + 5 * this.inx)
        }
      })

      this.inx++;

      this.allList = this.allList.concat(items);
      if (this.reload) {
        this.reload = !this.reload;
        return Promise.resolve({
          data: items,
          reload: true
        });
      }
      return Promise.resolve(items);
    },
  },
  components: {
    Article
  }
};
</script>

<style lang="scss" scoped>
.article-page {
  background-color: #f0f0f0;
}
</style>