<template>
  <LayoutApp :show-back="false" :hideHeader="hideHeader" :no-safe-area="true">
    <ClientOnly>
      <waterFallList ref="waterFallList" v-if="articleList && articleList.length > 0"
        :absolute="true"
        :listData="articleList"
        :listInfo="listInfo"
        :item-w="344" :gutter-w="16"
        :isLoading="isFetchingArticleList"
        :yasParams="yasParams"
        :yasClickOP="yasClickOP"
        @load-more="loadMore"
        @update-praise="updatePraise"
      >
      </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,
      isUpdatingPraise: false, // 是否正在调用点赞接口
      yasParams: {P_NAME: 'XY_UFOArticle'},
      yasClickOP: 'XY_STROLL_MAIN_C'
    };
  },
  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.articleList.length) {
        vm.$store.dispatch('article/articleList/fetchArticleList', {
          page: 1,
          limit: 20,
          reload: true
        });
      } else if (from.name === 'ArticleDetail') {
        vm.$refs.waterFallList.scrollToOldPlace();
      }

      /*if (to.name === 'List') {
        // 让页面滚回跳出时的位置
        setTimeout(function() {
          vm.$refs.wrapper.scrollTop = vm.scrollTop;
          console.log(vm.$refs.wrapper.scrollTop);
        }, 200);
      }*/
    });
  },
  methods: {
    ...mapActions(['fetchArticleList', 'updateArticlePraise']),
    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
        });
      }
    },
    updatePraise({articleId, status, index}) {
      if (!this.isUpdatingPraise) {
        this.isUpdatingPraise = true;
      }
      this.updateArticlePraise({articleId, status, index}).then(() => {
        this.isUpdatingPraise = false;
        this.$store.dispatch('reportYas', {
          params: {
            appop: 'XY_STROLL_ATC_LIKE_C',
            param: {
              POS_ID: 101,
              ARTICLE_ID: articleId,
              STATUS: status,
            },
          },
        });
      }).catch(() => {
        this.isUpdatingPraise = false;
      });
    }
  },

};
</script>

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