<template>
    <div class="rankItem">
        <div class="num" v-html="numContent"></div>
        <van-image width="40" height="40" radius="100" fit="fill" :src="info.avatar" />
        <div class="name">{{ info.nickname }}</div>
        <div class="money">{{ info.money.toFixed(2) }}</div>
    </div>
</template>
<script>
export default {
    name: 'rankItem',
    props: {
        rank: {
            type: [Number, String],
            default: 1
        },
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {};
    },
    computed: {
        numContent() {
            if (this.rank > 3) {
                return this.rank;
            } else if (this.rank == 1) {
                return '<img src="' + require('../assets/paihang_icon_no1.png') + '" style="width:20px"/>';
            } else if (this.rank == 2) {
                return '<img src="' + require('../assets/paihang_icon_no2.png') + '" style="width:20px"/>';
            } else if (this.rank == 3) {
                return '<img src="' + require('../assets/paihang_icon_no3.png') + '" style="width:20px"/>';
            }
            return '';
        }
    }
};
</script>
<style lang="less" scoped>
.rankItem {
    height: 68px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    padding: 0 14px;
    align-items: center;
    margin-top: 10px;
}

.num {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    line-height: 20px;
    width: 20px;
    margin-right: 15px;
    img {
        width: 20px;
        height: 25px;
    }
}

.name {
    font-size: 14px;
    color: rgba(93, 52, 0, 1);
    line-height: 20px;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}

.money {
    flex-grow: 1;
    text-align: right;
    font-size: 15px;
    font-weight: bold;
    color: rgba(203, 41, 0, 1);
    line-height: 21px;
}
</style>
