<template>
  <Layout class="topic-list-page">
    <LayoutHeader :hide="noHeader" slot='header' theme="white" class="topic-list-header" title="全部话题"></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, mapState} from 'vuex';

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

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

      this.fetchTopicList({}).then(res => {
        if (+this.fetchTopicPage > +get(res, 'data.totalPage')) {
          this.noMore = true;
        }
        this.$nextTick(() => {
          this.$refs.scroll.forceUpdate(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>