<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="list.length == 0 ? '' : $t('common.l5')"
      @load="onLoad"
    >
      <div class="li" v-for="item in list" :key="item.id">
        <div class="top">
          <div class="name">{{ typeName[item.type] }}</div>
          <div class="time">{{ item.insert_datetime }}</div>
        </div>
        <div class="bottom">
          <div class="flex">
            <div>{{ item.balance ? $handleDigits(item.balance) : '--' }} {{ serverUtil[item.market] || 'USD' }}</div>
          </div>
        </div>
      </div>
    </van-list>
    <!-- 暂无记录 -->
    <NoData v-if="list.length == 0" :title="$t('common.l45')" pTop="20px"/>
  </div>
</template>
<script>
import { getCardOrderList } from '@/api/share'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      pageNum: 0,
      pageSize: 10
    }
  },
  computed: {
    typeName() {
      return {
        // '1': '手续费抵扣券',
        // '2': '利息抵扣券',
        // '10': '现金宝箱',
        '1': this.$t('share.l7'),
        '2': this.$t('share.l8'),
        '10': this.$t('share.l15'),
      }
    }
  },
  created () {
  },
  methods: {
    onLoad() {
      this.pageNum += 1
      this.getCardOrderList()
    },
    getCardOrderList() {
      this.pageNum == 1 && (this.fullscreenLoading = true)
      getCardOrderList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        let list = res.list || []
        if (this.pageNum == 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>
.li {
  padding-top: 16px;
  padding-bottom: 12px;
  &+.li {
    border-top: 1px solid #F2F2F2;
  }
  .top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .name {
    font-size: 16px;
  }
  .time {
    font-size: 12px;
    line-height: 16px;
    color: #A3A3A3;
  }
  .bottom {
    margin-top: 8px;
    font-size: 12px;
    color: #A3A3A3;
    line-height: 16px;
    .flex {
      justify-content: space-between;
    }
  }
}
.no-data {
  padding-bottom: 13px;
}
</style>