<template>
  <div class="list" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <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>
    <!-- 暂无记录 -->
    <NoData v-if="list.length == 0" :title="$t('common.l45')" pTop="20px"/>
  </div>
</template>
<script>
import { getCardOrderList } from '@/api/share'
export default {
  props: ['couponList'],
  data () {
    return {
      loading: false,
      finished: false,
      pageNum: 0,
      pageSize: 10
    }
  },
  computed: {
    list() {
      return this.couponList.filter(item => item.status != 0)
    },
    typeName() {
      return {
        // '1': '手续费抵扣券',
        // '2': '利息抵扣券',
        // '10': '现金宝箱',
        '1': this.$t('share.l7'),
        '2': this.$t('share.l8'),
        '10': this.$t('share.l15'),
        '11': this.$t('share.l9'),
        '12': this.$t('share.l9'),
        '13': this.$t('share.l9'),
      }
    }
  },
  created () {
  },
  methods: {
    onLoad() {
      this.pageNum += 1
      this.getCardOrderList()
    },
    getCardOrderList() {
      this.pageNum == 1 && (this.fullscreenLoading = true)
      getCardOrderList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).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: 0 20px;
}
.li {
  padding-top: 19px;
  padding-bottom: 20px;
  &+.li {
    border-top: 1px solid #F6F6F6;
  }
  .top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .time {
    font-size: 12px;
    line-height: 16px;
    color: #A3A3A3;
  }
  .bottom {
    margin-top: 8px;
    font-size: 14px;
    color: #888888;
    line-height: 16px;
    .flex {
      justify-content: space-between;
    }
  }
}
.no-data {
  padding-bottom: 13px;
}
</style>