<template>
  <z-paging
    ref="pagingRef"
    v-model="prodList"
    :refresher-enabled="false"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="onGetProdList"
  >
    <view class="Mall4j page-my-integral">
      <view class="integral-box">
        <view class="bg">
          <image src="@/package-activities/static/images/integral-bg.png" />
        </view>
        <view class="number">
          {{ scoreInfo.score }}
        </view>
        <view class="des">
          当前可用积分
        </view>
      </view>

      <!-- 积分操作 -->
      <view class="actions">
        <view
          class="item"
          @tap="onToIntegralDetail"
        >
          <view class="img">
            <image src="@/package-activities/static/images/integral-det.png" />
          </view>
          <view class="text-arrow">
            <view class="text">
              积分明细
            </view>
            <view class="des">
              查看积分使用记录及过期积分
            </view>
          </view>
        </view>
        <view
          class="item"
          @tap="onToSignIn"
        >
          <view class="img">
            <image src="@/package-activities/static/images/integral-get.png" />
          </view>
          <view class="text-arrow">
            <view class="text">
              积分获取
            </view>
            <view class="des">
              每日签到、积分任务赢取积分
            </view>
          </view>
        </view>
      </view>

      <!-- 积分明细 -->
      <view
        v-if="scoreRecords.length > 0"
        class="detail"
      >
        <view
          class="tit"
          @tap="onToIntegralDetail"
        >
          <view class="text">
            积分明细
          </view>
          <view class="text-arrow">
            更多
          </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.ioType === 0 ? '-' + item.score : '+' + item.score }}
            </view>
          </view>
        </view>
      </view>

      <!-- 商品兑换 -->
      <view
        v-if="prodList.length > 0"
        class="guess-like"
      >
        <view class="tit">
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
          <view class="text">
            商品兑换
          </view>
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
        </view>
        <view class="prods">
          <block
            v-for="(prodItem, index) in prodList"
            :key="index"
          >
            <ScoreProdItem :prod-item="prodItem" />
          </block>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import ScoreProdItem from '../../components/score-prod-item/index.vue'

onShow(() => {
  onGetScoreInfo() // 查看积分信息
  onQueryScoreRecords() // 获取积分记录
})
/**
 * 获取商品列表
 */
const pagingRef = ref(null)
const prodList = ref([]) // 商品列表
const onGetProdList = (pageNum, pageSize) => {
  http.request({
    url: '/mall4cloud_search/ua/search/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      spuType: 3
    }
  }).then(res => {
    pagingRef.value.complete([...res.list[0].spus])
  })
}

/**
 * 查看积分中心信息
 */
const scoreInfo = ref({}) // 积分信息
const onGetScoreInfo = () => {
  http.request({
    url: '/mall4cloud_user/score/score_info',
    method: 'GET',
    data: {}
  }).then(res => {
    scoreInfo.value = res
  })
}

/**
 * 获取积分记录
 */
const pageQuery = {
  pageNum: 1,
  pageSize: 4
}
const scoreRecords = ref([]) // 积分记录，只显示前4条
const onQueryScoreRecords = () => {
  http.request({
    url: '/mall4cloud_user/user_score_log/page',
    method: 'GET',
    data: pageQuery
  }).then(res => {
    scoreRecords.value = res.list
  })
}

// 去积分明细
const onToIntegralDetail = () => {
  uni.navigateTo({
    url: '/package-activities/pages/integral-detail/integral-detail?score=' + scoreInfo.value.score
  })
}

// 去签到页
const onToSignIn = () => {
  uni.navigateTo({
    url: '/package-activities/pages/sign-in/sign-in'
  })
}

</script>

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