<template>
  <LayoutApp :show-back="false" :hideHeader="hideHeader" :no-safe-area="true">
    <ClientOnly>
      <waterFallList ref="waterFallList" v-if="articleList && articleList.length > 0"
        :listData="articleList"
        :listInfo="listInfo"
        :item-w="344" :gutter-w="18"
        :isLoading="isFetchingArticleList"
        @load-more="loadMore"
      >
      </waterFallList>

      <div class="no-data-container" v-else>
        <ufo-no-item :tip="`暂无数据`"></ufo-no-item>
      </div>
    </ClientOnly>

  </LayoutApp>
</template>

<script>
import LayoutApp from '../../components/layout/layout-app';
import {createNamespacedHelpers} from 'vuex';
import waterFallList from './components/waterfall';
import UfoNoItem from '../../components/ufo-no-item';

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

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

  },
  activated() {

  },
  computed: {
    ...mapState(['articleList', 'articleListInfo', 'isFetchingArticleList']),
    listInfo() { // 列表基础信息
      if (this.articleListInfo) {
        console.log('computed=', this.articleListInfo, 'computedList=', this.articleList);
        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
        };
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 判断页面来源，决定是否重新读取数据
      if (!to.name || from.name !== 'ArticleDetail') {
        vm.$store.dispatch('article/articleList/fetchArticleList', {
          page: 1,
          limit: 20,
          reload: true
        });
      }

      /*if (to.name === 'List') {
        // 让页面滚回跳出时的位置
        setTimeout(function() {
          vm.$refs.wrapper.scrollTop = vm.scrollTop;
          console.log(vm.$refs.wrapper.scrollTop);
        }, 200);
      }*/
    });
  },
  beforeRouteLeave(to, from, next) {
    if (this.$refs.waterFallList) {
      console.log(this.$refs.waterFallList)
    }
    this.$refs.waterFallList.routeLeave(to, from, next);
  },
  methods: {
    ...mapActions(['fetchArticleList']),
    loadMore() {
      if (this.listInfo.pageNo < this.listInfo.totalPage && !this.isFetchingArticleList) {
        console.log('loadMore');
        this.fetchArticleList({
          page: this.articleListInfo.pageNo + 1,
          limit: 20,
          lastedTime: this.articleListInfo.lastedTime
        });
      }
    }
  },

};
</script>

<style lang="scss" scoped>
  .no-data-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: #efefef;
  }
</style>