<template>
  <view class="coupon-list">
    <view class="navbar">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="nav-item"
        :class="{ current: tabCurrentIndex === index }"
        @click="tabClick(index)"
      >
        {{ item.text }}
      </view>
    </view>
    <view :style="{ height: listHeight + 'px', marginTop: listMarginTop + 'px' }">
      <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :style="{ height: '100%' }">
        <yi-coupon
          v-for="(item, index) in couponUserList"
          :key="index"
          :coupon-name="item.couponStore.name"
          :valid-time="expireTime(item.expireTime)"
          :coupon-note="item.couponStore.note"
          :coupon-amount="item.amount"
          :show-use-btn="item.status === 3"
          :min-cost="item.couponStore.minCost === 0 ? '无门槛' : '满' + item.couponStore.minCost + '可用'"
          :coupon-property="item.couponStore.property === 'cash' ? '红包' : '优惠券'"
          @handleSelect="handleSelect(item)"
        ></yi-coupon>
        <!-- 适配iPhoneX -->
        <view class="mescroll-safearea"></view>
      </mescroll-body>
    </view>
  </view>
</template>

<script>
import { fetchCouponUserList } 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: 'couponList',
  components: {
    MescrollBody,
  },
  data() {
    return {
      listMarginTop: 0,
      listHeight: 0,
      couponUserList: [],
      couponUserListMeta: null,
      tabCurrentIndex: 0,
      tabList: [
        {
          status: null,
          text: '全部',
        },
        {
          property: 'discount',
          text: '优惠券',
        },
        {
          property: 'cash',
          text: '红包',
        },
      ],
      keyJson: { cate: 'coupon', status: 3 },
    };
  },
  mixins: [MeScrollMixin],
  computed: {},
  onLoad() {
    console.log('%c [uni.getSystemInfoSync()]: ', 'color:#1989fa;', uni.getSystemInfoSync());
    const { screenHeight, statusBarHeight } = uni.getSystemInfoSync();
    this.listMarginTop = 40;
    console.log('%c [this.listMarginTop]: ', 'color:#1989fa;', this.listMarginTop);
    this.listHeight = screenHeight - statusBarHeight - this.listMarginTop * 2;
  },
  methods: {
    // 顶部tab点击
    async tabClick(index) {
      this.tabCurrentIndex = index;
      if (this.tabCurrentIndex === 0) {
        this.keyJson.property = undefined;
      }
      if (this.tabCurrentIndex === 1) {
        this.keyJson.property = 'discount';
      }
      if (this.tabCurrentIndex === 2) {
        this.keyJson.property = 'cash';
      }
      this.mescroll.resetUpScroll();
    },
    expireTime(expireTime) {
      if (dayjs(expireTime).format('YYYY-MM-DD') === '9999-01-01') {
        return '无期限';
      } else {
        return '有效期至: ' + dayjs(expireTime).format('YYYY-MM-DD HH:mm');
      }
    },
    async getCouponUserList(page = 0) {
      const params = {
        query: {
          limit: 10,
          page,
          keyJson: JSON.stringify(this.keyJson),
        },
        cate: 'buy',
      };
      return await fetchCouponUserList(params);
    },
    /*下拉刷新的回调 */
    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 { data, meta } = await this.getCouponUserList(page.num - 1);
      if (page.num === 1) {
        this.couponUserList = [];
      }
      this.couponUserList = this.couponUserList.concat(data);
      this.couponUserListMeta = meta;
      this.mescroll.endSuccess(meta.count);
    },
    // 选择优惠券回调
    handleSelect(coupon) {
      console.log('%c [选择优惠券回调]: ', 'color:#1989fa;', coupon);
      const idx = this.couponUserList.findIndex(item => (item.acc = coupon.acc));
      if (idx > -1) {
        this.couponUserList[idx].checked = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../uni';

.coupon-list {
  position: relative;
  .navbar {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    display: flex;
    height: 40px;
    padding: 0 5px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
    z-index: 10;

    .nav-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 14px;
      color: #303133;
      position: relative;

      &.current {
        color: #e25041;

        &:after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 44px;
          height: 0;
          border-bottom: 2px solid #e25041;
        }
      }
    }
  }
}
</style>
