<template>
  <mescroll-vue
    ref="mescrollRef"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
    class="good-list-scroll-con"
  >
    <div class="list-con">
      <list-item
        class="list-item-con"
        v-for="(item, index) in list"
        :key="`list-item-${index}`"
        :data="item"
      />
    </div>
  </mescroll-vue>
</template>

<script>
import { MescrollMixin, MescrollMoreItemMixin } from "@/mixins";
import ListItem from "./list-item.vue";
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  components: { ListItem },
  data() {
    return {
      downOptions: {
        autoShowLoading: false,
        auto: false,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        callback: this.upCallback,
      },
      list: [],
    };
  },
  methods: {
    initData() {
      this.requestData({ num: 1, size: 10 });
      this.list = [];
      this.mescroll.setPageNum(2);
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page, mescroll) {
      this.requestData(page);
    },
    requestData() {
      this.$showLoading();
      setTimeout(() => {
        this.$hideLoading();
        this.list = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
        this.mescroll.endBySize(10, 10);
      }, 1500);
    },
  },
};
</script>

<style lang="less">
.good-list-scroll-con {
  .list-con {
    padding: 10px 15px;
  }
}
</style>