<template>
    <div>
        <Scroll 
        ref="scroll" 
        class="list"
        :data="noticeList"
        :options="scrollOption"
        @pulling-up="onPullingUp">
          <div class="content-root">
            <NoticeItem v-for="(item, index) in noticeList" :key="index" :data="item"></NoticeItem>
          </div>
        </Scroll>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions} = createNamespacedHelpers('notice');

import NoticeItem from './noticeItem';

import {
    Style,
    Scroll,
    RecycleList
} from 'cube-ui';
// import { resolve } from 'dns';


export default {
  components: {
    NoticeItem,
    Scroll,
    RecycleList,
    Style
  },
  name: 'NoticeListPage',
  data(){
    return {
      data: {},
      noMore: false,
      scrolling: false,
      scrollOption: {
        // bounce: false,
        pullUpLoad:true,
      },
    };
  },
  created(){
    // console.log(this.noticeList)
    this.fetchNoticeList();
  },
  // activated(){
  //   this.fetchList();
  // },
  // async serverPrefetch(){
  //   this.fetchNoticeList();
  // },
  mounted(){
    // this.fetchNoticeList();
  },
  computed: {
    ...mapState(['noticeList','fetchNoticePage']),
  },
  methods:{
    ...mapActions(['fetchNoticeList']),
    onScroll(){
      console.log('onScroll')
      this.scrolling = true;
      this._scTimer && clearTimeout(this._scTimer);
      this._scTimer = setTimeout(() => {
        this.scrolling = false;
      }, 400);
    },
    onPullingUp(){
      console.log('onPullingUp:'+this.noMore)
    },
    onPullingDown() {
      console.log('onPullingDown:'+this.noMore)
    },
    onFetch() {
      // console.log('fetchList:'+this.noticeList)
      // let items = []
      // return new Promise((resolve) => {
      //   // 模拟请求 50 条数据，因为 size 设置为 50
      //   setTimeout(() => {
      //     for (let i = 0; i < 50; i++) {
      //       items.push({
      //         id: i,
      //         avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/danpliego/128.jpg',
      //         msg: '123',
      //         time: 'Thu Oct 25 2018 15:02:12 GMT+0800 (中国标准时间)'
      //       })
      //     }
      //     resolve(items)
      //   }, 1000)
      // })
      
      if (this.noMore) {
        return;
      }
      this.fetchNoticeList();
      // this.fetchNoticeList({}).then(res => {
      //   if (+this.fetchNoticePage > +get(res, 'data.totalPage')) {
      //     this.noMore = true;
      //   }
      //   this.$nextTick(() => {
      //     this.$refs.scroll.forceUpdate(true);
      //   });
      // });
    }
  },

}


</script>
<style>
  .list{
    /* height: 400px; */
    width: 100%;
  }
  .content-root{
    /* height: 400px; */
    width: 100%;
  }
</style>