<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="500"
        class="balance-record"
        v-model="refreshing"
        @refresh="onRefresh"
    >
        <van-list :loading="loading" :finished="finished" finished-text="" @load="getData">
            <div
                class="record-item"
                v-for="item in list"
                :key="item.id"
                :class="item.amount > 0 ? 'add' : 'min'"
                @click="click(item)"
            >
                <img
                    :src="
                        item.amount > 0
                            ? require('../../assets/icon_balance_add.png')
                            : require('../../assets/icon_balance_min.png')
                    "
                    class="icon"
                />
                <div class="info">
                    <div class="type">{{ balanceTypes[item.type] }}</div>
                    <div class="time">{{ item.createdAt }}</div>
                </div>
                <div class="amount">{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</div>
            </div>
            <van-empty :image="require('@assets/kong_black.png')" v-if="empty" description="没有任何记录哦~" />
        </van-list>
    </van-pull-refresh>
</template>
<script>
export default {
    data() {
        return {
            refreshing: false,
            loading: false,
            finished: false,
            empty: false,
            page: 0,
            list: [],
            balanceTypes: {
                WITHDRAW: '提现',
                SELL: '藏品出售',
                RETURN: '打款失败',
                PAY: '订单支付',
                RECHARGE: '充值',
                DENY: '审核不通过',
                AUCTION: '藏品拍卖',
                AUCTION_RETURN: '保证金退款',
                REFUND: '退款',
                BONUS: '活动奖励'
            }
        };
    },
    created() {},
    methods: {
        getData() {
            this.loading = true;
            this.$http.get('/userBalance/my/record', { page: this.page, sort: 'createdAt,desc' }).then(res => {
                this.empty = res.empty;
                this.finished = res.last;
                this.loading = false;
                this.refreshing = false;
                if (this.page === 0) {
                    this.list = [];
                }
                this.list = this.list.concat(res.content);
                this.page++;
            });
        },
        onRefresh() {
            this.page = 0;
            this.getData();
        },
        click(item) {
            if (item.type === 'RETURN' && item.remark) {
                this.$dialog
                    .alert({
                        message: item.remark,
                        confirmButtonColor: this.$colors.prim,
                        className: 'reason-dialog'
                    })
                    .then(() => {});
            }
        }
    }
};
</script>
<style lang="less" scoped>
.balance-record {
    background: @bg3;
    .record-item {
        height: 64px;
        padding: 0 20px;
        .flex();
        background: white;
        position: relative;
        &::after {
            .setBottomLine();
            left: 20px;
            right: 20px;
        }
        .icon {
            width: 32px;
            height: 32px;
        }
        .info {
            margin-left: 10px;
            flex-grow: 1;
            .flex-col();
            .type {
                font-size: 14px;
                color: black;
                line-height: 24px;
            }
            .time {
                color: @text3;
                font-size: 12px;
                line-height: 17px;
            }
        }
        .amount {
            font-size: 16px;
            font-weight: bold;
        }
        &.min {
            .info {
                .type {
                    color: #ff7f1f;
                }
            }
            .amount {
                color: #ff7f1f;
            }
        }
        &.add {
            .info {
                .type {
                    color: #3ab200;
                }
            }
            .amount {
                color: #3ab200;
            }
        }
    }
}
::v-deep(.van-button__text) {
    color: white !important;
}
</style>
