<template>
  <div class="record record--send">
    <x-header></x-header>
    <transition-group tag="div" class="send-list" name="fade-list" v-if="total">
      <div class="send-item" v-for="sendItem in record" :key="sendItem.id">
          <div class="send-item__left">
              <p v-if="sendItem.type==1">{{sendItem.value}}书币</p>
              <p v-if="sendItem.type==2">{{sendItem.value}}天免费阅读卡</p>
              <p>{{sendItem.created_at}}</p>
          </div>
          <div class="send-item__right">
              平台赠送
          </div>
      </div>
    </transition-group>
     <x-page v-if="record.length"
            @change="getSend"
            :current="current"
            :total="total"></x-page> 
    <div class="record-none text-center"
         v-else>
      暂无赠送记录
    </div>
  </div>
</template>
<script>
import { RecordSend } from "./namespace.js";
import {getRecordSend} from "../api";

export default {
  name: RecordSend.name,
  data() {
    return {
      record: [],
      total: 0,
      current: 1,
    };
  },
  methods: {
    getSend(page) {
      getRecordSend(page).then(r => {
        this.record = r.data.map((item, i) => {
          return Object.assign(item, {
            id: i + 1
          });
        });
         this.current = r.current_page;
        this.total = r.last_page; 
        scrollTo(0, 0);
      });
    }
  },
  created() {
    this.getSend();
  }
};
</script>
