<template>
  <mescroll-vue
    class="coupon-center-con"
    ref="mescrollRef"
    @init="mescrollInit"
    :down="downOption"
    :up="upOption"
    top="10px"
  >
    <coupon-item
      v-for="(item, index) of list"
      :key="`coupon-item-${index}`"
      :data="item"
      @get="handleGet(item)"
    />
  </mescroll-vue>
</template>

<script>
import CouponItem from "@/components/coupon-item";
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  components: {
    CouponItem,
  },
  data() {
    return {
      merchantId: "",
      downOption: {
        callback: this.downCallback
      },
      upOption: {
        use: false,
      },
      list: [],
    };
  },
  methods: {
    downCallback() {
      this.$showLoading();
      this.$api({
        apiName: "getShopCouponList",
        postData: this.merchantId,
        success: (res) => {
          this.list = res.list;
          this.mescroll.endSuccess();
          this.$hideLoading();
        },
      });
    },
    handleGet(item) {
      this.$showLoading();
      this.$api({
        apiName: "getCoupon",
        postData: item.couponId,
        success: () => {
          item.uid = true;
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
  },
  mounted() {
    this.merchantId = this.$route.params.merchantId
  },
};
</script>

<style lang="less">
.coupon-center-con {
  background: #f5f7fb;
  /deep/ .mescroll-wxs-content {
    padding: 0 10px;
  }
}
</style>