<template>
    <div class="point">
        <div class="point-card">
            <div class="card-top">
                <div class="text1">绿洲核</div>
                <div class="text2">
                    <span>{{ balance }}</span>
                    <span>个</span>
                </div>
                <img src="@assets/png-bg.png" alt="" />
            </div>
            <div class="card-bottom" @click="$router.push('/shop?active=1')">
                <img src="@assets/icon_inter1.png" alt="" />
                <span>去商城兑换好物</span>
                <img src="@assets/icon_inter2.png" alt="" />
            </div>
        </div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <div class="title">交易记录</div>
            <div class="point-item" v-for="(item, index) in list" :key="index">
                <div class="text1">
                    <span>{{ getLabelName(item.type, typeOptions) }}</span>
                    <span>{{ item.amount }}</span>
                </div>
                <div class="text2">
                    <span>编号:{{ item.id }}</span>
                    <span> {{ getTime(item.payAt) }}</span>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import list from '../../mixins/list';
import room from '../../mixins/room.js';
export default {
    data() {
        return {
            balance: 0,
            url: '/user/balanceRecord',
            httpType: 'get',
            typeOptions: [
                {
                    label: '提现',
                    value: 'WITHDRAW'
                },
                {
                    label: '藏品出售',
                    value: 'SELL'
                },
                {
                    label: '藏品拍卖',
                    value: 'AUCTION'
                },
                {
                    label: '保证金退款',
                    value: 'AUCTION_RETURN'
                },
                {
                    label: '拍卖奖励',
                    value: 'REWARD'
                },
                {
                    label: '失败退回',
                    value: 'RETURN'
                },
                {
                    label: '支付',
                    value: 'PAY'
                },
                {
                    label: '充值',
                    value: 'RECHARGE'
                },
                {
                    label: '拒绝',
                    value: 'DENY'
                },
                {
                    label: '奖励',
                    value: 'BONUS'
                },
                {
                    label: '退款',
                    value: 'REFUND'
                }
            ]
        };
    },
    mixins: [list, room],
    mounted() {
        this.$http.get('/user/myBalance').then(res => {
            this.balance = res.balance;
        });
    },
    methods: {
        getTime(time) {
            return this.dayjs(time).format('MM-DD HH:mm');
        }
    }
};
</script>

<style lang="less" scoped>
.point {
    padding: 22px 16px;
}

.top {
    .flex-col();
    align-items: center;
    padding: 0 0 15px;

    .text1 {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
    }
}

.title {
    padding: 12px 0;
    font-size: 16px;
    color: #ffffff;
    line-height: 24px;
}

.point-item {
    background-color: @bg2;
    padding: 12px;
    .text1 {
        .flex();
        justify-content: space-between;
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
    }
    .text2 {
        .flex();
        justify-content: space-between;
        margin-top: 5px;
        font-size: 12px;
        color: #6a6d83;
    }
}
.point-item + .point-item {
    margin-top: 16px;
}
.point-card {
    background-color: #5176eb;
    border-radius: 8px;
    overflow: hidden;
    .card-top {
        padding: 16px;
        position: relative;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            font-size: 14px;
            color: #ffffff;
            line-height: 14px;
            margin-top: 21px;
            span {
                &:first-child {
                    font-size: 40px;
                    font-family: OSP-DIN, OSP;
                    font-weight: normal;
                    line-height: 30px;
                    margin-right: 4px;
                }
            }
        }
        img {
            width: 166px;
            height: 98px;
            position: absolute;
            right: 0;
            top: 0;
        }
    }

    .card-bottom {
        height: 40px;

        background: rgba(38, 57, 177, 0.4);
        .flex();
        justify-content: center;
        img {
            width: 24px;
            height: 24px;
            display: block;
        }
        span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            line-height: 24px;
            margin: 0 4px;
        }
    }
}
</style>
