<template>
  <div class="redpack_log">
    <Title class="page-title" title="提现明细" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title>
    <div class="list_container"  @scroll="onScroll">
      <div class="list_item" v-for="item in moneyLog">
        <div class="item_left">
          <div class="item_title">提现</div>
          <div class="item_date">{{item.created_at}}</div>
        </div>
        <div class="item_right">
          <div class="item_title">{{item.value}}</div>
          <div class="item_tip item_tip1" v-if="item.valid">已到账</div>
          <div class="item_tip item_tip2" v-else>提现中</div>
        </div>
      </div>
      <div class="no-data" v-if="!moneyLog.length">暂无数据~</div>
    </div>
  </div>
</template>

<script>
  import Title from "@/components/Title.vue";
  import {withdraw_log} from "@/components/axios/api";

  export default {
    name: "RedpackLog",
    components: {
      Title,
    },
    data() {
      return {
        moneyLog: [],
        next_page: false,
        page: 1,
        canScroll:true
      }
    },
    methods: {
      goback() {
        location.replace("#/Wallet");
      },
      getList(notRefresh) {
        withdraw_log(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
              );
              // this.detailData.records = this.detailData.records.concat(
              //   data.records
              // );
            }
          }
        }).catch(e=>{
          this.canScroll = true;
        })
      },
      onScroll(event) {
        console.log("onScroll")
        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);
          }
        }
      },
    },
    created() {
      this.getList()
    }
  }
</script>
<style scoped>
  .redpack_log{
    width: 100%;
    height: 100%;
    display: flex;
  }
  .list_container {
    width: 100%;
    flex: 1;
    /*height: 100%;*/
    padding-top: 1rem;
    overflow-y: scroll;
  }

  .list_item {
    display: flex;
    padding: .36rem .4rem;
    border-top: .02rem solid rgba(224, 224, 224, 1);
  }
  
  .no-data {
    font-size: .32rem;
    color: rgba(40, 40, 40, 1);
    text-align: center;
    margin-top: .6rem;
  }

  .item_left {
    flex: 1;
    text-align: left;
  }

  .item_right {
    flex: 1;
    text-align: right;
  }

  .item_title {
    font-size: .32rem;
    color: rgba(40, 40, 40, 1);
    margin-bottom: .2rem;
  }

  .item_date {
    font-size: .28rem;
    color: rgba(165, 165, 165, 1);
  }

  .item_tip {
    font-size: .28rem;
  }

  .item_tip1 {
    color: rgba(165, 165, 165, 1);;
  }

  .item_tip2 {
    color: rgba(199, 167, 93, 1);;
  }
</style>
<style>
  .redpack_log .title_container {
    color: #282828;
    background: #ffffff;
    height: 0.9rem;
    position: fixed;
    top: 0;
    width: 100%;
  }

  .redpack_log .title_container > div > a {
    color: #282828;
  }
</style>
