<template>
  <z-paging
    ref="pagingRef"
    v-model="tmpScoreOrderList"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    empty-view-text="您还没有兑换记录"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="onGetIntegralList"
  >
    <view class="Mall4j page-integral-record">
      <view class="record-box">
        <block
          v-for="item in scoreOrderList"
          :key="item.time"
        >
          <view class="date">
            {{ item.time }}
          </view>
          <view class="item-box">
            <view
              v-for="record in item.list"
              :key="record.logId"
              class="item"
            >
              <view class="img">
                <img-show
                  :src="record.mainImgUrl"
                  img-mode="aspectFit"
                />
              </view>
              <view class="text-box">
                <view class="text">
                  {{ record.spuName }}
                </view>
                <view class="price-num">
                  <text style="margin-right: 20rpx">
                    <span v-if="record.scoreFee">{{ '￥'+onPrice(record.scoreFee)+'+' }}</span>{{ record.singleScoreFee }}积分
                  </text>
                  <text>×{{ record.allCount }}</text>
                </view>
                <view class="time">
                  {{ record.createTime }}
                </view>
              </view>
              <view
                class="number"
                :class="{red: record.ioType}"
              >
                {{ ['- ','+ '][record.ioType] }}
                <span v-if="record.actualTotal">{{ '￥'+onPrice(record.actualTotal)+'+' }}</span>
                {{ record.score }}积分
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </z-paging>
</template>

<script setup>

// 获取商积分记录列表
const pagingRef = ref(null)
const tmpScoreOrderList = ref([]) // 响应z-paging的列表
const scoreOrderList = ref([]) // 兑换商品订单记录列表
const onGetIntegralList = (pageNum, pageSize) => {
  http.request({
    url: '/tmerclub_user/user_score_log/score_prod_page',
    method: 'GET',
    data: {
      pageNum,
      pageSize
    }
  }).then(res => {
    if (pageNum === 1) {
      scoreOrderList.value = []
      scoreOrderList.value = onConvertRecordsList(res.list)
    } else {
      scoreOrderList.value = scoreOrderList.value.concat(onConvertRecordsList(res.list))
    }
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    pagingRef.value.complete(res.list)
  })
}
/**
 * 按时间来划分积分订单列表
 * 格式:[{time:time1,list:[]}, {time:time2,list:[]}]
 * @param {Array} list 积分订单列表
 */
const onConvertRecordsList = (list) => {
  if (!list || !list.length) {
    return []
  }
  let time = list[0].createTime.substr(0, 10)
  const records = [{
    time,
    list: []
  }]
  let i = 0
  list.forEach(item => {
    if (time === item.createTime.substr(0, 10)) {
      records[i].list.push(item)
    } else {
      i++
      records[i] = {}
      records[i].list = []
      time = item.createTime.substr(0, 10)
      records[i].time = time
      records[i].list.push(item)
    }
  })
  const len = scoreOrderList.value.length - 1
  let list1 = records
  if (len >= 0 && records[0].time === scoreOrderList.value[len].time) {
    scoreOrderList.value[len].list.push(...records[0].list)
    list1 = []
    for (let i = 1; i < records.length; i++) {
      list1.push(records[i])
    }
  }
  return list1
}
const onPrice = (value) => {
  if (value) {
    return (value / 100).toFixed(2)
  }
}

</script>

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