<template>
  <mescroll-vue
    :ref="`mescrollRef${i}`"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
  >
    <component
      :is="comType"
      v-for="(item, index) of list"
      :key="`order-item-${index}`"
      :data="item"
    />
    <m-no-data v-if="list.length == 0" />
  </mescroll-vue>
   
</template>

<script>
import { MescrollMixin, MescrollMoreItemMixin } from "@/mixins";
import { OrderType, OrderTypeObj } from "@/enums";

export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  props: {
    i: Number,
    index: Number,
    tab: Object,
    sub: Object,
  },
  data() {
    return {
      list: [],
      downOptions: {
        autoShowLoading: false,
        auto: false,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        callback: this.upCallback,
      },
    };
  },
  computed: {
    comType() {
      return this.tab.comm
    },
  },
  methods: {
    initData() {
      this.requestData({ num: 1, size: 10 });
      this.list = [];
      this.mescroll.setPageNum(2);
    },
    requestData(page) {
      let apiName = OrderTypeObj[this.tab.val].listApi;
      let orderState = this.sub.val;
      let param = this.sub.val
      page.num == 1 && this.$showLoading();

      this.$api({
        apiName,
        postData: {
          param,
          orderState,
          page: page.num,
          size: page.size,
        },
        success: (res) => {
          if (page.num == 1) {
            this.list = [];
          }
          this.mescroll.endBySize(res.data.length, res.totalSize);
          this.list = this.list.concat(res.data);
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page, mescroll) {
      this.requestData(page);
    },
  },
};
</script>