<template>
  <view>
    <nav-shadow></nav-shadow>
    <!-- 申请中 已成功 -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <view class="pt-26rpx">
        <block v-for="(item,index) in dataList" :key="index">
          <block v-if="item.status!=2">
            <view class="w-710rpx mb-base  box-shadow m-auto px-30rpx py-base text-lg">
              <view class="flex items-center ">
                <view class="text-txBase w-120rpx">卡号</view>
                <view class="flex items-center justify-between flex-1">
                  <view class="text-txGray">{{item.bank_number|hideBankCard}}</view>
                  <view class="text-hex-2979ff  px-10rpx bg-hex-F5F8FC rounded-lg" v-if="item.status==0">申请中</view>
                  <view class="text-primary  px-10rpx bg-hex-F2F7F5 rounded-lg" v-if="item.status==1">已成功</view>
                </view>
              </view>
              <view class="flex items-center">
                <view class="text-txBase  w-120rpx">银行</view>
                <view class="text-txGray ">{{item.bank_name}}</view>
              </view>
              <view class="flex items-center ">
                <view class="text-txBase w-120rpx">持卡人</view>
                <view class="text-txGray flex-1 ">{{item.username}}</view>
              </view>
              <view class="flex items-center justify-between">
               <view class="flex items-center">
                 <view class="text-txBase w-120rpx">金额</view>
                 <view class="text-txGray flex-1 ">{{item.amount}}</view>
               </view>
               <view class="text-txBase">手续费：{{item.service_amount}}元</view>
              </view>
              <view class="text-right text-md text-txBase mt-10rpx">{{item.created_at}}</view>
            </view>
          </block>
          <!-- 失败 -->
          <block v-else>
            <view class="w-710rpx bg-hex-F7F5F5  box-shadow mb-base m-auto   px-30rpx py-base text-lg text-txGray">
              <view class="flex items-center ">
                <view class=" w-120rpx">卡号</view>
                <view class="flex items-center justify-between flex-1">
                  <view>{{item.bank_number|hideBankCard}}</view>
                  <view class=" px-10rpx bg-hex-E5E5E5 rounded-lg">已拒绝</view>
                </view>
              </view>
              <view class="flex items-center">
                <view class="w-120rpx">银行</view>
                <view>{{item.bank_name}}</view>
              </view>
              <view class="flex items-center ">
                <view class=" w-120rpx">持卡人</view>
                <view class="flex-1 ">{{item.username}}</view>
              </view>
              <view class="flex items-center justify-between">
               <view class="flex items-center">
                 <view class="text-txBase w-120rpx">金额</view>
                 <view class="text-txGray flex-1 ">{{item.amount}}</view>
               </view>
               <view class="text-txBase">手续费：{{item.service_amount}}元</view>
              </view>
              <view class="text-right text-md text-txBase">{{item.created_at}}</view>
              <view class="h-1rpx bg-txBorder mt-base"></view>
              <view class="mt-base text-hex-D43030">原因：{{item.remarks}}</view>
            </view>
          </block>
        </block>
      </view>
    </mescroll-body>
  </view>
</template>
<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
      };
    },
    methods: {
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/wallet/wallet-to-bank-logs`, {
          params: {
            page: page.num,
            per_page: page.size
          }
        }).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>
  page {
    min-height: 100vh;
    background: #FFFFFF;
  }
</style>
<style lang="scss" scoped>
  .box-shadow {
    box-shadow: 0px 2rpx 10rpx rgba(0, 0, 0, 0.2);
    border-radius: 15rpx;
  }
</style>
