<template>
  <view>
    <nav-shadow></nav-shadow>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <view class="flex items-center text-lg text-txBase text-center py-30rpx ">
        <view class="flex-1 ">来源/支出</view>
        <view class="flex-1">时间</view>
        <view class="flex-1">金额</view>
      </view>
      <view @tap="showLogs(item.remarks)" v-for="(item,index) in dataList" :key="index" class="flex items-center text-lg text-txGray text-center pt-base">
       <view class="flex-1 text-center flex justify-center ">
         <view class="one-ellipsis w-150rpx">
          {{item.remarks}}
         </view>
       </view>
       <view class="flex-1 text-center">{{item.created_at}}</view>
       <view class="flex-1 text-center">{{item.change_balance}}</view>
      </view>
    </mescroll-body>
    <!-- 弹窗 -->
    <cu-modal v-model="show" title="详情" :content="logs" mask-close-able></cu-modal>
  </view>
</template>
<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        show:false,
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
        logs:''
      };
    },
    methods: {
      showLogs(val){
        this.show=true
        this.logs=val
      },
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/wallet/balance-logs`, {
          params: {
            page: page.num,
            per_page: page.size,
            action:'transfer'
          }
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    min-height: 100vh;
    background: #FFFFFF;
  }
</style>
