<template>
  <view class="detail">
    <nav-bar
      title="会员权益明细"
      bg-status="scroll"
      :scroll-top="scrollTop"
      :left-btns="leftBtns"
      :bg-color="bgColor"
      top-show-title
      :title-color="titleColor"
      @left-click="leftBtnsClickHandler"
      @updatePadding="updatePadding"
    />
    <view
      class="detail-content"
      :style="{
        paddingTop: `${paddingTop}px`
      }"
    >
      <view class="detail-content-info">
        <text v-if="pageData.title" class="desc">{{ pageData.title }}</text>
        <view v-if="pageData.savedAmount" class="amount">
          <text class="number">{{ pageData.savedAmount }}</text>
          <text class="unit">元</text>
        </view>
        <view v-if="pageData.exceed" class="notice">
          {{ pageData.exceed }}
        </view>
        <view class="progress">
          <view class="progress-bar">
            <view class="progress-bar-end-point" />
            <view
              class="progress-bar-actual"
              :style="{
                width: actualWidth
              }"
            >
              <view class="progress-bar-actual-start point" />
              <view class="progress-bar-actual-end point">
                <view class="progress-bar-actual-end-notice">已为您省钱</view>
              </view>
            </view>
          </view>
          <view class="bar-desc">
            <text v-if="pageData.savedLowAmount" class="bar-desc-left">{{
              pageData.savedLowAmount
            }}</text>
            <view v-if="pageData.savedHighAmount" class="bar-desc-right">
              <view>最高享受</view>
              <view>{{ pageData.savedHighAmount }}元</view>
            </view>
          </view>
        </view>
        <view v-if="pageData.levelIntervalPointText" class="level-notice">
          <text>{{ pageData.levelIntervalPointText }}</text>
        </view>
        <view class="reward">
          <view class="reward-header">
            <view class="header type">奖励类型</view>
            <view class="header time">时间</view>
            <view class="header price">已省</view>
          </view>
          <scroll-view class="reward-scroll" scroll-y @scrolltolower="getSearchList">
            <view v-for="(item, index) in detailList" :key="index" class="reward-scroll-content">
              <view class="reward-scroll-content-top">
                <view class="left">
                  <view class="yearMonth">{{ item.yearMonth || "" }}</view>
                  <view>共省￥{{ item.totalPrice || "0.00" }}</view>
                </view>
              </view>
              <view class="reward-scroll-bottom-scroll">
                <view class="reward-scroll-bottom">
                  <view
                    v-for="(childItem, childIndex) in item.list"
                    :key="childIndex"
                    class="reward-scroll-content-list"
                  >
                    <view class="type">{{ childItem.name || "" }}</view>
                    <view class="time">{{ childItem.createdAt || "" }}</view>
                    <view class="price">+ {{ childItem.amount }}</view>
                  </view>
                </view>
              </view>
            </view>
            <uni-load-more v-if="noMore" :status="'loading'" />
            <view class="reward-bottom">暂仅支持查询{{ countNo || "" }}个月省钱明细</view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import navBar from "./components/navBar";
import { queryMemberBenefitsDetail, queryBenefitsDiscountDetail } from "@/api/member.api";
let navBarLeftBtns = false;
// #ifdef MP-WEIXIN
navBarLeftBtns = [{ icon: "arrow-left" }, {}];
// #endif
export default {
  components: {
    navBar
  },
  data() {
    return {
      leftBtns: navBarLeftBtns,
      bgColor: "#fff",
      titleColor: "#333",
      scrollTop: 0,
      pageScrollTop: 0,
      paddingTop: 0,
      // 以上为自定义导航
      actualWidth: "0%",
      pageData: {},
      detailList: [],
      detailListData: [],
      noMore: false,
      loading: false,
      countNo: 0,
      countData: []
    };
  },
  created() {
    this.getMemberBenefitsDetail();
    this.queryBenefitsDiscountDetail("");
  },
  methods: {
    async getMemberBenefitsDetail() {
      const [data] = await queryMemberBenefitsDetail();
      this.pageData = data;
      // this.detailList = data.benefitsDetails || [];
      const savedAmount = data.savedAmount;
      const savedHighAmount = data.savedHighAmount;
      if (isNaN(savedAmount) || isNaN(savedHighAmount) || savedHighAmount == "0") {
        this.actualWidth = "0%";
      } else {
        const percent = (parseFloat(savedAmount) / parseFloat(savedHighAmount)).toFixed(4) * 100;
        this.actualWidth = percent >= 100 ? "100%" : percent + "%";
      }
    },
    async queryBenefitsDiscountDetail(id) {
      const [data] = await queryBenefitsDiscountDetail({ id });
      if (data) {
        if (data.list) {
          this.loading = data.list.length >= 20 ? true : false;
          this.detailListData = [...this.detailListData, ...data.list];
        } else {
          this.loading = false;
        }
        if (data.count) this.countData = data.count;
        if (data.countNo) this.countNo = data.countNo;
        this.getList();
      }
    },
    getSearchList() {
      if (this.noMore) {
        const id = this.detailListData.pop().id;
        this.queryBenefitsDiscountDetail(id);
      }
    },
    updatePadding(paddingTop) {
      return (this.paddingTop = paddingTop);
    },
    leftBtnsClickHandler() {
      return uni.navigateBack();
    },
    getList() {
      this.noMore = false;
      let data = [];
      this.countData.forEach(item => {
        data.push({
          name: `${item.years}.${item.months}`,
          yearMonth: item.yearMon,
          totalPrice: item.totalPrice,
          list: []
        });
      });
      this.detailListData.forEach(i => {
        data.forEach(childItem => {
          if (childItem.name === `${i.years}.${i.months}`) {
            childItem.list.push(i);
          }
        });
      });
      let dataList = [];
      data.forEach(i => {
        if (i.list.length >= 20 && this.loading) {
          dataList.push(i);
          this.noMore = true;
        }
        if (!this.noMore) {
          dataList.push(i);
          this.noMore = false;
        }
      });
      this.detailList = dataList;
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/style/var.scss";
.detail {
  width: 100%;
  height: 100%;
  &-content {
    width: 100%;
    height: 100%;
    background-image: url(https://img.lkbang.net/xcx/memberCenter/detail_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    &-info {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 30rpx;
      padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
      .desc {
        @include text-size(32);
        color: #832700;
      }
      .amount {
        margin-top: $padding-xs;
        display: flex;
        align-items: baseline;
        color: #cc3d00;
        font-weight: $font-weight-bold;
        .number {
          @include text-size(86);
        }
        .unit {
          @include text-size(42);
        }
      }
      .notice {
        margin-top: $padding-unit;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rpx 20rpx;
        color: #c36514;
        @include text-size(24);
        background: #f4b878;
        border-radius: 20rpx;
      }
      .progress {
        width: 594rpx;
        // height: 50rp
        padding: $padding-unit * 9 0 $padding-unit * 6;
        &-bar {
          width: 100%;
          height: 14rpx;
          background: #bc7639;
          border-radius: 9rpx;
          position: relative;
          &-end-point {
            position: absolute;
            top: 50%;
            right: -12rpx;
            transform: translateY(-50%);
            width: 24rpx;
            height: 24rpx;
            border-radius: 50%;
            background: #bc7639;
          }
          &-actual {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: $white;
            &-start {
              left: -12rpx;
            }
            &-end {
              position: relative;
              right: -12rpx;
              &-notice {
                width: 150rpx;
                @include text-size(24);
                color: #972d00;
                position: absolute;
                top: -40rpx;
                left: 0;
                text-align: center;
                transform: translateX(-50%);
              }
            }
            .point {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              width: 24rpx;
              height: 24rpx;
              border-radius: 50%;
              background: $white;
              box-shadow: 0 2rpx 4rpx 0 rgba(198, 69, 0, 0.46);
            }
          }
        }
        .bar-desc {
          width: 100%;
          height: 30rpx;
          display: flex;
          justify-content: space-between;
          @include text-size(24);
          color: #972d00;
          position: relative;
          &-left {
            position: absolute;
            top: 10rpx;
            left: 0;
            transform: translateX(-50%);
          }
          &-right {
            position: absolute;
            top: 10rpx;
            right: 0;
            transform: translateX(50%);
          }
        }
      }
      .level-notice {
        padding: 0 $padding-xs;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50rpx;
        // opacity: 0.3;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 38rpx;
        @include text-size(24);
        color: #9a2e00;
      }
      .reward {
        flex: 1;
        width: 700rpx;
        overflow: hidden;
        flex-shrink: 0;
        margin-top: $padding-unit * 5;
        &-header {
          width: 100%;
          height: 100rpx;
          background: #fff5ec;
          border-radius: 24rpx 24rpx 0 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 68rpx 0 44rpx;
          @include text-size(28);
          color: $black;
          .type {
            flex-shrink: 0;
            text-align: left;
          }
          .time {
            width: 300rpx;
            text-align: center;
            flex-shrink: 0;
          }
          .price {
            flex-shrink: 0;
            padding-right: 10rpx;
          }
        }
        &-scroll {
          width: 100%;
          height: calc(100% - 100rpx);
          background: $white;
          padding: 8rpx 20rpx 0 28rpx;
          &-content {
            border-bottom: 2rpx solid #ececec;
            &-top {
              padding-top: 38rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: $font-color-dark;
              @include text-size(24);
              font-weight: $font-weight-bold;
              padding-bottom: 40rpx;
              .left {
                display: flex;
                .yearMonth {
                  width: 150rpx;
                }
              }
            }
            &-list {
              margin-bottom: 38rpx;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              @include text-size(24);
              .type {
                flex-shrink: 0;
                text-align: left;
                flex: 1;
              }
              .time {
                flex-shrink: 0;
                text-align: center;
              }
              .price {
                text-align: right;
                flex: 1;
              }
            }
          }
        }
        &-bottom {
          @include text-size(24);
          color: $gray-4;
          text-align: center;
          padding: 80rpx 0 24rpx;
        }
      }
    }
  }
}
</style>
