<template>
    <div class="record">
        <div class="top">
            <span>申请时间：{{ info.createdAt }}</span>
            <span>{{ withdrawStatus[info.status] }}</span>
        </div>
        <div class="money">
            <span>+{{ info.amount }}</span>
            <span>元</span>
        </div>
        <div class="moeny-list">
            <div class="money-item">
                <div class="val">{{ info.amount }}</div>
                <div class="name">申请佣金</div>
            </div>
            <div class="money-item">
                <div class="val">{{ info.auditAmount || info.amount }}</div>
                <div class="name">实际金额</div>
            </div>
            <div class="money-item">
                <div class="val">0</div>
                <div class="name">提现手续费</div>
            </div>
        </div>
        <van-button
            class="button"
            color="#FF8F00"
            block
            plain
            hairline
            @click="goNext('commissionRecordList', { id: info.id })"
        >
            <div class="button-content">
                <span>查看提现详情</span>
                <img src="../assets/icon_inter_pre.png" class="next" alt="" />
            </div>
        </van-button>
    </div>
</template>
<script>
import { mapState } from 'pinia'
import { useUserStore } from '@/stores/user'
import { withdrawStatus } from '../status'
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            withdrawStatus
        }
    },
    computed: {
        ...mapState(useUserStore, ['user'])
    }
}
</script>
<style lang="less" scoped>
.record {
    margin: 0 0 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    padding: 0 15px;
}

.button {
    height: 36px;
    border-color: var(--ion-color-step-0) !important;
    font-size: 12px;
    line-height: 36px;

    .next {
        width: 24px;
        height: 24px;
    }

    .button-content {
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #f2f4f5;
    }
}

.top {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(102, 102, 102, 1);
    line-height: 18px;
    span {
        &:last-child {
            font-size: 13px;
            font-weight: bold;
            color: rgba(255, 143, 0, 1);
            line-height: 18px;
        }
    }
}

.money {
    height: 64px;
    background: rgba(255, 143, 0, 0.12);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
        &:first-child {
            font-size: 24px;
            font-weight: bold;
            color: rgba(var(--ion-color-light-contrast-rgb), 1);
            line-height: 28px;
        }
        &:last-child {
            font-size: 12px;
            font-weight: bold;
            color: rgba(var(--ion-color-light-contrast-rgb), 1);
            line-height: 17px;
            margin-left: 4px;
        }
    }
}
.moeny-list {
    display: flex;
    align-items: center;
    height: 81px;

    .money-item {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .val {
            font-size: 14px;
            font-weight: bold;
            color: rgba(var(--ion-color-light-contrast-rgb), 1);
            line-height: 20px;
        }

        .name {
            font-size: 12px;
            color: rgba(102, 102, 102, 1);
            line-height: 17px;
            margin-top: 4px;
        }
    }
}
</style>
