<template>
  <Layout class="topic-list-page">
    <LayoutHeader slot='header' theme="white" class="topic-list-header">全部话题</LayoutHeader>
    <Scroll
      class="main-container"
      ref="scroll"
      :scroll-events="['scroll-end']"
      @scroll-end="fetchList">
      <div class="topic-list">
        <TopicItem v-for="(item, index) in topicList" :key="index" :data="item"></TopicItem>
      </div>
      <div class="loading">
        <p v-if="noMore" class="load-text">没有更多了</p>
        <Loading v-else class="load-icon" :size="20"></Loading>
      </div>
    </Scroll>
  </Layout>
</template>

<script>
import {get} from 'lodash';
import {Scroll, Loading} from 'cube-ui';
import TopicItem from './components/topic/list-item';
import {createNamespacedHelpers} from 'vuex';
// import YAS from 'utils/yas-constants';

const {mapState, mapActions} = createNamespacedHelpers('article');

export default {
  name: 'TopicListPage',
  data() {
    return {
      data: {},
      noMore: false
    };
  },
  created() {
  },
  activated() {
    this.fetchList();
  },
  async serverPrefetch() {
    return this.fetchTopicList({});
  },
  computed: {
    ...mapState(['topicList', 'fetchTopicPage'])
  },
  methods: {
    ...mapActions(['fetchTopicList']),
    fetchList() {
      if (this.noMore) {
        return;
      }

      this.fetchTopicList({}).then(res => {
        if (+this.fetchTopicPage > +get(res, 'data.totalPage')) {
          this.noMore = true;
        }
      });
    }
  },
  components: {
    Scroll,
    Loading,
    TopicItem
  }
};
</script>

<style lang="scss" scoped>
.topic-list {
  padding: 10px 0;
}

.loading {
  padding-bottom: 20px;
  text-align: center;
  line-height: 1.2;
}

.load-icon {
  display: flex;
  justify-content: center;
}
</style>