<template>
  <Layout class="article-page">
    <LayoutHeader slot='header' title="推荐" :share="shareData">
      <i class="iconfont icon-share-blod" slot="opts"></i>
    </LayoutHeader>
    <LayoutScroll :infinite="true" :on-fetch="onFetch">
      <template class="article-item" slot="item" slot-scope="{ data }">
        <ArticleItem :data="data"></ArticleItem>
      </template>
    </LayoutScroll>
  </Layout>
</template>

<script>
import ArticleItem from './components/article/article-item';
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions, mapMutations} = createNamespacedHelpers('article');

export default {
  name: 'ArticlePage',
  data() {
    return {
      list: [],
      shareData: {},
      scrollOptions: {
        bounce: false
      },
      inx: 0,
      transparentSeek: 0
    };
  },
  computed: {
    ...mapState(['articleList']),
  },
  mounted() {
    this.offsetHeight = 200;
  },
  methods: {
    onFetch() {
      const items = Array.from({length: 10}).map((v, i) => {
        return {
          name: 'chenfeng' + (i + 10 * this.inx)
        }
      })

      this.inx++;

      return Promise.resolve(items);
    },
    click() {
      this.$refs.actionSheet.show();
      setTimeout(() => {
        this.initData();
        this.forceUpdate();
      }, 1000);
    },
    forceUpdate() {
      this.$refs.scroll.forceUpdate();
    },
    initData() {
      for (let i = 0; i < 100; i++) {
        this.list.push(i);
      }
    }

  },
  components: {
    ArticleItem
  }
};
</script>

<style lang="scss" scoped>
.article-page {
  background-color: #f0f0f0;
}
</style>