<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']"
      @scroll="onScroll"
      @scroll-end="fetchList">
      <div class="topic-list">
        <TopicItem v-for="(item, index) in topicList" :key="index" :data="item"></TopicItem>
      </div>
    </Scroll>
    <ReplaceToHome :scrolling="scrolling" ></ReplaceToHome>
  </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';
import ReplaceToHome from 'components/replace-to-home/replace-to-home';

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

export default {
  name: 'TopicListPage',
  data() {
    return {
      data: {},
      noMore: false,
      scrolling: 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']),
    onScroll() {
      this.scrolling = true;
      this._scTimer && clearTimeout(this._scTimer);
      this._scTimer = setTimeout(() => {
        this.scrolling = false;
      }, 400);
    },
    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: {
    ReplaceToHome,
    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>