<template>
  <LayoutApp :show-back="false" :hideHeader="hideHeader" :no-safe-area="true">
    <ClientOnly>
      <waterFallList
        :listData="articleList"
        :listInfo="listInfo"
        :item-w="344" :gutter-w="18"
        @load-more="loadMore"
      >
      </waterFallList>
    </ClientOnly>

  </LayoutApp>
</template>

<script>
import LayoutApp from '../../components/layout/layout-app';
import {mapState as mapYohoState, createNamespacedHelpers} from 'vuex';
import waterFallList from './components/waterfall';

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

export default {
  name: 'articleList',
  components: {
    LayoutApp,
    waterFallList
  },
  props: ['hideHeader'],
  data() {
    return {
      listData: [],
    };
  },
  mounted() {

  },
  activated() {

  },
  computed: {
    ...mapYohoState(['yoho']),
    ...mapState(['articleList', 'articleListInfo']),
    listInfo() { // 列表基础信息
      if (this.articleListInfo) {
        console.log(this.articleListInfo);
        return {
          lastedTime: this.articleListInfo.lastedTime,
          pageNo: this.articleListInfo.pageNo || 1,
          pageSize: this.articleListInfo.pageSize || 20,
          totalCount: this.articleListInfo.totalCount || 0,
          totalPage: this.articleListInfo.totalPage || 1
        };
      }
    }
  },
  watch: {
    'yoho.context.isLogin': function(val) {
      this.isLogin = val;
    }
  },
  asyncData({store}) {
    return store.dispatch('article/articleList/fetchArticleList', {
      page: 1,
      limit: 20
    });
  },
  methods: {
    ...mapActions(['fetchArticleList']),
    loadMore() {
      console.log('loadMore');
      if (this.articleListInfo.pageNo < this.articleListInfo.totalPage) {
        this.fetchArticleList({
          page: this.articleListInfo.pageNo + 1,
          limit: 20,
          lastedTime: this.articleListInfo.lastedTime
        })
      }
    }
  },

};
</script>

<style lang="scss" scoped>

</style>