<template>
  <view class="body pd16_15">
    <view class="jilu-box" v-show="list.length > 0">
      <view class="pb10 jilu-item" v-for="(item, key) in list" :key="key">
        <view class="jilu-item-box">
          <view class="jilu-items">
            <view class="lines">
              <text class="ft14" style="font-weight: bold;">{{ item.video_name }}</text>
              <text class="ft12 jilu-txt">{{ item.series_name }}</text>
              <text class="ft12 jilu-txt">{{ item.created_at }}</text>
            </view>
          </view>
          <view class="lines">
            <text class="ft14 jilu-txt"
              style="text-align: right;font-weight: bold;color:  #FF9800;">-{{ item.coin_cost }}K币</text>
          </view>
        </view>
      </view>
    </view>
    <view class="empty-box" v-if="list.length < 1 && show">
      <image src="/static/img/orders/emty.png" mode=""></image>
      <p class="ft14 line-1-txt">暂无消费记录</p>
    </view>
  </view>
</template>

<script>
import {
  getUserConsumeRecord
} from "@/common/apis/my.js"
export default {
  data() {
    return {
      page: 1,
      hasMore: true,
      list: [],
      show: false
    }
  },
  onLoad() {

  },
  onShow() {
    this.page = 1;
    this.hasMore = true;
    this.getList();
    uni.hideLoading();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.list = [];
    this.getList();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (!this.hasMore) {
      return false;
    }
    this.getList();
  },
  methods: {
    async getList() {

      if (this.page <= 1) {
        this.show = false;
      }
      let response = await getUserConsumeRecord(this.page);
      let res = response.data
      if (res) {
        if (this.page >= res.last_page) {
          this.hasMore = false;
        } else {
          this.page++;
        }
        res.data.forEach((item, index) => {
          this.list.push(item);
        })
      }
      this.show = true;
    },
  }
}
</script>

<style scoped lang="scss">
@import url("style/consume.css");
</style>