<template>
  <view class="container">
    <navbar :config="config" backColor="#999999"></navbar>
    <view class="list" v-if="billRefillCardList.length>0">
      <view class="item" v-for="(item,index) in billRefillCardList" :key="index">
        <view class="u-flex-center-sb u-1A1A1A">
          <view class="u-font28">{{item.mode}}</view>
          <view class="u-font26">{{item.billType==0?'-':'+'}} {{item.entryValue}}元</view>
        </view>
        <view class="u-999 u-font24 u-mt10">{{item.formatCreateTimeMillis}}</view>
      </view>
    </view>
    <!-- 没有数据 -->
    <loadMore v-if="billRefillCardList.length>0" :status="status"></loadMore>
    <nodata v-else :config="{top:5,content:'暂无交易明细~'}"></nodata>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '交易明细',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#FFFFFF"],
          statusBarFontColor: '#1A1A1A'
        },
        billRefillCardList: [],
        params: {
          page: 1,
          limit: 20,
        },
        status: "more",
        totalPage: null,
        currPage: null
      }
    },
    onLoad() {
      this.getList()
    },
    //下拉刷新
    onPullDownRefresh() {
      this.params.page = 1
      this.billRefillCardList = []
      this.getList()
    },
    //上拉加载
    onReachBottom(e) {
      if (this.totalPage <= this.currPage) {
        this.status = "noMore"
      } else {
        this.status = "more"
        this.params.page++
        this.getList()
      }
    },
    methods: {
      getList() {
        this.$http.get('/bill/refillCard/page', this.params).then(res => {
          if (res && res.code == 200) {
            console.log(res.page.list)
            uni.stopPullDownRefresh()
            this.billRefillCardList = this.billRefillCardList.concat(res.page.list)
            this.totalPage = res.page.totalPage
            this.currPage = res.page.currPage

            if (this.totalPage <= this.currPage) {
              this.status = "noMore";
            } else {
              this.status = "more"
            }
            // if(this.billRefillCardList.length==0){
            // 	this.noData = true
            // }else{
            // 	this.noData = false
            // }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .item {
    padding: 20rpx 30rpx 24rpx;
    border-bottom: 2rpx solid #eee;
  }
</style>