<template>
    <div class="team-member">
        <ion-thumbnail class="avatar">
            <img :src="detail.junior.avatar" />
        </ion-thumbnail>
        <div class="info">
            <div class="name">{{ detail.junior.nickname }}</div>
            <div class="time">{{ $t('distribution.joinTeamAt') }}: {{ detail.createdAt.substr(0, 11) }}</div>
        </div>
        <div class="divider"></div>
        <div class="profit">
            <div class="value">+{{ detail.commissionSum }}</div>
            <div class="label">{{ $t('distribution.totalProfit') }}</div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const props = defineProps({
    detail: {
        type: Object,
        default: () => {}
    }
})
</script>
<style lang="less" scoped>
.team-member {
    .f();
    margin: 10px 16px 0 16px;
    height: 68px;
    background: var(--ion-color-step-0);
    border-radius: 2px;
    padding: 0 15px;
    .avatar {
        width: 36px;
        height: 36px;
        border-radius: 2px;
    }
    .info {
        .f-col();
        margin-left: 10px;
        flex: 1;
        .name {
            font-size: 14px;
            line-height: 20px;
        }
        .time {
            font-size: 12px;
            color: var(--ion-color-step-600);
            line-height: 17px;
        }
    }
    .divider {
        width: 1px;
        height: 36px;
        background-color: var(--ion-color-step-50);
    }
    .profit {
        width: 68px;
        .f-col();
        align-items: flex-end;
        font-size: 12px;
        line-height: 17px;
        .value {
            font-size: 12px;
            line-height: 17px;
        }
    }
}
</style>
