<template>
  <view class="progress">
    <nav-bar
      title="成长值明细"
      bg-status="scroll"
      :scroll-top="scrollTop"
      :left-btns="leftBtns"
      top-show-title
      :title-color="titleColor"
      @left-click="leftBtnsClickHandler"
      @updatePadding="updatePadding"
    />
    <view
      class="progress--num"
      :style="{
        paddingTop: `${paddingTop}px`
      }"
    >
      <view class="progress--num__title">
        当前累计成长值
      </view>
      <view class="progress--num__text">
        {{ integral }}
        <text class="progress--num__text__unit">分</text>
      </view>
    </view>
    <view class="progress--info">
      <view class="progress--info__header">
        <view class="header">奖励类型</view>
        <view class="header">时间</view>
        <view class="header">积分</view>
      </view>

      <view class="progress--info__content">
        <scroll-view scroll-y @scrolltolower="getSearchList">
          <view
            v-for="(item, index) in infoList"
            :key="index"
            class="progress--info__content--item"
          >
            <view class="info progress--info__content--item__type">{{ item.alisaName || "" }}</view>
            <view class="info progress--info__content--item__time">{{ item.createdAt || "" }}</view>
            <view class="info progress--info__content--item__price">
              {{
                item.eventPoint.toString().indexOf("-") != -1
                  ? item.eventPoint
                  : `+${item.eventPoint}`
              }}</view
            >
          </view>
          <uni-load-more :status="noMore ? 'loading' : 'noMore'" />
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import navBar from "./components/navBar";
import { getBenefitsDetail } from "@/api/member.api";
const navBarLeftBtns = [{ icon: "arrow-left" }, {}];
export default {
  components: {
    navBar
  },
  data() {
    return {
      leftBtns: navBarLeftBtns,
      paddingTop: 0,
      titleColor: "#fff",
      infoList: [],
      integral: 0
    };
  },
  created() {
    this.getBenefitsDetail();
  },
  methods: {
    leftBtnsClickHandler() {
      // 返回操作
      uni.navigateBack();
    },
    updatePadding(paddingTop) {
      return (this.paddingTop = paddingTop);
    },
    async getBenefitsDetail() {
      const [data] = await getBenefitsDetail();
      this.integral = data.point;
      this.noMore = data.list.length >= 20 ? false : true;
      this.infoList = [...this.infoList, ...data.list];
    },
    getSearchList() {
      if (this.noMore) {
        const id = this.infoList.pop().id;
        this.getBenefitsDetail(id);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.progress {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(env(safe-area-inset-bottom) + 17rpx);
  &--num {
    width: 100%;
    text-align: center;
    background-image: url("https://img.lkbang.net/xcx/memberCenter/grow_strategy_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-bottom: 120rpx;
    &__title {
      padding-top: 34rpx;
      @include text-size(32);
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 0;
    }
    &__text {
      color: #ffa676;
      @include text-size(86);
      &__unit {
        @include text-size(42);
      }
    }
  }
  &--info {
    width: 700rpx;
    margin: 0 auto;
    background: #fff;
    flex: 1;
    overflow: hidden;
    border-radius: 24rpx;
    margin-top: -80rpx;
    &__header {
      width: 100%;
      background: #eff0ff;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      padding: 0 70rpx 0 44rpx;
      box-sizing: border-box;
      color: #333;
      @include text-size(28);
      .header {
        line-height: 100rpx;
      }
    }
    &__content {
      width: 100%;
      overflow-y: auto;
      height: calc(100% - 100rpx);
      // height: 100px;
      border-radius: 0 0 24rpx 24rpx;
      padding: 40rpx 70rpx 0 28rpx;
      box-sizing: border-box;
      @include text-size(24);
      color: #333;
      &--item {
        display: flex;
        justify-content: space-between;
        text-align: left;
        margin-bottom: 36rpx;
        &__type {
          flex-shrink: 0;
          width: 170rpx;
        }
        &__time {
          flex-shrink: 0;
        }
        &__price {
          flex-shrink: 0;
          text-align: right;
        }
      }
    }
  }
}
</style>
