<template>  
    <LayoutApp :show-back="true" :title="title">
        <Scroll 
        ref="scroll"
        v-if="noticeList.length"
        :scroll-events="['scroll-end','scroll']"
        @scroll-end="fetchList"
        >
            <NoticeItem v-for="(item, index) in noticeList" :key="index" :data="item"></NoticeItem>
        </Scroll>
         <UfoNoItem :tip="`暂无数据`" v-else></UfoNoItem>
    </LayoutApp>
</template>

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

const { mapState, mapActions} = createNamespacedHelpers('notice');
import NoticeItem from './components/noticeItem';
import UfoNoItem from '../../../components/ufo-no-item'

import {
    Style,
    Scroll,
    RecycleList
} from 'cube-ui';
export default {
  components: {
    NoticeItem,
    Style,
    Scroll,
    UfoNoItem,
    RecycleList
  },
  data(){
    return {
      title: '公告',
      data: {},
      scrolling: false,
      scrollOption: {
        pullUpLoad:true,
      },
    };
  },
  created(){
    this.fetchList();
    // this.fetchNoticeList();
  },

  computed: {
    ...mapState(['noticeList','fetchNoticePage','isMore','isShowEmpty']),
  },
  methods:{
    ...mapActions(['fetchNoticeList']),
    onScroll(){
      console.log('onScroll')
      this.scrolling = true;
      this._scTimer && clearTimeout(this._scTimer);
      this._scTimer = setTimeout(() => {
        this.scrolling = false;
      }, 400);
    },
     scroll({ y }) {
      const height = this.$refs.banner.$el.offsetHeight + this.$refs.header.offsetHeight;

      if (-y >= height) {
        this.fixed = true;
      } else {
        this.fixed = false;
      }
    },
    fetchList(){
        // console.log('fetchList:'+this.isMore)
        if (!this.isMore) {
            return;
        }
        // console.log('fetchList:'+this.noMore)
        this.fetchNoticeList().then(res => {
            this.$nextTick(() => {
            this.$refs.scroll.forceUpdate(true);
            });
        });
    },
    async onPullingUp(){
      console.log('onPullingUp:'+this.isMore)
      await this.fetchList();
    },

  },

};

</script>

<style scoped>

.scroll-content {
    height: 500px;
}
</style>