<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';

export default {
  components: {
    NoticeItem,
    Scroll,
    RecycleList,
    Style
  },
  name: 'NoticeListPage',
  data() {
    return {
      data: {},
      noMore: false,
      scrolling: false,
      scrollOption: {
        // bounce: false,
        pullUpLoad: true,
      },
    };
  },
  created() {
    this.fetchNoticeList();
  },
  mounted() {
  },
  computed: {
    ...mapState(['noticeList', 'fetchNoticePage']),
  },
  methods: {
    ...mapActions(['fetchNoticeList']),
    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() {
      if (this.noMore) {
        return;
      }
      this.fetchNoticeList();
    }
  },
};
</script>

<style scoped>
  .list {
    /* height: 400px; */
    width: 100%;
  }

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