<template>
  <div class="record record--order--gift">
    <x-header></x-header>
    <div class="record-head">
      <router-link tag="p"
                   replace
                   :to="RecordOrder">章节</router-link>
      <router-link tag="p"
                   replace
                   :to="RecordOrderBook">整本</router-link>
      <p class="is-active">送礼物</p>
    </div>
    <transition-group tag="div"
                      class="record-list"
                      name="fade-list"
                      v-if="total">
      <div class="gift-item"
           v-for="(v) in record"
           :key="v.id">
        <p class="item-name">赠送<img :src="v.icon"
               :alt="v.gift_name"><span class="text">给《{{v.book_name}}》</span><span class="cost">{{v.cost}}书币</span></p>
        <p class="item-time">{{v.send_time}}</p>
      </div>
    </transition-group>
    <x-page v-if="record.length"
            :current="current"
            @change="getOrder"
            :total="total"></x-page>
    <div class="record-none"
         v-else>
      暂无消费记录
    </div>
  </div>
</template>

<script>
import { RecordOrder, RecordOrderBook, RecordGift } from "./namespace.js";

import { getUserSendGiftRecord } from "../api";
export default {
  name: RecordGift.name,
  data() {
    return {
      RecordOrderBook: RecordOrderBook.route,
      RecordOrder: RecordOrder.route,
      record: [],
      total: 0,
      current: 1
    };
  },
  methods: {
    getOrder(page) {
      getUserSendGiftRecord(page).then(r => {
        this.record = r.list.map((item, i) => {
          return Object.assign(item, {
            id: i + 1
          });
        });
        this.current = r.meta.current_page;
        this.total = r.meta.last_page;
        scrollTo(0, 0);
      });
    }
  },
  created() {
    this.getOrder();
  }
};
</script>

<style lang="scss" scoped>
.gift-item {
  border-bottom: 1px solid #f7f7f7;
  padding: .2rem;
  .item-name {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: .3rem;

    img {
      width: 1rem;
      height: 1rem;
    }

    .text {
      display: inline-block;
      max-width: 4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cost {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      color: red;
    }
  }
}
</style>
