<template>
  <div class="news-list-con bg-grey">
    <mescroll-vue
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOptions"
      :up="upOptions"
    >
      <div class="list-item">
        <list-item
          v-for="(item, index) of listData"
          :key="index"
          :itemData="item"
        />
      </div>
    </mescroll-vue>
  </div>
</template>

<script>
import ListItem from "./list-item.vue";
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  components: { ListItem },
  data() {
    return {
      listData: [],
      downOptions: {
        autoShowLoading: false,
        auto: true,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        textNoMore: "没有更多啦",
        callback: this.upCallback,
      },
    };
  },
  methods: {
    requestData(page) {
      if (page.num === 1) {
        this.$showLoading();
      }
      this.$api({
        apiName: "getNotice",
        postData: {
          page: page.num,
          size: page.size,
        },
        success: (res) => {
          let arr = res.list;
          arr.map((x) => {
            x.status = 0;
            return x;
          });
          if (page.num === 1) {
            this.listData = arr;
          } else {
            this.listData = this.listData.concat(arr);
          }
          this.mescroll.endBySize(arr.length, res.count);
        },
        fail: (err) => {
          this.mescroll.endErr();
        },
        complete: () => {
          if (page.num === 1) {
            this.$hideLoading();
          }
          this.mescroll.endDownScroll();
        },
      });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.requestData(page);
    },
  },
};
</script>
<style lang="less">
.news-list-con {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .list-item {
    background-color: #ffffff;
  }
  ::v-deep.mescroll-uni-warp {
    .mescroll-uni-fixed {
      height: 100%;
    }
  }
}
</style>
