<template>
  <div class="amount-detail-page">
    <Title class="page-title" title="资金明细" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title>
    <div class="amount-container-list" @scroll="onScroll">
      <div class="amount-item" v-for="(item,index) in moneyLog">
        <div class="left-item">
          <div class="left-title">{{item.week}}期-{{item.step}}步{{item.days}}日健步挑战赛</div>
          <div class="left-content">{{item.created_at}}</div>
        </div>
        <div class="right-item">
          <div class="right-title">{{item.change_type === 6 ? '达标奖励金' : item.change_type === 7 ? '契约金' : '金额'}}(元)</div>
          <div class="right-content">{{item.change_type === 6 ? '+' : item.change_type === 7 ? '-' : ''}}{{item.value}}</div>
        </div>
      </div>
      <div class="no-more-list">没有更多数据啦~</div>
    </div>
  </div>
</template>
<script>
  import Title from "@/components/Title.vue";
  import {withdraw_detail} from "@/components/axios/api";

  export default {
    name: "AmountDetail",
    components: {
      Title
    },
    data() {
      return {
        moneyLog: [],
        next_page: false,
        page: 1,
        canScroll: true
      };
    },
    created() {
      this.getList();
    },
    methods: {
      goback() {
        history.go(-1);
      },
      getList(notRefresh) {
        withdraw_detail(this.page).then(res => {
          this.canScroll = true;
          if (res.code == 0) {
            if (!notRefresh) {
              this.next_page = res.data.next_page;
              this.moneyLog = res.data.logs;
            } else {
              this.next_page = res.data.next_page;
              this.moneyLog = this.moneyLog.concat(res.data.logs);
            }
          }
        }).catch(e=>{
          this.canScroll = true;
        })
      },
      onScroll(event) {
        if (this.next_page && this.canScroll) {
          let offsetHeight = event.currentTarget.offsetHeight,
            scrollHeight = event.target.scrollHeight,
            scrollTop = event.target.scrollTop,
            scrollBottom = offsetHeight + scrollTop;
          if (Math.abs(scrollHeight - scrollBottom) < 5) {
            this.canScroll = false;
            console.log("onScroll", "到底部");
            this.page += 1;
            this.getList(true);
          }
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  #app {
    background: #fff;
  }
  .amount-detail-page {
    width: 100%;
    height: 100vh;
    padding-top: .96rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .page-title {
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
    }
    .amount-container-list {
      width: 100%;
      height: 100vh;
      padding-bottom: .2rem;
      border-top: .01rem solid #e5e5e5;
      box-sizing: border-box;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        display: none;
      }
      .amount-item {
        width: 100%;
        height: 1.38rem;
        border-bottom: .01rem solid #e5e5e5;
        padding: 0 .3rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-item {
          flex: 1;
          flex-shrink: 0;
          .left-title {
            font-size: .3rem;
            line-height: 1;
            color: #333;
          }
          .left-content {
            font-size: .26rem;
            line-height: 1;
            color: #888;
            margin-top: .28rem;
          }
        }
        .right-item {
          flex-shrink: 0;
          text-align: right;
          .right-title {
            font-size: .3rem;
            line-height: 1;
            color: #333;
          }
          .right-content {
            font-size: .36rem;
            line-height: .8;
            color: #FFBB33;
            margin-top: .21rem;
          }
        }
      }
      .no-more-list {
        font-size: .26rem;
        line-height: 1;
        color: #999;
        text-align: center;
        margin: .8rem 0 .3rem;
      }
    }
  }
</style>