<template>
  <div class="list" 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="item" v-for="item in list" :key="item.id">
        <template v-if="item.type == 10 || item.type == 11 || item.type == 12 || item.type == 13">
          <div class="status status3">
            <!-- 已领取 -->
            {{ $t('share.l') }}
          </div>
          <div class="amount-box">
            <div class="amount">{{ $handleDigits(item.balance) }}{{ serverUtil[item.market] }}</div>
            <div>{{ typeName[item.type] || 'USD' }}</div>
          </div>
          <div class="num">
            <!-- 剩余额度： -->
            {{ $t('share.l1') }}{{ $handleDigits($bigDecimal.subtract(item.balance, item.amount)) }}</div>
          <div class="account">
            <!-- 美元钱包账户 -->
            {{ $t('account.l1') }}
          </div>
        </template>
        <template v-else>
          <!-- 已领取   已过期-->
          <div class="status" :class="{'status3': $bigDecimal.subtract(item.balance, item.amount) == 0, 'status2': $bigDecimal.subtract(item.balance, item.amount) != 0}">{{ $bigDecimal.subtract(item.balance, item.amount) == 0 ? $t('share.l') : $t('share.l3') }}</div>
          <div class="amount-box">
            <div class="amount">{{ $handleDigits(item.balance) }}{{ serverUtil[item.market] }}</div>
            <div>{{item.rate}}%{{ typeName[item.type] || 'USD' }}</div>
          </div>
          <div class="num">
            <!-- 剩余额度： -->
            {{ $t('share.l1') }}{{ $handleDigits($bigDecimal.subtract(item.balance, item.amount)) }}</div>
            <!-- A股通 -->
            <div class="account">{{ serverName[item.market] || $t('share.l2') }}</div>
        </template>
        <!-- 时间 -->
        <div class="time" v-if="item.update_datetime">{{ $t('common.l24') }}：{{ item.update_datetime }}</div>
      </div>
    </van-list>
    <!-- 暂无记录 -->
    <NoData v-if="list.length == 0" :title="$t('common.l45')"/>
  </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.l9'),
        '11': this.$t('share.l9'),
        '12': this.$t('share.l9'),
        '13': this.$t('share.l9'),
      }
    }
  },
  created () {
    this.getCardOrderList()
  },
  methods: {
    onLoad() {
      this.pageNum += 1
      this.getCardOrderList()
    },
    getCardOrderList() {
      this.pageNum == 1 && (this.fullscreenLoading = true)
      getCardOrderList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: 2
      }).then(res => {
        var 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>
.list {
  padding-top: 8px;
  .item {
    margin-top: 10px;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    padding: 15px 19px;
    position: relative;
  }
}
.amount-box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: 70%;
  align-items: baseline;
  font-size: 12px;
  color: #A3A3A3;
  margin-bottom: 15px;
  .amount {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-);
    margin-right: 4px;
  }
}
.num {
  font-size: 16px;
  margin-bottom: 6px;
}
.account {
  font-size: 12px;
  color: #A3A3A3;
  margin-bottom: 15px;
}
.time {
  font-size: 12px;
  color: #A3A3A3;
}
.status {
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 14px;
  position: absolute;
  top: 10px;
  right: 8px;
  &.status1 {
    border: 1px solid rgba(19,187,83,0.49);
    color: #13BB53;
  }
  &.status2 {
    border: 1px solid #FEBABA;
    color: #FF4B4B;
  }
  &.status3 {
    border: 1px solid #E8E8E8;
    color: #A3A3A3;
  }
  &.status4 {
    border: 1px solid rgba(255,111,48,0.38);
    color: #FF6F30;
  }
}
</style>