<!--
 * @Date: 2024-01-17 11:00:11
 * @LastEditTime: 2024-01-17 17:28:11
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      left-icon="left"
      title="领券中心"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="$c.back"
    ></uni-nav-bar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view
        class="list-item common_bg"
        v-for="(item, i) in listData"
        :key="i"
        :style="{
         backgroundImage: ``
        }"
        :class="{
          dis: item.is_find == 1
        }"
      >
        <view class="money">
          ¥
          <text>{{ item.price }}</text>
        </view>

        <view class="info">
          <view class="title">{{ item.title }}</view>

          <view class="time">领取后有效期{{ item.effective_day }}天</view>
        </view>

        <view
          v-if="item.is_find != 1"
          class="btn"
          @click="$c.noDouble(getCoupon, item)"
        >
          立即领取
        </view>

        <view v-else class="btn">已领取</view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { getCouponCenterList, receiveCouponCenter } from '@/common/server/coupon.js';

export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      listData: [],
      optData: ''
    }
  },

  onLoad(options) {
    this.optData = options
  },

  methods: {
    async getCoupon(item) {
      try {
        const res = await receiveCouponCenter(item.id);
        if (res.status == 1) {
          this.$c.toast({
            title: res.msg,
            duration: 500,
            success: () => {
              this.mescroll.resetUpScroll()
              this.mescroll.scrollTo(0, 0)
            }
          })
        }
      } catch (error) {
        console.error('领取优惠券失败:', error);
      }
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    async getList({ num, size }) {
      try {
        const res = await getCouponCenterList({
          page: num,
          coupon_id: this.optData.coupon_id
        });
        if (res.status == 1) {
          if (num == 1) {
            this.listData = []
          }

          this.listData = this.listData.concat(res.data.list)
          this.mescroll.endByPage(res.data.list.length, res.data.last_page)
        }
      } catch (error) {
        console.error('获取优惠券列表失败:', error);
        this.mescroll.endErr();
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 0 30rpx;

  .list-item {
    width: 710rpx;
    box-sizing: border-box;
    padding: 40rpx 30rpx 40rpx 10rpx;
    display: flex;
    align-items: center;
    margin: 0 auto 20rpx;

    .money {
      width: 160rpx;
      text-align: center;
      // background: #f00;

      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      text {
        font-size: 42rpx;
      }
    }

    .info {
      flex: 1;
      padding-left: 20rpx;

      .title {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }

      .time {
        margin-top: 20rpx;

        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }

    .btn {
      width: 130rpx;
      height: 50rpx;
      background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
      border-radius: 25rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #222222;
    }

    &.dis {
      filter: grayscale(1);

      .btn {
        color: #ccc;
        background: none;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
