<template>
  <mescroll-vue
    ref="mescrollRef"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
    class="address-scroll-con"
  >
    <div class="list-con">
      <component
        class="list-item-con"
        :is="tab.itemCom"
        v-for="(item, index) in listData"
        :key="index"
        :itemData="item"
        :index="index"
        @delete="handleDelete(index, item)"
      />
    </div>
  </mescroll-vue>
</template>

<script>
import { MescrollMixin, MescrollMoreItemMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  props: {
    tab: Object,
    index: Number,
  },
  data() {
    return {
      downOptions: {
        autoShowLoading: false,
        auto: false,
        callback: this.downCallback,
      },
      upOptions: {
        use: false,
      },
      listData: [],
    };
  },
  methods: {
    initData() {
      this.$showLoading();
      this.$api({
        apiName: this.tab.listApi,
        success: (res) => {
          this.listData = res;
        },
        complete: () => {
          this.mescroll.endDownScroll();
          this.$hideLoading();
        },
      });
    },
    downCallback() {
      this.initData();
    },
    handleDelete(index, item) {
      let { id } = item;

      this.$showLoading();
      this.$api({
        apiName: this.tab.delApi,
        postData: { id },
        success: () => {
          this.listData.splice(index, 1);
          this.$toast("已删除");
        },
        complete: this.$hideLoading,
      });
    },
  },
};
</script>

<style lang="less">
.address-scroll-con {
  .list-con {
    background-color: #ffffff;
  }
  .list-item-con {
    // padding: 0 16px;
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
