<template>
  <view class="activity-list">
    <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :style="{ height: '100%' }">
      <yi-coupon
        v-for="(item, index) in couponList"
        :key="index"
        :coupon-name="item.name"
        :valid-time="expireTime(item.expireTime)"
        :coupon-note="item.note"
        :coupon-amount="item.amount"
        :show-use-btn="item.status === 3"
        :min-cost="item.minCost === 0 ? '无门槛' : '满' + item.minCost + '可用'"
        :coupon-property="item.property === 'cash' ? '红包' : '优惠券'"
      >
        <button v-if="item.active || item.isReceive" disabled size="mini" type="primary" slot="right-btn">
          已领取
        </button>
        <button v-else-if="item.last === 0" disabled type="primary" size="mini" slot="right-btn">已领完</button>
        <button v-else type="primary" @click="takeCoupon(item.cid)" size="mini" slot="right-btn">领取</button>
        <text slot="right-text">剩余{{ item.last }}张</text>
      </yi-coupon>
      <!-- 适配iPhoneX -->
      <view class="mescroll-safearea"></view>
    </mescroll-body>
  </view>
</template>

<script>
import { queryActiveList, newCouponUser } from '../../mall/api';
import MescrollBody from '@/components/mescroll-uni/mescroll-body';
import MeScrollMixin from '@/components/mescroll-uni/mescroll-mixins';
import dayjs from 'dayjs';
export default {
  name: 'activity',
  components: {
    MescrollBody,
  },
  mixins: [MeScrollMixin],
  data() {
    return {
      couponList: [],
      couponListMeta: null,
      aid: '6649ee26-1e2c-42e2-b534-e95ac5fbea75',
    };
  },
  onLoad(options) {
    if (options.aid) {
      this.aid = options.aid;
    }
  },
  methods: {
    expireTime(expireTime) {
      if (dayjs(expireTime).format('YYYY-MM-DD') === '9999-01-01') {
        return '无期限';
      } else {
        return '有效期至: ' + dayjs(expireTime).format('YYYY-MM-DD HH:mm');
      }
    },
    async getActiveList(page) {
      const params = {
        query: {
          limit: 10,
          page,
          keyJson: JSON.stringify({ aid: this.aid }),
        },
      };
      return (await queryActiveList(params)).data[0];
    },
    /*下拉刷新的回调 */
    async downCallback() {
      console.log('%c [下拉刷新的回调]: ', 'color:#1989fa;');
      if (this.mescroll) {
        this.mescroll.resetUpScroll();
      }
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    async upCallback(page) {
      console.log('%c [上拉加载的回调]: ', 'color:#1989fa;', page.num);
      const {
        couponStoreList: { data, meta },
      } = await this.getActiveList(page.num - 1);
      console.log('%c [couponStoreList aaa]: ', 'color:#1989fa;', data);
      if (page.num === 1) {
        this.couponList = [];
      }
      this.couponList = this.couponList.concat(data);
      this.couponList.forEach(item => {
        item.last = item.numRelease - item.numReceived;
      });
      this.couponListMeta = meta;
      this.mescroll.endSuccess(meta.count);
    },
    // 领取优惠券
    async takeCoupon(cid) {
      const params = { cid };
      await newCouponUser(params);
      this.mescroll.resetUpScroll();
      uni.showToast({
        title: '领取成功',
      });
    },
  },
};
</script>

<style scoped lang="scss">
.activity-list {
}
</style>
