<template>
  <mescroll-vue
    class="assets-scroll-item-con"
    ref="mescrollRef"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
  >
    <div class="list-con">
      <component
        :is="tab.com"
        v-for="(item, i) of ListData"
        :itemData="item"
        :key="`myassets-item-${i}`"
        :deleteItem="handleDelete(i)"
        @modifyPrice="(item) => $emit('modifyPrice', item)"
      />
    </div>
     <m-no-data v-if="ListData.length == 0" />
  </mescroll-vue>
</template>

<script>
import { MescrollMixin, MescrollMoreItemMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  props: ["tab", "searchKey"],
  data() {
    return {
      downOptions: {
        autoShowLoading: false,
        auto: false,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        textNoMore: "没有更多啦",
        callback: this.upCallback,
      },
      ListData: [],
    };
  },
  methods: {
    initData() {
      this.requestData({ num: 1, size: 10 });
      this.ListData = [];
      this.mescroll.setPageNum(2);
    },
    requestData(page) {
      if (page.num === 1) {
        this.$showLoading();
      }
      this.$api({
        apiName: this.tab.api,
        postData: {
          type: 1,
          page: page.num,
          size: page.size,
          keyWord: this.searchKey
        },
        success: (res) => {
          let resList = res[this.tab.listKey];
          if (page.num == 1) {
            this.ListData = resList;
          } else {
            this.ListData = this.ListData.concat(resList);
          }
          this.mescroll.endBySize(resList.length, res[this.tab.totalKey]);
        },
        fail: (err) => {
          this.mescroll.endErr();
        },
        complete: () => {
          if (page.num === 1) {
            this.$hideLoading();
          }
          this.mescroll.endDownScroll();
        },
      });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.requestData(page);
    },
    handleDelete(index) {
      return () => {
        this.ListData.splice(index, 1);
      };
    },
  },
};
</script>

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