<template>
  <z-paging
    ref="pagingRef"
    v-model="scoreRecords"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    hide-empty-view
    @query="queryScoreRecords"
  >
    <view class="Mall4j page-integral-detail">
      <view class="integral-box">
        <view class="bg">
          <image src="@/package-activities/static/images/integral-bg.png" />
        </view>
        <view class="number">
          {{ currentScore }}
        </view>
        <view class="des">
          当前可用积分
        </view>
      </view>

      <!-- 积分明细 -->
      <view class="detail">
        <view class="tab">
          <view
            :class="['item', nav === 0 ? 'active' : '']"
            @click="switchNav(0)"
          >
            全部
          </view>
          <view
            :class="['item', nav === 1 ? 'active' : '']"
            @click="switchNav(1)"
          >
            收入
          </view>
          <view
            :class="['item', nav === 2 ? 'active' : '']"
            @click="switchNav(2)"
          >
            支出
          </view>
          <view
            :class="['item', nav === 3 ? 'active' : '']"
            @click="switchNav(3)"
          >
            已过期
          </view>
        </view>
        <view class="con-box">
          <view
            v-for="(item, index) in scoreRecords"
            :key="index"
            class="item"
          >
            <view class="text-box">
              <!-- source 积分类型 0.注册送积分1.购物 2.会员等级提升加积分 3.签到加积分 4.购物抵扣使用积分 5.积分过期 6.余额充值7.系统更改积分 -->
              <view class="text">
                {{ ['注册送积分','购物奖励积分','会员等级提升送积分','每日签到','购物使用积分抵扣','积分过期','余额充值','系统更改','购物抵扣使用积分退还','订单奖励退回','积分商品兑换','兑换积分退还','积分失效'][item.source] }}<text v-if="item.isLock">
                  (积分锁定中)
                </text>
              </view>
              <view class="time">
                {{ item.updateTime }}
              </view>
            </view>
            <!-- ioType 出入类型 0=支出 1=收入 -->
            <view :class="['number', item.ioType === 0 ? 'black' : '', item.source === 5 ? 'gray' : '']">
              {{ item.ioType === 0 ? '-' + item.score : '+' + item.score }}
            </view>
          </view>
        </view>
        <!-- 空列表或加载全部提示 -->
        <empty-all-tips
          v-if="isLoaded"
          :is-empty="!scoreRecords.length"
        />
      </view>
    </view>
  </z-paging>
</template>

<script setup>

// 当前可使用积分
const currentScore = ref(0)
onLoad(options => {
  currentScore.value = options.score || 0
})

/**
 * 切换nav
 * @param {Number} nav 0全部 1收入 2支出 3已过期
 */
const nav = ref(0)
const switchNav = (paramNav) => {
  if (nav.value === paramNav) return
  nav.value = paramNav
  source = ''
  ioType = ''
  if (nav.value === 1) {
    ioType = 1
  } else if (nav.value === 2) {
    ioType = 0
  } else if (nav.value === 3) {
    source = 5
  }
  // 重新加载列表
  pagingRef.value.reload()
}

/**
 * 获取积分记录
 * @params {Number} ioType 出入类型 0:支出 1:收入
 * @params {Number} source 积分类型 0.注册送积分1.购物 2.会员等级提升加积分 3.签到加积分 4.购物抵扣使用积分 5.积分过期 6.余额充值7.系统更改积分
 */
let ioType = ''
let source = ''
const scoreRecords = ref([]) // 积分记录
const pagingRef = ref(null)
const isLoaded = ref(false)
const queryScoreRecords = (pageNum, pageSize) => {
  isLoaded.value = false
  http.request({
    url: '/tmerclub_user/user_score_log/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      ioType,
      source
    }
  }).then(res => {
    isLoaded.value = true
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list)
  })
}

</script>

<style lang="scss" scoped>
@use "./integral-detail.scss";
</style>
