<template>
    <div class="coin-detail" v-if="coinList && coinList.length">
        <p>明细列表</p>
        <ul class="coin-detail-list" v-infinite-scroll="getCoinData()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <li v-for="coin in coinList">
                <div class="coin-source">
                    <p>{{coin.message}}</p>
                    <time>{{coin.date}}</time>
                </div>
                <div class="coin-num"><i v-if="coin.num>0">+</i>{{coin.num}}</div>
            </li>
        </ul>
    </div>
</template>
<script>
    'use strict';

    const $ = require('jquery');
    const tip = require('common/tip');

    module.exports = {
        data() {
            return {
                page: 0,
                limit: 15,
                pageTotal: 1,
                coinList: [],
                busy: false,
            };
        },

        ready() {
            this.getCoinData();
        },

        methods: {
            getCoinData() {
                this.busy = true;
                if (this.page >= this.pageTotal) {
                    return;
                }
                $.ajax({
                    url: '/me/coin-detail',
                    data: {
                        page: ++this.page,
                        limit: this.limit
                    }
                }).then(result => {
                    if (result.code === 200) {
                        this.busy = false;
                        if (result.data.coinlist.length > 0) {
                            this.$set('coinList', this.coinList.concat(result.data.coinlist));
                            this.pageTotal = result.data.page_total;
                        }
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            }
        }
    };
</script>
<style>
    @import "../../scss/me/_coin.css";
</style>