<template>
  <div class="list" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="item" v-for="item in list" :key="item.id">
      <!-- 可使用   使用中 -->
      <div class="status" :class="{'status4': item.amount == 0, 'status1': item.amount != 0}">{{ item.amount == 0 ? $t('share.l4') : $t('share.l5') }}</div>
      <template v-if="item.type != 10">
        <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>
      <template v-else>
        <div class="amount-box">
          <div class="amount">{{ $handleDigits(item.amount) }}{{ serverUtil[item.market] }}</div>
          <div>{{ typeName[item.type] || 'USD' }}</div>
        </div>
        <div class="num">
          <!-- 剩余额度： -->
          {{ $t('share.l1') }}{{ $handleDigits(item.balance) }}</div>
        <div class="account">
            <!-- 美元钱包账户 -->
            {{ $t('account.l1') }}
          </div>
      </template>
      <div class="time">
        <!-- 有效期至： -->
        {{ $t('share.l6') }}{{ item.end_datetime }}</div>
    </div>
    <!-- 暂无记录 -->
    <NoData v-if="list.length == 0" :title="$t('common.l45')"/>
    <van-popup get-container="body" :close-on-click-overlay="false" v-model="confirmPopup" :style="{ width: '324px' }">
      <confirmPop @cancel="confirmPopup = false" />
    </van-popup>
  </div>
</template>
<script>
import confirmPop from "./confirmPop.vue";
import { getCardOrderList } from '@/api/share'
export default {
  components: {
    confirmPop
  },
  data () {
    return {
      confirmPopup: false,
      list: []
    }
  },
  computed: {
    typeName() {
      return {
        // '1': '手续费抵扣券',
        // '2': '利息抵扣券',
        // '10': '现金券',
        // '11': '现金券',
        // '12': '现金券',
        '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: {
    getCardOrderList() {
      this.fullscreenLoading = true
      getCardOrderList({
        pageNum: 1,
        status: 1
      }).then(res => {
        this.list = res.list || []
      }).catch(() => {}).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>