<template>
<div class="announcementList">
  <searchBox class="searchBox"></searchBox>
    <scrollBox class="announcementBox" @touchBottom="touchBottom">
      <announcementItem class="announcementItem" v-for="(item,index) in list" :key="index" :params="item"></announcementItem>
    </scrollBox>
</div>
</template>

<script>
import searchBox from "@/components/searchBox";
import announcementItem from "@/views/Home/module/announcementItem";
import scrollBox from "@/components/scrollBox";
export default {
  name: "announcementList",
  components:{
    searchBox,
    announcementItem,
    scrollBox
  },
  mounted() {
    this.getNotices();
  },
  data(){
    return {
      list:[],
      page:1,
      hasNext:true
    }
  },
  methods:{
    touchBottom(){
      this.page ++
      this.getNotices()
    },
    getNotices(){
      if(!this.hasNext) return
      let params = {
        type:'0',
        pageNum:this.page,
        pageCapacity:10
      }
      this.$api.getNotices(params).then(res=>{
        this.loading = false
        if(res.content.list.length<10){
          this.hasNext = false
        }
        this.list = [...this.list,...res.content.list]
      })
    },

  }
}
</script>

<style scoped lang="less">
.announcementList{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  .announcementBox{
    height: calc(100% - 78px);
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .searchBox{
    margin: 30px 0;
  }
  .announcementItem{
    margin-bottom: 15px;
  }
}

</style>